/* =========================================================
   TheDalWeb ULTRA PRO CSS v7.0
========================================================= */

/* RESET */

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

html{
scroll-behavior:smooth;
-webkit-font-smoothing:antialiased;
}

body{
font-family:'Noto Sans Tamil',sans-serif;
background:#f8fafc;
color:#0f172a;
line-height:1.8;
overflow-x:hidden;
text-rendering:optimizeLegibility;
}

/* ROOT */

:root{

--tdw-primary:#2563eb;
--tdw-secondary:#7c3aed;
--tdw-danger:#dc2626;
--tdw-success:#10b981;
--tdw-dark:#020617;
--tdw-card:#ffffff;
--tdw-muted:#64748b;
--tdw-border:#e2e8f0;
--tdw-radius:28px;

}

/* DARK */

.dark body{
background:#020617;
color:#f8fafc;
}

.dark{
color-scheme:dark;
}

/* GLOBAL */

img{
max-width:100%;
height:auto;
display:block;
object-fit:cover;
}

a{
text-decoration:none;
color:inherit;
transition:.3s ease;
}

button{
border:none;
outline:none;
cursor:pointer;
font-family:inherit;
}

::selection{
background:#2563eb;
color:#fff;
}

/* SCROLLBAR */

::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-track{
background:#e2e8f0;
}

::-webkit-scrollbar-thumb{
background:#2563eb;
border-radius:999px;
}

/* CONTAINER */

.container{
width:100%;
max-width:1320px;
margin:auto;
padding-inline:16px;
}

/* =========================================================
HEADER
========================================================= */

header{
position:sticky;
top:0;
z-index:9999;
backdrop-filter:blur(16px);
background:rgba(255,255,255,.82);
border-bottom:1px solid rgba(0,0,0,.06);
}

.dark header{
background:rgba(2,6,23,.88);
border-color:rgba(255,255,255,.06);
}

.header-logo{
font-size:32px;
font-weight:900;
letter-spacing:-1px;
color:#2563eb;
}

/* NAV */

nav ul{
display:flex;
align-items:center;
gap:24px;
list-style:none;
}

nav a{
font-size:15px;
font-weight:800;
position:relative;
}

nav a::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0;
height:2px;
background:#2563eb;
transition:.3s;
}

nav a:hover::after{
width:100%;
}

/* =========================================================
BREAKING NEWS
========================================================= */

.breaking-bar{
background:#dc2626;
color:#fff;
padding:12px 18px;
display:flex;
align-items:center;
gap:15px;
overflow:hidden;
font-size:14px;
font-weight:800;
}

.breaking-wrap{
overflow:hidden;
white-space:nowrap;
flex:1;
}

.breaking-text{
display:inline-block;
padding-left:100%;
animation:tdwTicker 100s linear infinite;
}

@keyframes tdwTicker{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-100%);
}

}

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

.hero-container{
position:relative;
overflow:hidden;
border-radius:36px;
background:#000;
min-height:600px;
box-shadow:
0 30px 60px rgba(0,0,0,.15);
}

.hero-slide{
position:absolute;
inset:0;
opacity:0;
visibility:hidden;
transition:
opacity .8s ease,
transform .8s ease;
}

.hero-slide.active{
opacity:1;
visibility:visible;
z-index:20;
}

.hero-slide img{
width:100%;
height:100%;
object-fit:cover;
transform:scale(1);
transition:transform 8s ease;
}

.hero-slide.active img{
transform:scale(1.06);
}

.hero-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
to top,
rgba(0,0,0,.96),
rgba(0,0,0,.35),
transparent
);
}

.hero-content{
position:absolute;
left:0;
bottom:0;
padding:40px;
width:100%;
z-index:50;
}

.hero-title{
font-size:
clamp(36px,5vw,68px);
font-weight:900;
line-height:1.1;
letter-spacing:-1.5px;
color:#fff;
max-width:900px;
}

.hero-meta{
display:flex;
flex-wrap:wrap;
gap:18px;
margin-top:20px;
color:#cbd5e1;
font-size:13px;
font-weight:800;
}

/* DOTS */

.hero-dots{
position:absolute;
bottom:24px;
right:24px;
display:flex;
gap:10px;
z-index:100;
}

.hero-dot{
width:12px;
height:12px;
border-radius:999px;
background:rgba(255,255,255,.35);
cursor:pointer;
transition:.3s;
}

.hero-dot.active{
width:34px;
background:#fff;
}

/* =========================================================
CARD UI
========================================================= */

.card,
.tdw-card,
.tdw-search-card{
background:#fff;
border-radius:28px;
overflow:hidden;
border:1px solid #eef2ff;
box-shadow:
0 10px 30px rgba(0,0,0,.05);
transition:.35s ease;
position:relative;
}

.dark .card,
.dark .tdw-card,
.dark .tdw-search-card{
background:#0f172a;
border-color:#1e293b;
}

.card:hover,
.tdw-card:hover,
.tdw-search-card:hover{
transform:translateY(-6px);
box-shadow:
0 20px 50px rgba(0,0,0,.12);
}

/* IMAGE */

.tdw-thumb{
overflow:hidden;
height:240px;
}

.tdw-thumb img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .7s ease;
}

.card:hover img,
.tdw-card:hover img{
transform:scale(1.06);
}

/* CONTENT */

.tdw-card-content{
padding:22px;
}

.tdw-card-title{
font-size:22px;
font-weight:900;
line-height:1.45;
margin-bottom:14px;
}

.tdw-card-excerpt{
font-size:15px;
line-height:1.85;
color:#64748b;
}

.dark .tdw-card-excerpt{
color:#cbd5e1;
}

.tdw-card-meta{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:18px;
font-size:12px;
font-weight:800;
color:#94a3b8;
}

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

.page-content{
background:#fff;
padding:42px;
border-radius:32px;
box-shadow:
0 10px 30px rgba(0,0,0,.05);
}

.dark .page-content{
background:#0f172a;
}

.page-content p{
font-size:19px;
line-height:2;
margin-bottom:28px;
color:#1e293b;
}

.dark .page-content p{
color:#e2e8f0;
}

.page-content h2{
font-size:38px;
font-weight:900;
line-height:1.3;
margin-top:60px;
margin-bottom:22px;
padding-left:18px;
position:relative;
}

.page-content h2::before{
content:"";
position:absolute;
left:0;
top:6px;
width:6px;
height:82%;
border-radius:999px;
background:
linear-gradient(
to bottom,
#2563eb,
#7c3aed
);
}

.page-content h3{
font-size:30px;
font-weight:800;
margin-top:42px;
margin-bottom:18px;
}

.page-content ul,
.page-content ol{
padding-left:24px;
margin-bottom:28px;
}

.page-content li{
margin-bottom:12px;
line-height:1.9;
}

.page-content img{
width:100%;
border-radius:24px;
margin:36px 0;
box-shadow:
0 14px 40px rgba(0,0,0,.08);
}

.page-content blockquote{
background:#eff6ff;
border-left:5px solid #2563eb;
padding:22px;
border-radius:18px;
margin:32px 0;
font-size:18px;
font-style:italic;
}

.dark .page-content blockquote{
background:#020617;
}

/* =========================================================
SIDEBAR
========================================================= */

.tdw-sidebar-card{
background:#fff;
padding:24px;
border-radius:28px;
box-shadow:
0 10px 30px rgba(0,0,0,.05);
border:1px solid #eef2ff;
}

.dark .tdw-sidebar-card{
background:#0f172a;
border-color:#1e293b;
}

.tdw-sidebar-title{
font-size:24px;
font-weight:900;
margin-bottom:22px;
}

.tdw-sidebar-list{
list-style:none;
}

.tdw-sidebar-list li{
padding-bottom:14px;
margin-bottom:14px;
border-bottom:1px dashed #cbd5e1;
}

.dark .tdw-sidebar-list li{
border-color:#334155;
}

.tdw-sidebar-list a{
font-weight:800;
line-height:1.7;
}

.tdw-sidebar-list a:hover{
color:#2563eb;
}

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

.tdw-search-img{
width:100%;
height:240px;
object-fit:cover;
}

.tdw-search-content{
padding:22px;
}

.tdw-search-title{
font-size:24px;
font-weight:900;
line-height:1.5;
margin-bottom:12px;
}

.tdw-search-excerpt{
font-size:15px;
line-height:1.9;
color:#64748b;
}

.dark .tdw-search-excerpt{
color:#cbd5e1;
}

/* =========================================================
BUTTONS
========================================================= */

.btn,
button{
transition:.3s ease;
}

.btn-primary{
background:#2563eb;
color:#fff;
padding:14px 28px;
border-radius:14px;
font-weight:800;
}

.btn-primary:hover{
background:#1d4ed8;
transform:translateY(-2px);
}

/* =========================================================
PAGINATION
========================================================= */

.pagination,
.tdw-pagination{
display:flex;
justify-content:center;
gap:10px;
margin-top:50px;
flex-wrap:wrap;
}

.pagination a,
.pagination span,
.tdw-pagination .page-numbers{
min-width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
padding-inline:16px;
border-radius:14px;
background:#fff;
font-weight:900;
box-shadow:
0 4px 10px rgba(0,0,0,.04);
}

.dark .pagination a,
.dark .pagination span{
background:#0f172a;
}

.pagination .current,
.tdw-pagination .current{
background:#2563eb;
color:#fff;
}

/* =========================================================
FOOTER
========================================================= */

footer{
background:#020617;
color:#fff;
margin-top:80px;
padding-top:60px;
}

.footer-title{
font-size:22px;
font-weight:900;
margin-bottom:20px;
}

footer a:hover{
color:#60a5fa;
}

/* =========================================================
SOCIAL
========================================================= */

.tdw-social-btn{
display:flex;
align-items:center;
justify-content:center;
padding:15px;
border-radius:18px;
font-weight:900;
color:#fff;
transition:.3s;
}

.facebook{
background:#1877f2;
}

.youtube{
background:#ff0000;
}

.telegram{
background:#229ED9;
}

.whatsapp{
background:#25D366;
}

.tdw-social-btn:hover{
transform:translateY(-3px);
opacity:.92;
}

/* =========================================================
ANIMATION
========================================================= */

.fade-init{
opacity:0;
transform:translateY(25px);
transition:
opacity .7s ease,
transform .7s ease;
}

.fade-init.show{
opacity:1;
transform:translateY(0);
}

/* =========================================================
LOADER
========================================================= */

.tdw-loader{
width:42px;
height:42px;
border:4px solid #dbeafe;
border-top-color:#2563eb;
border-radius:50%;
animation:spin 1s linear infinite;
}

@keyframes spin{
to{
transform:rotate(360deg);
}
}

/* =========================================================
BACK TO TOP
========================================================= */

#backToTop{
position:fixed;
right:20px;
bottom:20px;
width:52px;
height:52px;
display:none;
align-items:center;
justify-content:center;
border-radius:50%;
background:#2563eb;
color:#fff;
font-size:20px;
z-index:999;
box-shadow:
0 10px 30px rgba(0,0,0,.2);
}

/* =========================================================
READING PROGRESS
========================================================= */

#readingProgress,
#scrollProgress{
position:fixed;
top:0;
left:0;
height:3px;
width:0;
background:
linear-gradient(
to right,
#2563eb,
#7c3aed
);
z-index:99999;
}

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

@media(max-width:768px){

.container{
padding-inline:12px;
}

/* HERO */

.hero-container{
min-height:360px;
border-radius:24px;
}

.hero-content{
padding:24px;
}

.hero-title{
font-size:32px;
line-height:1.2;
}

.hero-meta{
gap:10px;
font-size:12px;
}

/* CONTENT */

.page-content{
padding:24px;
border-radius:24px;
}

.page-content p{
font-size:17px;
line-height:1.95;
}

.page-content h2{
font-size:30px;
}

.page-content h3{
font-size:24px;
}

/* SEARCH */

.tdw-search-img{
height:190px;
}

/* NAV */

nav ul{
gap:12px;
overflow-x:auto;
}

/* GRID */

.grid{
gap:18px;
}

}

/* =========================================================
EXTRA SMALL
========================================================= */

@media(max-width:480px){

.hero-title{
font-size:28px;
}

.page-content{
padding:18px;
}

.page-content p{
font-size:16px;
}

}

/* =========================================================
PRINT
========================================================= */

@media print{

header,
footer,
.sidebar,
.adsbygoogle{
display:none !important;
}

body{
background:#fff;
color:#000;
}

.page-content{
padding:0;
box-shadow:none;
}

}
/* =========================================================
ULTRA PREMIUM FOOTER
========================================================= */

#site-footer{

background:
linear-gradient(
180deg,
#f8fafc 0%,
#eef2ff 100%
);

border-top:
1px solid rgba(0,0,0,.06);

position:relative;

overflow:hidden;

}

/* DARK */

.dark #site-footer{

background:
linear-gradient(
180deg,
#030712 0%,
#111827 100%
);

}

/* FOOTER TITLE */

.footer-title{

font-size:20px;
font-weight:900;

margin-bottom:22px;

color:#111827;

}

.dark .footer-title{
color:#fff;
}

/* LINKS */

.footer-links{

display:flex;
flex-direction:column;

gap:14px;

}

.footer-links a{

font-size:15px;

font-weight:600;

color:#4b5563;

transition:all .25s ease;

}

.dark .footer-links a{
color:#d1d5db;
}

.footer-links a:hover{

color:#2563eb;

padding-left:4px;

}

/* LOGO */

.custom-logo{

max-height:78px;
width:auto;

object-fit:contain;

}

/* ABOUT TEXT */

#site-footer p{

line-height:1.9;

}

/* SOCIAL */

#site-footer .social-icons a{

width:44px;
height:44px;

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

border-radius:999px;

background:#fff;

box-shadow:
0 4px 14px rgba(0,0,0,.08);

transition:all .3s ease;

font-size:20px;

}

.dark #site-footer .social-icons a{

background:#1f2937;

}

#site-footer .social-icons a:hover{

transform:
translateY(-3px);

background:#2563eb;

color:#fff;

}

/* NEWSLETTER */

#newsletterEmail{

height:54px;

font-size:15px;

}

#newsletterForm button{

height:54px;

font-size:15px;

font-weight:800;

}

/* FOOTER BOTTOM */

.footer-bottom{

background:#1d4ed8;

padding:22px 0;

margin-top:50px;

}

.footer-bottom a{

font-weight:700;

transition:.3s;

}

.footer-bottom a:hover{

opacity:.8;

}

/* MOBILE */

@media(max-width:768px){

#site-footer{

text-align:center;

}

.footer-links{

align-items:center;

}

#site-footer .social-icons{

justify-content:center;

}

}
/* =========================================================
FINAL ULTRA HERO TITLE
========================================================= */

.hero-title{

display:inline-block;

max-width:92%;

font-size:clamp(26px,4vw,52px);

font-weight:900;

line-height:1.12;

letter-spacing:-1px;

color:#fff;

padding:10px 18px;

border-radius:24px;

background:
linear-gradient(
135deg,
rgba(0,0,0,.78),
rgba(0,0,0,.48)
);

backdrop-filter:blur(8px);

box-shadow:
0 10px 30px rgba(0,0,0,.28);

animation:
heroTitleFade .7s ease;

}

/* ANIMATION */

@keyframes heroTitleFade{

from{

opacity:0;
transform:
translateY(25px);

}

to{

opacity:1;
transform:
translateY(0);

}

}

/* HERO META */

.hero-meta{

display:flex;
flex-wrap:wrap;

gap:14px;

margin-top:18px;

font-size:13px;

font-weight:800;

color:#f1f5f9;

text-shadow:
0 2px 10px rgba(0,0,0,.45);

}

/* MOBILE */

@media(max-width:768px){

.hero-title{

max-width:100%;

font-size:clamp(20px,6vw,34px);

line-height:1.18;

padding:8px 14px;

border-radius:18px;

}

.hero-meta{

font-size:12px;
gap:10px;

}

}

/* SMALL MOBILE */

@media(max-width:480px){

.hero-title{

font-size:26px;

padding:8px 12px;

}

}