/* =========================================================
FILE : affidavit-style.css
PREMIUM LEGAL LANDING PAGE UI
========================================================= */

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

/* =========================================================
RESET
========================================================= */

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

/* =========================================================
BODY
========================================================= */

body{

background:#eef3f9;

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

color:#1e293b;

overflow-x:hidden;

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

text-rendering:optimizeLegibility;

}

/* =========================================================
HEADER / NAVBAR FIX
========================================================= */

.navbar{

background:
linear-gradient(
135deg,
#4361ee,
#3a0ca3
)!important;

padding:10px 0!important;

box-shadow:
0 4px 12px rgba(0,0,0,.1);

min-height:76px;

display:flex;

align-items:center;

z-index:9999;

}

.navbar .container{

display:flex;

align-items:center;

justify-content:space-between;

}

/* =========================================================
LOGO
========================================================= */

.navbar-brand{

display:flex;

align-items:center;

margin-right:20px;

}

.navbar-brand img{

width:42px;

height:42px;

object-fit:contain;

}

/* =========================================================
NAV MENU
========================================================= */

.navbar-nav{

display:flex;

align-items:center;

gap:6px;

}

.navbar-nav .nav-item{

display:flex;

align-items:center;

}

.navbar-nav .nav-link{

color:#fff!important;

font-size:16px;

font-weight:600;

padding:10px 14px!important;

display:flex;

align-items:center;

transition:.2s;

}

.navbar-nav .nav-link:hover{

color:#dbeafe!important;

}

/* =========================================================
SEARCH
========================================================= */

.navbar form{

margin:0!important;

display:flex;

align-items:center;

}

.navbar input[type="text"]{

border:none!important;

outline:none!important;

background:transparent;

height:36px;

font-size:14px;

box-shadow:none!important;

}

.navbar button{

border:none;

cursor:pointer;

}

/* =========================================================
DROPDOWN
========================================================= */

.dropdown-menu{

border:none;

border-radius:14px;

overflow:hidden;

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

}

.dropdown-item{

padding:10px 16px;

font-size:14px;

}

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

.page-wrapper{

padding:50px 0 90px;

}

.page-wrapper > .container{

max-width:1200px;

}

/* =========================================================
ARTICLE CARD
========================================================= */

.article-card{

background:#fff;

border-radius:32px;

padding:55px;

border:1px solid #dbe4f0;

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

position:relative;

overflow:hidden;

}

/* =========================================================
TOP BORDER
========================================================= */

.article-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:7px;

background:
linear-gradient(
90deg,
#2563eb,
#3b82f6,
#60a5fa
);

}

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

.breadcrumb-box{

font-size:14px;

margin-bottom:32px;

color:#64748b;

font-weight:500;

}

.breadcrumb-box a{

color:#2563eb;

text-decoration:none;

font-weight:700;

}

.breadcrumb-box span{

margin:0 6px;

}

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

.article-title{

font-size:58px;

line-height:1.25;

font-weight:800;

letter-spacing:-1px;

max-width:950px;

color:#0f172a;

margin-bottom:25px;

}

.article-description{

font-size:19px;

line-height:2.2;

color:#475569;

margin-bottom:50px;

}

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

.hero-box{

background:
linear-gradient(
135deg,
#f8fbff 0%,
#eef4ff 100%
);

border:1px solid #dbeafe;

border-radius:30px;

padding:50px;

margin-bottom:75px;

overflow:hidden;

position:relative;

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

}

.hero-box::before{

content:"";

position:absolute;

width:350px;

height:350px;

border-radius:50%;

background:
rgba(37,99,235,.05);

top:-120px;

right:-120px;

}

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

.hero-content{

position:relative;

z-index:2;

}

.hero-content h2{

font-size:44px;

line-height:1.4;

font-weight:800;

color:#0f172a;

margin-bottom:24px;

}

.hero-content p{

color:#475569;

line-height:2.2;

font-size:18px;

}

.hero-content ul{

padding-left:22px;

margin-top:26px;

}

.hero-content li{

margin-bottom:14px;

color:#334155;

line-height:2;

font-size:17px;

font-weight:500;

}

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

.hero-btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:14px;

padding:20px 44px;

margin-top:35px;

border-radius:18px;

text-decoration:none;

font-size:17px;

font-weight:800;

color:#fff;

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

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

transition:.35s;

}

.hero-btn:hover{

transform:
translateY(-6px)
scale(1.03);

color:#fff;

}

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

.hero-image{

position:relative;

z-index:2;

padding:14px;

border-radius:30px;

background:
linear-gradient(
135deg,
#2563eb,
#60a5fa,
#93c5fd
);

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

overflow:hidden;

}

.hero-image img{

width:100%;

display:block;

border-radius:22px;

border:6px solid #fff;

background:#fff;

}

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

.content-heading{

font-size:42px;

line-height:1.45;

font-weight:800;

letter-spacing:-0.5px;

color:#0f172a;

margin-top:75px;

margin-bottom:28px;

position:relative;

padding-left:22px;

}

.content-heading::before{

content:"";

position:absolute;

left:0;

top:10px;

width:7px;

height:42px;

border-radius:20px;

background:
linear-gradient(
180deg,
#2563eb,
#60a5fa
);

}

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

.content-text{

font-size:20px;

line-height:2.35;

font-weight:500;

letter-spacing:.2px;

color:#334155;

margin-bottom:26px;

}

/* =========================================================
LISTS
========================================================= */

.custom-list{

padding-left:24px;

margin-top:24px;

margin-bottom:40px;

}

.custom-list li{

margin-bottom:16px;

color:#334155;

line-height:2.1;

font-size:18px;

font-weight:500;

}

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

.info-grid{

display:grid;

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

gap:30px;

margin-top:75px;

margin-bottom:50px;

}

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

.info-card{

background:#fff;

border:1px solid #e2e8f0;

border-radius:24px;

padding:38px;

transition:.4s;

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

}

.info-card:hover{

transform:translateY(-8px);

}

.info-icon{

width:78px;

height:78px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

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

color:#fff;

font-size:30px;

margin-bottom:24px;

}

.info-card h3{

font-size:26px;

font-weight:800;

margin-bottom:16px;

color:#0f172a;

}

.info-card p{

font-size:16px;

line-height:2;

color:#475569;

}

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

.legal-box{

background:#fff7ed;

border-left:7px solid #f97316;

padding:35px;

border-radius:24px;

margin-top:50px;

margin-bottom:50px;

}

.legal-box h2{

font-size:34px;

font-weight:800;

margin-bottom:18px;

color:#9a3412;

}

.legal-box p{

font-size:18px;

line-height:2.2;

color:#7c2d12;

}

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

.download-box{

background:
linear-gradient(
135deg,
#2563eb 0%,
#4f46e5 50%,
#7c3aed 100%
);

padding:60px 40px;

border-radius:32px;

text-align:center;

color:#fff;

margin-top:60px;

margin-bottom:60px;

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

position:relative;

overflow:hidden;

}

.download-box::before{

content:"";

position:absolute;

width:400px;

height:400px;

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

border-radius:50%;

top:-150px;

right:-150px;

}

.download-box h2{

font-size:44px;

font-weight:800;

margin-bottom:18px;

position:relative;

z-index:2;

}

.download-box p{

font-size:19px;

line-height:2;

margin-bottom:30px;

position:relative;

z-index:2;

}

.download-btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:14px;

padding:18px 40px;

border-radius:18px;

background:#fff;

color:#2563eb;

font-size:18px;

font-weight:800;

text-decoration:none;

transition:.3s;

position:relative;

z-index:2;

}

.download-btn:hover{

transform:translateY(-5px);

color:#111827;

}

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

.faq-box{

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

backdrop-filter:blur(10px);

border:1px solid #e2e8f0;

border-radius:22px;

padding:30px;

margin-bottom:24px;

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

}

.faq-box h3{

font-size:24px;

font-weight:800;

margin-bottom:14px;

color:#0f172a;

}

.faq-box p{

font-size:17px;

line-height:2.1;

color:#475569;

}

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

.author-box{

margin-top:50px;

padding-top:30px;

border-top:1px solid #e2e8f0;

}

.author-box h4{

font-size:24px;

font-weight:800;

margin-bottom:10px;

color:#0f172a;

}

.author-box p{

font-size:16px;

line-height:2;

color:#64748b;

}

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

@media(max-width:992px){

.info-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.page-wrapper{

padding:20px 0 60px;

}

.article-card{

padding:24px;

border-radius:22px;

}

.article-title{

font-size:38px;

line-height:1.35;

}

.article-description{

font-size:17px;

line-height:2.1;

}

.hero-box{

padding:26px;

}

.hero-content h2{

font-size:32px;

}

.hero-content p{

font-size:17px;

}

.content-heading{

font-size:30px;

line-height:1.5;

padding-left:16px;

}

.content-heading::before{

height:34px;

}

.content-text{

font-size:17px;

line-height:2.15;

}

.custom-list li{

font-size:16px;

line-height:2;

}

.hero-btn,
.download-btn{

width:100%;

}

.hero-image{

margin-top:35px;

}

.download-box{

padding:36px 22px;

border-radius:24px;

}

.download-box h2{

font-size:32px;

}

.download-box p{

font-size:17px;

}

.faq-box{

padding:22px;

}

.faq-box h3{

font-size:20px;

}

}

.important-links-grid a{

background:#fff;

padding:20px;

border-radius:18px;

border:1px solid #e2e8f0;

display:flex;

align-items:center;

gap:12px;

font-weight:700;

text-decoration:none;

color:#0f172a;

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

transition:.3s;

}

.important-links-grid a:hover{

transform:translateY(-5px);

color:#2563eb;

}


.author-meta{

display:flex;

gap:20px;

flex-wrap:wrap;

margin-top:12px;

font-size:14px;

color:#64748b;

font-weight:600;

}

.author-meta span{

display:flex;

align-items:center;

gap:8px;

}