/*
Theme Name: Daily Time Khabar 2026
Theme URI: https://dailytimekhabar.com/
Author: Daily Time Khabar Team 2026 New
Author URI: https://dailytimekhabar.com/
Description: A premium, editorial-style WordPress theme for multi-category information & blogging sites (Tech, Gadgets, Mobile, Cars, Bikes, Nature, Entertainment) with a dedicated Rail Seva railway-services portal. Fully non-political by design.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: dtk
*/
:root{
--ink:#0A0F1C;
--surface:#111A2C;
--surface-2:#16213A;
--hairline:rgba(232,163,61,0.14);
--off-white:#F4F5F9;
--paper:#FBFAF7;
--slate:#8B93A7;
--slate-dim:#5C6478;
--gold:#ed1d26;
--gold-dim:#ed2029;
--rail-teal:#14A394;
--rail-teal-dark:#0B4F49;
--rail-teal-deep:#082E2B;
--danger:#D9614B;
--font-body:'Inter', sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
background:var(--off-white);
color:var(--ink);
font-family:var(--font-body);
-webkit-font-smoothing:antialiased;
}
::selection{background:var(--gold);color:var(--ink);}
@media (prefers-reduced-motion: reduce){
*{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}
a{text-decoration:none;color:inherit;}
h1,h2,h3,h4,.font-display{ letter-spacing:-0.01em;}
.eyebrow{
font-size:0.72rem;
letter-spacing:0.16em;
text-transform:uppercase;
color:var(--gold-dim);
font-weight:600;
}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
/* ============ HEADER ============ */
.site-header{ position:sticky; top:0; z-index:1000; }
/* ---- Top utility bar: follows the same light/dark mode as the header + footer ---- */
.top-bar{
background:rgba(251,250,247,0.96);
color:var(--ink);
border-bottom:1px solid rgba(10,15,28,0.10);
padding:.5rem 0;
}
.top-bar .datetime{
font-size:0.74rem;letter-spacing:.02em;color:rgba(10,15,28,0.68);
display:flex;align-items:center;gap:.35rem;
}
.top-bar .dt-sep{color:var(--gold-dim);}
.social-mini{display:flex;align-items:center;gap:.4rem;}
/* ---- Secondary header: premium scrolling news ticker ---- */
.header-extra-bar{
background:#fff;
color:var(--ink);
border-bottom:1px solid rgba(10,15,28,0.12);
padding:0;
overflow:hidden;
}
.ticker-inner{
display:flex;
align-items:stretch;
min-height:54px;
}
.ticker-label{
position:relative;
z-index:3;
flex:0 0 auto;
display:flex;
align-items:center;
gap:.65rem;
min-width:152px;
padding:0 1.25rem;
background:var(--ink);
color:#fff;
font-size:.82rem;
font-weight:800;
letter-spacing:-.01em;
box-shadow:8px 0 18px rgba(10,15,28,.08);
}
.ticker-label-dot{
width:7px;height:7px;border-radius:50%;
background:#e3342f;
box-shadow:0 0 0 4px rgba(227,52,47,.13);
flex:0 0 auto;
}
.ticker-viewport{
min-width:0;
flex:1 1 auto;
display:flex;
align-items:center;
overflow:hidden;
position:relative;
background:linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.98) 75%,rgba(255,255,255,.78) 100%);
}
.ticker-viewport::before,.ticker-viewport::after{
content:"";position:absolute;top:0;bottom:0;width:34px;z-index:2;pointer-events:none;
}
.ticker-viewport::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0));}
.ticker-viewport::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0));}
.ticker-track{
display:flex;
width:max-content;
min-width:max-content;
animation:ticker-scroll var(--ticker-duration,28s) linear infinite;
will-change:transform;
}
.ticker-set{display:flex;align-items:center;flex-shrink:0;}
.ticker-item{
display:inline-flex;align-items:center;
white-space:nowrap;
padding:0 1.05rem;
font-size:.95rem;
font-weight:700;
color:#30343b;
}
.ticker-item-link{
text-decoration:none;
cursor:pointer;
transition:color .2s ease, opacity .2s ease;
}
.ticker-item-link:hover{color:#b42318;opacity:.9;text-decoration:none;}
.ticker-arrow{
color:#c62828;
font-family:Arial,sans-serif;
font-size:1.12rem;
font-weight:900;
line-height:1;
}
.ticker-track:hover{animation-play-state:paused;}
@keyframes ticker-scroll{
from{transform:translateX(0);}
to{transform:translateX(-50%);}
}
html.dark-mode .header-extra-bar{
background:#151923;
color:#f4f5f9;
border-bottom-color:rgba(255,255,255,.08);
}
html.dark-mode .ticker-viewport{
background:linear-gradient(90deg,#151923 0%,#151923 75%,rgba(21,25,35,.78) 100%);
}
html.dark-mode .ticker-viewport::before{background:linear-gradient(90deg,#151923,rgba(21,25,35,0));}
html.dark-mode .ticker-viewport::after{background:linear-gradient(270deg,#151923,rgba(21,25,35,0));}
html.dark-mode .ticker-item{color:#f4f5f9;}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none;transform:none;}}
.social-mini-btn{
width:26px;height:26px;border-radius:5px;
background:rgba(10,15,28,0.06);border:1px solid rgba(10,15,28,0.12);
display:flex;align-items:center;justify-content:center;
color:rgba(10,15,28,0.78);font-size:0.76rem;transition:.2s ease;
}
.social-mini-btn:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);}
/* ---- Main nav row: light, premium editorial feel ---- */
.main-nav-row{
background:rgba(251,250,247,0.92);
backdrop-filter:blur(14px) saturate(160%);
-webkit-backdrop-filter:blur(14px) saturate(160%);
border-bottom:1px solid rgba(10,15,28,0.08);
transition:background .3s ease;
}
.brand{
font-weight:700;
font-size:1.5rem;
color:var(--ink);
display:flex;align-items:center;gap:.55rem;
letter-spacing:-0.02em;
}
.brand .brand-mark{
width:34px;height:34px;border-radius:9px;
background:linear-gradient(145deg,var(--gold) 0%, #c97a1f 100%);
display:flex;align-items:center;justify-content:center;
color:var(--ink);font-weight:800;font-size:1.05rem;
flex-shrink:0;
}
.brand small{
display:block; font-size:0.58rem;
letter-spacing:.14em;color:var(--slate-dim);font-weight:500;text-transform:uppercase;margin-top:1px;
}
/* Custom logo (Appearance → Customize → Site Identity): render as-is,
without nesting a second inside .brand's own . */
.custom-logo-wrap{display:inline-flex;align-items:center;}
.custom-logo-wrap img{max-height:var(--logo-height, 44px);width:auto;display:block;}
.custom-logo-wrap .custom-logo-link{display:contents;}
.custom-logo-wrap .site-logo-dark{display:none;}
html.dark-mode .custom-logo-wrap .site-logo-light{display:none;}
html.dark-mode .custom-logo-wrap .site-logo-dark{display:block;}
@media (max-width:991px){
.custom-logo-wrap img{max-height:var(--logo-height-mobile, 34px);}
.ticker-inner{min-height:46px;}
.ticker-label{min-width:118px;padding:0 .85rem;font-size:.72rem;}
.ticker-item{font-size:.78rem;padding:0 .75rem;}
.ticker-arrow{font-size:.95rem;}
.footer-logo{max-height:48px;max-width:210px;}
}
.nav-link-custom{
font-size:0.86rem;font-weight:600;color:rgba(10,15,28,0.72);
padding:.5rem .85rem !important;position:relative;transition:color .2s ease;
}
.nav-link-custom:hover{color:var(--ink);}
.nav-link-custom::after{
content:'';position:absolute;left:.85rem;right:.85rem;bottom:.25rem;height:1px;
background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.nav-link-custom:hover::after{transform:scaleX(1);}
.btn-railseva {
font-size: 0.76rem; font-weight: 600; letter-spacing: .03em; color: #ffffff !important;
background: linear-gradient( 141deg, #ed1d26 0%, #000000 100%); padding: .5rem 1.1rem .5rem .9rem;
border-radius: 3px; display: inline-flex; align-items: center;
gap: .4rem;
position: relative; box-shadow: 0 4px 14px rgba(20,163,148,0.35);
transition: transform .2s ease, box-shadow .2s ease;
}
.btn-railseva::before,.btn-railseva::after{
content:'';position:absolute;top:50%;width:9px;height:9px;
background:var(--paper);border-radius:50%;transform:translateY(-50%);
}
.btn-railseva::before{left:-4.5px;}
.btn-railseva::after{right:-4.5px;}
.btn-railseva:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgb(255 156 156 / 50%); color: #ffffff !important; background: var(--gold); }
.icon-btn{
width:38px;height:38px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
color:var(--ink);background:rgba(10,15,28,0.05);
border:1px solid rgba(10,15,28,0.1);
transition:background .2s ease, color .2s ease;
}
.icon-btn:hover{background:rgba(232,163,61,0.16);color:var(--gold-dim);}
.icon-btn[aria-pressed="true"]{background:var(--ink);color:var(--gold);border-color:var(--ink);}
.navbar-toggler{border:0;padding:.25rem;}
.navbar-toggler:focus{box-shadow:none;}
.navbar-toggler .bar{
display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;transition:.25s;
}
/* ============ HERO ============ */
.hero {
background: var(--off-white);
padding: 3.5rem 0 3.5rem;
position: relative;
overflow: hidden;
}
.hero::before{
content:'';position:absolute;top:-20%;right:-10%;width:600px;height:600px;
background:radial-gradient(circle,rgba(232,163,61,0.12) 0%,transparent 70%);
pointer-events:none;
}
.hero-feature{
border-radius:20px;overflow:hidden;position:relative;
background:var(--surface);
height:100%;min-height:460px;
display:flex;flex-direction:column;justify-content:flex-end;
isolation:isolate;
}
.hero-feature img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.hero-feature:hover img{transform:scale(1.045);}
.hero-feature::after{
content:'';position:absolute;inset:0;z-index:-1;
background:linear-gradient(0deg, rgba(6,9,17,0.94) 0%, rgba(6,9,17,0.45) 55%, rgba(6,9,17,0.05) 100%);
}
.hero-feature-body{padding:2rem 2.1rem;}
.badge-cat{
font-size:0.66rem;font-weight:600;letter-spacing:.1em;
text-transform:uppercase;color:var(--off-white);background:var(--gold);
padding:.32rem .65rem;border-radius:3px;display:inline-block;
}
.hero-feature h2{
color:var(--paper);font-size:2.1rem;line-height:1.12;margin:.9rem 0 .6rem;font-weight:600;
}
.hero-feature p{color:rgba(244,245,249,0.68);font-size:0.95rem;margin-bottom:1.1rem;max-width:46ch;}
.read-more{
font-size:0.82rem;font-weight:600;color:var(--gold);display:inline-flex;align-items:center;gap:.4rem;
}
.read-more i{transition:transform .2s ease;}
.hero-feature:hover .read-more i, a:hover .read-more i{transform:translateX(4px);}
.side-story{
display:flex;gap:.9rem;padding:.9rem;border-radius:14px;
background:var(--surface);transition:background .2s ease;
height:100%;
}
.side-story:hover{background: #383c44;}
.side-story img{
width:92px;height:92px;object-fit:cover;border-radius:10px;flex-shrink:0;
}
.side-story .eyebrow {
font-size: 0.62rem;
color: #ed9fa3;
}
.side-story h3{
color:var(--paper);font-size:0.94rem;font-weight:600;line-height:1.3;margin:.3rem 0 0;font-family:var(--font-body);
}
.side-story-meta{ font-size:0.66rem;color:var(--paper);margin-top:.4rem;}
/* ============ SECTIONS GENERAL ============ */
.section{padding:4.5rem 0;}
.section-alt{background:var(--paper);}
.section-head{
display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2.2rem;flex-wrap:wrap;gap:1rem;
}
.section-head span.eyebrow { color: var(--gold-dim); font-size: 16px; }
.section-title{font-size:1.9rem;font-weight:600;margin:.3rem 0 .4rem;}
.section-desc{color:var(--slate-dim);font-size:0.93rem;max-width:52ch;}
.view-all{ font-size:0.76rem;font-weight:600;letter-spacing:.04em;
border:1px solid rgba(10,15,28,0.16);border-radius:30px;padding:.55rem 1.15rem;
display:inline-flex;align-items:center;gap:.4rem;transition:all .2s ease;white-space:nowrap;
}
.view-all:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
/* article cards (Technology) */
.article-card{
background:#fff;border-radius:16px;overflow:hidden;height:100%;
box-shadow:0 1px 3px rgba(10,15,28,0.06);border:1px solid rgba(10,15,28,0.06);
transition:transform .25s ease, box-shadow .25s ease;
}
.article-card:hover{transform:translateY(-5px);box-shadow:0 18px 34px rgba(10,15,28,0.12);}
.article-card .img-wrap{height:190px;overflow:hidden;}
.article-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.article-card:hover img{transform:scale(1.08);}
.article-card .body{padding:1.15rem 1.25rem 1.3rem;}
.article-card h3{font-size:1.05rem;font-weight:600;line-height:1.35;margin:.5rem 0 .5rem;font-family:var(--font-body);}
.article-card p{font-size:0.85rem;color:var(--slate-dim);margin-bottom:.7rem;}
.card-meta{
display:flex;gap:.8rem; font-size:0.68rem;color:var(--slate);
border-top:1px solid rgba(10,15,28,0.06);padding-top:.65rem;
}
.badge-soft{ font-size:0.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
color:var(--gold-dim);background:rgba(232,163,61,0.12);padding:.28rem .55rem;border-radius:3px;
}
.badge-soft { background: #ed202914; margin-bottom: 12px; display: inline-block; color: var(--gold-dim); }
.gadget-row .gadget-title {
line-height: 1.5;
}
/* Gadgets — horizontal review rows */
.gadget-row{
display:flex;gap:1.3rem;background:#fff;border-radius:16px;padding:1.1rem;
border:1px solid rgba(10,15,28,0.06);align-items:center;height:100%;
transition:box-shadow .25s ease, transform .25s ease;
}
.gadget-row:hover{box-shadow:0 14px 28px rgba(10,15,28,0.1);transform:translateY(-3px);}
.gadget-row img{width:96px;height:96px;object-fit:cover;border-radius:12px;flex-shrink:0;background:#eee;}
.gadget-rating{
font-size:0.78rem;font-weight:600;color:var(--ink);
display:flex;align-items:center;gap:.3rem;margin-top:.4rem;
}
.gadget-rating i{color:var(--gold);font-size:.75rem;}
/* Mobile — comparison style */
.mobile-card{
background:var(--ink);border-radius:18px;padding:1.6rem;color:var(--paper);height:100%;
position:relative;overflow:hidden;
}
.mobile-card::before{
content:'';position:absolute;top:-40%;right:-30%;width:260px;height:260px;
background:radial-gradient(circle,rgba(232,163,61,0.14),transparent 70%);
}
.mobile-card img{width:100%;height:170px;object-fit:cover;border-radius:12px;margin-bottom:1rem;}
.mobile-card h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: .5rem; font-family: var(--font-body); line-height: 1.5; }
.spec-chip{
font-size:0.66rem;color:rgba(244,245,249,0.75);
background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.08);
padding:.28rem .6rem;border-radius:20px;display:inline-block;margin:0 .3rem .3rem 0;
}
/* Cars — horizontal scroll cards */
section#cars {
background: var(--off-white);
}
.scroll-row{display:flex;gap:1.3rem;overflow-x:auto;padding-bottom:1rem;scroll-snap-type:x mandatory;}
.scroll-row::-webkit-scrollbar{height:6px;}
.scroll-row::-webkit-scrollbar-thumb{background:rgba(10,15,28,0.15);border-radius:10px;}
.car-card{
flex:0 0 340px;scroll-snap-align:start;border-radius:18px;overflow:hidden;
background:#fff;border:1px solid rgba(10,15,28,0.06);
}
.car-card .img-wrap{height:210px;overflow:hidden;}
.car-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.car-card:hover img{transform:scale(1.06);}
.car-card .body{padding:1.2rem 1.3rem;}
.car-card h3{font-size:1.15rem;font-weight:600;margin:.4rem 0;}
.price-tag{ font-weight:600;color:var(--gold-dim);font-size:0.9rem;}
/* Bikes — alternating rows */
.bike-row{display:flex;align-items:center;gap:0;border-radius:18px;overflow:hidden;background:#fff;border:1px solid rgba(10,15,28,0.06);margin-bottom:1.3rem;}
.bike-row .img-wrap{flex:0 0 40%;height:230px;overflow:hidden;}
.bike-row img{width:100%;height:100%;object-fit:cover;}
.bike-row .body{padding:1.6rem 2rem;flex:1;}
.bike-row:nth-child(even){flex-direction:row-reverse;}
.bike-row h3{font-size:1.3rem;font-weight:600;margin:.5rem 0 .6rem;}
.bike-row p{color:var(--slate-dim);font-size:0.92rem;max-width:52ch;}
/* Nature — immersive masonry */
.nature-section{background:var(--ink);color:var(--paper);}
.nature-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:130px;gap:.8rem;}
.nature-tile{position:relative;border-radius:14px;overflow:hidden;isolation:isolate;}
.nature-tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.nature-tile:hover img{transform:scale(1.08);}
.nature-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,9,17,.85),transparent 60%);}
.nature-tile .cap{position:absolute;left:.9rem;bottom:.7rem;z-index:2;}
.nature-tile .cap h4{font-size:0.9rem;font-weight:600;font-family:var(--font-body);margin:0;}
.nature-tile .cap span{ font-size:0.62rem;color: #ed9fa3;}
.nature-tile.big{grid-column:span 2;grid-row:span 2;}
.nature-tile.tall{grid-row:span 2;}
/* Entertainment — poster row */
.poster-card{border-radius:14px;overflow:hidden;position:relative;height:280px;isolation:isolate;flex:0 0 190px;}
.poster-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.poster-card:hover img{transform:scale(1.08);}
.poster-card::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,9,17,.92),transparent 55%);}
.poster-card .cap{position:absolute;left:.85rem;bottom:.8rem;right:.85rem;z-index:2;color:#fff;}
.poster-card .cap h4{font-size:0.88rem;font-weight:600;margin:.3rem 0 0;font-family:var(--font-body);line-height:1.25;}
/* ============ RAIL SEVA ============ */
.railseva-section{
background:linear-gradient(160deg, var(--rail-teal-deep) 0%, var(--rail-teal-dark) 55%, #0c5c53 100%);
position:relative;overflow:hidden;padding:5rem 0;
}
.railseva-section::before{
content:'';position:absolute;inset:0;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
background-size:34px 34px;
mask-image:radial-gradient(circle at 30% 20%, black, transparent 75%);
}
.rail-badge{
font-size:0.7rem;letter-spacing:.14em;text-transform:uppercase;
color:#8fe0d4;display:inline-flex;align-items:center;gap:.5rem;font-weight:600;
}
.rail-badge .dot{width:7px;height:7px;border-radius:50%;background:#5EE6C7;box-shadow:0 0 8px #5EE6C7;animation:pulse 1.8s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.railseva-title{color:#fff;font-size:2.3rem;font-weight:600;margin:.7rem 0 .8rem;}
.railseva-section p.lead-text { color: rgba(255,255,255,0.7); max-width: 56ch; font-size: 0.98rem; margin-left: auto; margin-right: auto; }
.board-panel{
background:rgba(6,20,18,0.55);
border:1px solid rgba(94,230,199,0.18);
border-radius:18px;padding:1.6rem;backdrop-filter:blur(6px);
}
.board-panel .board-title{
color:#8fe0d4;font-size:0.72rem;letter-spacing:.12em;
text-transform:uppercase;margin-bottom:1rem;display:flex;justify-content:space-between;
}
.service-tile{
background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);
border-radius:12px;padding:1rem .9rem;text-align:left;height:100%;
transition:all .2s ease;
}
.service-tile:hover{background:rgba(94,230,199,0.1);border-color:rgba(94,230,199,0.4);transform:translateY(-3px);}
.service-tile i{font-size:1.3rem;color:#5EE6C7;margin-bottom:.6rem;display:block;}
.service-tile span{font-size:0.82rem;font-weight:600;color:#fff;line-height:1.3;display:block;}
.service-tile small{ font-size:0.62rem;color:rgba(255,255,255,0.45);}
.ticket-cta{
display:inline-flex;align-items:center;gap:.7rem;
background:#fff;color:var(--rail-teal-deep);font-weight:700;
padding:.95rem 1.7rem;border-radius:4px;font-size:0.95rem;
position:relative;box-shadow:0 10px 26px rgba(0,0,0,0.25);
transition:transform .2s ease;
}
.ticket-cta:hover{transform:translateY(-2px);color:var(--rail-teal-deep);}
.ticket-cta::before,.ticket-cta::after{
content:'';position:absolute;top:50%;width:16px;height:16px;background:var(--rail-teal-dark);
border-radius:50%;transform:translateY(-50%);
}
.ticket-cta::before{left:-8px;}
.ticket-cta::after{right:-8px;}
/* ============ LATEST STORIES ============ */
.latest-item{display:flex;gap:1.1rem;padding:1rem 0;border-bottom:1px solid rgba(10,15,28,0.08);}
.latest-item img{width:120px;height:88px;object-fit:cover;border-radius:10px;flex-shrink:0;}
.latest-item h3{font-size:1rem;font-weight:600;margin:.25rem 0 .35rem;}
.latest-item p{font-size:0.83rem;color:var(--slate-dim);margin-bottom:.4rem;}
/* ============ TRENDING ============ */
.trending-item{
display:flex;align-items:center;gap:1.2rem;padding:1.1rem 0;border-bottom:1px solid rgba(255,255,255,0.08);
}
.trending-num {
font-size: 1.7rem;
font-weight: 600;
color: rgba(255, 255, 255, .5);
min-width: 34px;
}
.trending-item span.eyebrow { font-size: .6rem; color: #ed9fa3; margin-bottom: 6px; display: inline-block; }
.trending-item img{width:64px;height:64px;object-fit:cover;border-radius:10px;margin-left:auto;flex-shrink:0;}
.trending-item h3 { color: var(--paper); font-size: 1rem; font-weight: 600; margin: 0 0 .3rem; font-family: var(--font-body); line-height: 1.5; }
/* ============ SEARCH OVERLAY ============ */
.search-overlay{
position:fixed;inset:0;background:rgba(6,9,17,0.92);backdrop-filter:blur(8px);
z-index:2000;display:none;align-items:flex-start;justify-content:center;padding-top:9vh;
}
.search-overlay.show{display:flex;}
.search-box{width:100%;max-width:640px;padding:0 1rem;}
.search-input-wrap{
display:flex;align-items:center;gap:.8rem;border-bottom:2px solid var(--gold);padding-bottom:.8rem;
}
.search-input-wrap input{
background:transparent;border:0;outline:0;color:#fff;font-size:1.4rem; width:100%;
}
.search-input-wrap input::placeholder{color:rgba(255,255,255,0.35);}
.search-close{color:#fff;font-size:1.4rem;cursor:pointer;}
.search-suggest{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.6rem;}
.search-chip{
font-size:0.78rem;color:rgba(255,255,255,0.75);
border:1px solid rgba(255,255,255,0.16);padding:.45rem .9rem;border-radius:20px;cursor:pointer;transition:.2s;
}
.search-chip:hover{border-color:var(--gold);color:var(--gold);}
/* ============ FOOTER ============ */
.site-footer{background:var(--paper);color:rgba(10,15,28,0.68);padding:4rem 0 1.5rem;border-top:1px solid rgba(10,15,28,0.10);}
.site-footer h5{color:var(--ink); font-size:0.76rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.1rem;}
.site-footer ul{list-style:none;padding:0;margin:0;}
.site-footer li{margin-bottom:.65rem;font-size:0.87rem;}
.site-footer a:hover{color:var(--gold);}
.footer-logo-link{align-items:center;}
.footer-logo{max-height:56px;width:auto;max-width:240px;display:block;}
.footer-logo-dark{display:none;}
html.dark-mode .footer-logo-light{display:none;}
html.dark-mode .footer-logo-dark{display:block;}
.footer-social{
width:36px;height:36px;border-radius:50%;border:1px solid rgba(10,15,28,0.14);
display:flex;align-items:center;justify-content:center;transition:.2s;
}
.footer-social:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);}
.footer-bottom{border-top:1px solid rgba(10,15,28,0.10);margin-top:2.5rem;padding-top:1.5rem;font-size:0.78rem;}
/* skeleton */
.skeleton{background:linear-gradient(100deg, #eee 30%, #f6f6f6 50%, #eee 70%);background-size:200% 100%;animation:shimmer 1.4s infinite;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
@media (max-width:991px){
.hero-feature{min-height:340px;}
.nature-grid{grid-template-columns:repeat(2,1fr);}
.nature-tile.big{grid-column:span 2;grid-row:span 1;height:220px;}
.bike-row{flex-direction:column !important;}
.bike-row .img-wrap{flex:none;width:100%;height:200px;}
}
@media (max-width:575px){
.hero-feature-body{padding:1.4rem;}
.hero-feature h2{font-size:1.5rem;}
.section{padding:3rem 0;}
}
/* ===== Rail Seva Portal page-specific styles ===== */
/* ============ RAIL SEVA PAGE-SPECIFIC ============ */
.breadcrumb-bar{background:var(--paper);border-bottom:1px solid rgba(10,15,28,0.08);padding:.9rem 0;}
.breadcrumb-bar a{font-size:0.82rem;color:var(--slate-dim);font-weight:500;}
.breadcrumb-bar a:hover{color:var(--gold-dim);}
.breadcrumb-bar .sep{color:var(--slate);margin:0 .5rem;font-size:0.75rem;}
.breadcrumb-bar .current{font-size:0.82rem;color:var(--ink);font-weight:600;}
.rail-hero{
background:linear-gradient(160deg, var(--rail-teal-deep) 0%, var(--rail-teal-dark) 55%, #0c5c53 100%);
position:relative;overflow:hidden;padding:4rem 0 3.5rem;
}
.rail-hero::before{
content:'';position:absolute;inset:0;
background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
background-size:34px 34px;
mask-image:radial-gradient(circle at 25% 15%, black, transparent 75%);
}
.rail-hero-title{color:#fff;font-size:2.6rem;font-weight:600;margin:.7rem 0 .6rem;}
.rail-hero p.lead-text{color:rgba(255,255,255,0.72);max-width:60ch;font-size:1rem;}
.tool-panel{
background:rgba(6,20,18,0.55);border:1px solid rgba(94,230,199,0.18);
border-radius:18px;backdrop-filter:blur(6px);overflow:hidden;margin-top:2rem;
}
.tool-tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,0.1);}
.tool-tab{
font-size:0.76rem;font-weight:600;letter-spacing:.03em;
color:rgba(255,255,255,0.55);padding:1rem 1.3rem;cursor:pointer;border:0;background:transparent;
border-bottom:2px solid transparent;transition:.2s;white-space:nowrap;
}
.tool-tab.active{color:#5EE6C7;border-bottom-color:#5EE6C7;}
.tool-tab:hover{color:#fff;}
.tool-pane{display:none;padding:1.6rem;}
.tool-pane.active{display:block;}
.tool-pane .form-control, .tool-pane .form-select{
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff; font-size:0.88rem;
}
.tool-pane .form-control::placeholder{color:rgba(255,255,255,.4);}
.tool-pane .form-control:focus, .tool-pane .form-select:focus{background:rgba(255,255,255,.09);border-color:#5EE6C7;color:#fff;box-shadow:none;}
.btn-teal-solid{
background:#5EE6C7;color:#062114;font-weight:700;border:0;padding:.6rem 1.4rem;border-radius:6px;
font-size:0.85rem;transition:.2s;
}
.btn-teal-solid:hover{background:#7ff0d6;color:#062114;}
/* Category groups */
.services-section{background:var(--off-white);padding:4rem 0;}
.cat-group{margin-bottom:3.2rem;}
.cat-group:last-child{margin-bottom:0;}
.cat-group-head{display:flex;align-items:baseline;gap:.8rem;margin-bottom:1.5rem;}
.cat-group-head .num{ font-size:0.8rem;color:var(--rail-teal);font-weight:600;}
.cat-group-head h3{font-size:1.35rem;font-weight:600;margin:0;}
.cat-group-head .line{flex:1;height:1px;background:rgba(10,15,28,0.1);}
.service-card-lg{
background:#fff;border-radius:16px;padding:1.5rem;height:100%;
border:1px solid rgba(10,15,28,0.07);box-shadow:0 1px 3px rgba(10,15,28,0.05);
transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
display:flex;flex-direction:column;
}
.service-card-lg:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(10,15,28,0.1);border-color:rgba(20,163,148,0.3);}
.service-card-lg .icon-wrap{
width:48px;height:48px;border-radius:12px;background:rgba(20,163,148,0.1);
display:flex;align-items:center;justify-content:center;margin-bottom:1rem;
}
.service-card-lg .icon-wrap i{font-size:1.35rem;color:var(--rail-teal);}
.service-card-lg h4{font-size:1.05rem;font-weight:600;margin-bottom:.5rem;font-family:var(--font-body);}
.service-card-lg p{font-size:0.85rem;color:var(--slate-dim);margin-bottom:1.1rem;flex:1;}
.service-card-lg .open-link{ font-size:0.75rem;font-weight:600;color:var(--rail-teal-dark);
display:inline-flex;align-items:center;gap:.4rem;
}
.service-card-lg:hover .open-link i{transform:translateX(3px);}
.service-card-lg .open-link i{transition:transform .2s ease;}
/* help strip */
.help-strip{
background:var(--ink);border-radius:20px;padding:2.2rem 2.5rem;
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;
margin-top:1rem;
}
.help-strip h4{color:#fff;font-size:1.2rem;font-weight:600;margin-bottom:.3rem;}
.help-strip p{color:rgba(244,245,249,0.6);font-size:0.88rem;margin:0;}
@media (max-width:575px){
.rail-hero-title{font-size:1.9rem;}
.help-strip{padding:1.6rem;}
}
/* ============================================================
DARK MODE (site-wide reading mode toggle — separate from the
header's own always-dark top bar / always-light main nav row)
Toggled by adding "dark-mode" to . Wired in js/custom.js.
============================================================ */
html.dark-mode body{ background:var(--ink); color:var(--off-white); }
/* Header and footer always share the same active color mode. */
html.dark-mode .top-bar{
background:var(--ink);
color:var(--off-white);
border-bottom-color:rgba(255,255,255,0.06);
}
html.dark-mode .top-bar .datetime{color:rgba(244,245,249,0.68);}
html.dark-mode .social-mini-btn{
background:rgba(255,255,255,0.07);
border-color:rgba(255,255,255,0.08);
color:rgba(244,245,249,0.75);
}
html.dark-mode .site-footer{
background:var(--ink);
color:rgba(244,245,249,0.65);
border-top-color:rgba(255,255,255,0.08);
}
html.dark-mode .site-footer h5{color:var(--paper);}
html.dark-mode .footer-social{border-color:rgba(255,255,255,0.14);}
html.dark-mode .footer-bottom{border-top-color:rgba(255,255,255,0.08);}
html.dark-mode .main-nav-row{
background:rgba(17,26,44,0.92);
border-bottom-color:rgba(255,255,255,0.08);
}
html.dark-mode .brand{ color:var(--paper); }
html.dark-mode .brand small{ color:var(--slate); }
html.dark-mode .nav-link-custom{ color:rgba(244,245,249,0.72); }
html.dark-mode .nav-link-custom:hover{ color:var(--paper); }
html.dark-mode .icon-btn{ color:var(--paper); background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.08); }
html.dark-mode .icon-btn[aria-pressed="true"]{ background:var(--off-white); color:var(--ink); border-color:var(--off-white); }
html.dark-mode .navbar-toggler .bar{ background:var(--paper); }
html.dark-mode .section-alt,
html.dark-mode .services-section{ background:var(--surface); }
html.dark-mode .section-title{ color:var(--off-white); }
html.dark-mode .section-desc{ color:var(--slate); }
html.dark-mode .eyebrow{ color:var(--off-white); }
html.dark-mode .article-card,
html.dark-mode .gadget-row,
html.dark-mode .car-card,
html.dark-mode .bike-row,
html.dark-mode .service-card-lg,
html.dark-mode .latest-item{
background:var(--surface-2); border-color:rgba(255,255,255,0.08); color:var(--off-white);
}
html.dark-mode .article-card h3,
html.dark-mode .gadget-row h3,
html.dark-mode .car-card h3,
html.dark-mode .bike-row h3,
html.dark-mode .service-card-lg h4,
html.dark-mode .latest-item h3{ color:var(--off-white); }
html.dark-mode .article-card p,
html.dark-mode .gadget-row p,
html.dark-mode .car-card p,
html.dark-mode .bike-row p,
html.dark-mode .service-card-lg p,
html.dark-mode .latest-item p{ color:var(--slate); }
html.dark-mode .card-meta{ border-top-color:rgba(255,255,255,0.08); color:var(--slate); }
html.dark-mode .price-tag{ color:var(--gold); }
html.dark-mode .view-all{ border-color:rgba(255,255,255,0.2); color:var(--off-white); }
html.dark-mode .view-all:hover{ background:var(--off-white); color:var(--ink); }
html.dark-mode .breadcrumb-bar{ background:var(--surface); border-bottom-color:rgba(255,255,255,0.08); }
html.dark-mode .breadcrumb-bar a{ color:var(--slate); }
html.dark-mode .breadcrumb-bar .current{ color:var(--off-white); }
html.dark-mode .breadcrumb-bar .sep{ color:var(--slate-dim); }
html.dark-mode .entry-content{ color:var(--off-white) !important; }
/* Sections that are already dark by design (hero, nature, railseva,
top-bar, footer) intentionally receive no override — they already
match the dark-mode palette. */
/* ============================================================
SOCIAL ICON CONTRAST FIX
Keep header + footer social icons clearly visible on hover in
both light and dark modes.
============================================================ */
.social-mini-btn,
.footer-social{
position:relative;
color:#111827;
-webkit-text-decoration:none;
text-decoration:none;
isolation:isolate;
}
.social-mini-btn:hover,
.social-mini-btn:focus-visible,
.footer-social:hover,
.footer-social:focus-visible{
background:#111827 !important;
color:#ffffff !important;
border-color:#111827 !important;
box-shadow:0 0 0 3px rgba(17,24,39,.14), 0 5px 14px rgba(17,24,39,.16);
opacity:1;
}
html.dark-mode .social-mini-btn,
html.dark-mode .footer-social{
color:#f8fafc;
}
html.dark-mode .social-mini-btn:hover,
html.dark-mode .social-mini-btn:focus-visible,
html.dark-mode .footer-social:hover,
html.dark-mode .footer-social:focus-visible{
background:#ffffff !important;
color:#111827 !important;
border-color:#ffffff !important;
box-shadow:0 0 0 3px rgba(255,255,255,.14), 0 5px 14px rgba(0,0,0,.28);
}
.social-mini-btn i,
.footer-social i{
color:inherit !important;
opacity:1 !important;
}
/* ============================================================
STATIC PAGES
============================================================ */
.page-content-section{padding-top:3.5rem;}
.static-page-card{max-width:900px;margin:0 auto;}
.static-page-header{margin-bottom:2rem;}
.static-page-title{font-size:clamp(2rem,4vw,3.2rem);line-height:1.08;font-weight:600;margin:.55rem 0 0;}
.static-page-content{font-size:1.03rem;line-height:1.85;}
.static-page-content h2,.static-page-content h3,.static-page-content h4{color:var(--ink);margin:2rem 0 .75rem;}
.static-page-content p{margin-bottom:1.15rem;}
.static-page-content ul,.static-page-content ol{padding-left:1.35rem;margin-bottom:1.25rem;}
.static-page-content li{margin-bottom:.55rem;}
.static-page-content a{color:var(--gold-dim);text-decoration:underline;text-underline-offset:3px;}
.static-page-content img{max-width:100%;height:auto;border-radius:16px;}
html.dark-mode .static-page-content h2,
html.dark-mode .static-page-content h3,
html.dark-mode .static-page-content h4{color:var(--off-white);}
/* ============================================================
PREMIUM COMMENTS
============================================================ */
.dtk-comments-area{border-top:1px solid rgba(10,15,28,.10);padding-top:2.5rem;}
.comments-heading,.comments-form-heading{margin-bottom:1.5rem;}
.comments-title{font-size:1.75rem;font-weight:600;color:var(--ink);margin:.35rem 0 0;}
.comment-list{list-style:none;margin:0;padding:0;}
.comment-list .comment{margin:0 0 1rem;}
.comment-body.dtk-comment-body{display:flex;gap:1rem;padding:1.15rem;border:1px solid rgba(10,15,28,.10);border-radius:16px;background:#fff;}
.comment-avatar{flex:0 0 48px;}
.comment-avatar img{width:48px;height:48px;object-fit:cover;}
.comment-content-wrap{min-width:0;flex:1;}
.comment-meta{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin-bottom:.5rem;}
.comment-author-name{font-weight:700;color:var(--ink);}
.comment-meta time{ font-size:.68rem;color:var(--slate-dim);}
.comment-text{font-size:.92rem;line-height:1.7;color:var(--slate-dim);}
.comment-text p:last-child{margin-bottom:0;}
.comment-reply-link-wrap{margin-top:.65rem;}
.comment-reply-link{ font-size:.72rem;color:var(--gold-dim);font-weight:700;}
.comment-awaiting-moderation{font-size:.8rem;color:var(--danger);margin:.4rem 0;}
.comment-list .children{list-style:none;margin:.85rem 0 0 3.5rem;padding:0;}
.comment-navigation{display:flex;justify-content:space-between;gap:1rem;margin:1.25rem 0 2rem;}
.comment-navigation a{ font-size:.72rem;color:var(--gold-dim);font-weight:700;}
.dtk-comment-form{margin-top:2.5rem;padding:1.5rem;border:1px solid rgba(10,15,28,.10);border-radius:20px;background:#fff;}
.dtk-comment-form .logged-in-as,.dtk-comment-form .comment-notes{font-size:.78rem;color:var(--slate-dim);margin-bottom:1rem;}
.dtk-comment-form .logged-in-as a{color:var(--gold-dim);}
.dtk-comment-form label{display:block;font-size:.78rem;font-weight:700;margin-bottom:.45rem;color:var(--ink);}
.dtk-comment-form .required{color:var(--danger);}
.dtk-comment-form textarea{display:block;width:100%;min-height:180px;resize:vertical;border:1px solid rgba(10,15,28,.16);border-radius:12px;padding:.9rem 1rem;background:var(--paper);color:var(--ink);font:inherit;outline:none;transition:border-color .2s,box-shadow .2s;}
.dtk-comment-form textarea:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(232,163,61,.12);}
.dtk-comment-form .comment-plain-text-note{display:block;margin-top:.45rem;font-size:.7rem;line-height:1.5;color:var(--slate-dim);}
.dtk-comment-submit{border:0;border-radius:10px;padding:.7rem 1.05rem;font-weight:700;}
/* ============================================================
SINGLE POST SHARING
============================================================ */
.post-share-box{border-top:1px solid rgba(10,15,28,.10);padding-top:2rem;}
.post-share-heading h2{font-size:1.5rem;margin:.35rem 0 1rem;color:var(--ink);}
.post-share-buttons{display:flex;flex-wrap:wrap;gap:.65rem;}
.post-share-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1px solid rgba(10,15,28,.12);border-radius:11px;padding:.65rem .9rem;background:#fff;color:var(--ink);font-size:.78rem;font-weight:700;transition:.2s;cursor:pointer;}
.post-share-btn:hover,.post-share-btn:focus-visible{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-1px);}
.post-share-note{font-size:.75rem;color:var(--slate-dim);margin:.65rem 0 0;}
html.dark-mode .dtk-comments-area,
html.dark-mode .post-share-box{border-top-color:rgba(255,255,255,.10);}
html.dark-mode .comments-title,
html.dark-mode .post-share-heading h2{color:var(--off-white);}
html.dark-mode .comment-body.dtk-comment-body,
html.dark-mode .dtk-comment-form,
html.dark-mode .post-share-btn{background:var(--surface-2);border-color:rgba(255,255,255,.10);}
html.dark-mode .comment-author-name,
html.dark-mode .dtk-comment-form label{color:var(--off-white);}
html.dark-mode .comment-meta time,
html.dark-mode .comment-text,
html.dark-mode .dtk-comment-form .logged-in-as,
html.dark-mode .dtk-comment-form .comment-notes,
html.dark-mode .post-share-note{color:var(--slate);}
html.dark-mode .dtk-comment-form textarea{background:var(--surface);border-color:rgba(255,255,255,.14);color:var(--off-white);}
html.dark-mode .post-share-btn{color:var(--off-white);}
html.dark-mode .post-share-btn:hover,
html.dark-mode .post-share-btn:focus-visible{background:#fff;border-color:#fff;color:var(--ink);}
@media (max-width:575px){
.comment-body.dtk-comment-body{padding:1rem;gap:.75rem;}
.comment-list .children{margin-left:1.2rem;}
.dtk-comment-form{padding:1rem;}
.post-share-btn{flex:1 1 calc(50% - .65rem);}
}
/* ---- Monetization / AdSense placements ---- */
.dtk-ad-wrap{
width:100%;
margin:1.25rem auto;
min-height:90px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
.dtk-ad-wrap::before{
content:'Advertisement';
position:absolute;
margin-top:-78px;
font: 500 .62rem/1;
letter-spacing:.08em;
text-transform:uppercase;
color:rgba(10,15,28,.38);
pointer-events:none;
}
.dtk-ad-wrap .adsbygoogle{width:100%;max-width:970px;min-height:90px;}
html.dark-mode .dtk-ad-wrap::before{color:rgba(244,245,249,.36);}
@media (max-width:767px){
.dtk-ad-wrap{min-height:80px;margin:1rem auto;}
.dtk-ad-wrap .adsbygoogle{min-height:80px;}
}
.entry-content .wp-block-embed iframe { max-width: 100%; width: 100%; min-height: 400px; }
.nature-section .text-muted { color: #fff !important; }
/* 404 page css */
/* =========================
404 Page
========================= */
.not-found-wrap {
min-height: calc(100vh - 160px);
display: flex;
align-items: center;
justify-content: center;
padding-top: 60px;
padding-bottom: 60px;
}
.not-found-card {
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: 60px 50px;
text-align: center;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 24px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
position: relative;
overflow: hidden;
}
/* Decorative background */
.not-found-card::before {
content: "404";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -55%);
font-size: 190px;
font-weight: 900;
line-height: 1;
color: rgba(13, 110, 253, 0.035);
z-index: 0;
pointer-events: none;
}
.not-found-card > * {
position: relative;
z-index: 1;
}
/* Small label */
.not-found-card .section-kicker {
display: inline-block;
margin-bottom: 18px;
padding: 7px 15px;
border-radius: 50px;
background: #eaf3ff;
color: #ed1d26;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Heading */
.not-found-card h1 {
margin: 0 auto 15px;
max-width: 100%;
font-size: 29px;
line-height: 1.15;
font-weight: 800;
color: #212529;
}
/* Description */
.not-found-card p {
max-width: 520px;
margin: 0 auto 30px;
color: #6c757d;
font-size: 17px;
line-height: 1.7;
}
/* Search form */
.not-found-card form {
max-width: 540px;
margin: 0 auto 20px;
}
/*
WordPress get_search_form() usually outputs
input + submit button.
*/
.not-found-card form .search-form {
display: flex;
gap: 10px;
}
.not-found-card form input[type="search"] {
flex: 1;
min-width: 0;
height: 52px;
padding: 0 18px;
border: 1px solid #dee2e6;
border-radius: 12px;
background: #fff;
color: #212529;
font-size: 15px;
outline: none;
transition: all 0.25s ease;
}
.not-found-card form input[type="search"]::placeholder {
color: #adb5bd;
}
.not-found-card form input[type="search"]:focus {
border-color: #86b7fe;
box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.10);
}
/* Search button */
.not-found-card form input[type="submit"],
.not-found-card form button[type="submit"] {
height: 52px;
padding: 0 22px;
border: 0;
border-radius: 12px;
background: #ed1d26;
color: #fff;
font-weight: 600;
cursor: pointer;
transition: all 0.25s ease;
}
.not-found-card form input[type="submit"]:hover,
.not-found-card form button[type="submit"]:hover {
background: #0b5ed7;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(13, 110, 253, 0.22);
}
/* Back Home Button */
.not-found-card .button-primary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 12px 25px;
margin-top: 5px;
border-radius: 12px;
background: #212529;
color: #fff;
text-decoration: none;
font-size: 15px;
font-weight: 600;
transition: all 0.25s ease;
}
.not-found-card .button-primary:hover {
background: #000;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
/* =========================
Page Background
========================= */
body.error404 {
background:
radial-gradient(
circle at top left,
rgba(13, 110, 253, 0.08),
transparent 35%
),
radial-gradient(
circle at bottom right,
rgba(111, 66, 193, 0.07),
transparent 35%
),
#f8f9fa;
}
/* =========================
Mobile
========================= */
@media (max-width: 767.98px) {
.not-found-wrap {
min-height: auto;
padding: 40px 15px;
}
.not-found-card {
padding: 45px 22px;
border-radius: 18px;
}
.not-found-card::before {
font-size: 120px;
}
.not-found-card h1 {
font-size: 30px;
}
.not-found-card p {
font-size: 15px;
line-height: 1.6;
}
.not-found-card form .search-form {
flex-direction: column;
}
.not-found-card form input[type="search"],
.not-found-card form input[type="submit"],
.not-found-card form button[type="submit"] {
width: 100%;
}
.not-found-card .button-primary {
width: 100%;
margin-top: 8px;
}
}
/* end 404 */