/* This CSS code is developed for the @KDR Team and Khogendra Rupini. 
It is exclusively owned and maintained by him.
If anyone wishes to use this stylesheet, they must first contact Khogendra Rupini 
through his official website https://khogendrarupini.com 
Or his GitHub profile https://github.com/khogendrarupini/
This code is protected and requires a valid license, 
as it falls under the @KDR License by Khogendra Rupini. */

*{ font-family: 'Inter', system-ui, -apple-system, sans-serif;} body{ background: #13171a; color: #e5e7eb;} .world-card-dark{ background: rgba(22, 28, 32, 0.85); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border: 1px solid rgba(48, 56, 62, 0.9); transition: none} .article-anchor{ text-decoration: none; color: inherit; display: block; height: 100%; width: 100%} .article-anchor:active{ opacity: 0.9;} .breadcrumb a{ color: #9ca3af;} .breadcrumb a:hover{ color: #d1d5db;} .brand-header{ background: rgba(18, 26, 32, 0.9); border-bottom: 1px solid #2a3a48} .rounded-01{ border-radius: 5px} .height-image-x{ border-radius: 5px !important; height: 25em !important} .h-3c0{ height: 15em !important} .border-l-4{ border-left-width: 1px !important} .border-circle-kdr-wpx{ width: 30px; height: 30px; border-radius: 50%} .h-3exk{ height: 12em !important} .rounded-01{ border-radius: 2px !important} .image-loader-container{ position: relative; width: 100%; display: block; background: #1e2a32; border-radius: 0.75rem; overflow: hidden} .image-loader-container img{ width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.2s ease} .image-loader-container img.loaded{ opacity: 1} .image-loader-container .spinner{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; border: 3px solid rgba(255,255,255,0.15); border-top: 3px solid #60a5fa; border-radius: 50%; animation: spin 0.8s linear infinite; pointer-events: none; z-index: 2} @keyframes spin{ 0%{ transform: translate(-50%, -50%) rotate(0deg);} 100%{ transform: translate(-50%, -50%) rotate(360deg);}} .article-image{ width: 100%; height: 160px; object-fit: cover; border-radius: 0.75rem; margin-bottom: 1rem; background: #2a3a48; display: block; border: none; outline: none} ::-webkit-scrollbar{ width: 6px;} ::-webkit-scrollbar-track{ background: #1a2126;} ::-webkit-scrollbar-thumb{ background: #3f4e5a; border-radius: 12px;} .latest-item{ border-bottom: 1px solid #27333a; padding: 0.75rem 0} .latest-item:last-child{ border-bottom: none} .footer-link{ color: #9ca3af; transition: color 0.2s} .footer-link:hover{ color: #f0f0f0; text-decoration: underline; text-decoration-color: #4f5b66; text-underline-offset: 4px} .social-icon{ display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9999px; background-color: #202a32; color: #cbd5e0; transition: background-color 0.2s, color 0.2s} .social-icon:hover{ background-color: #33495e; color: #ffffff} .footer-heading{ letter-spacing: 0.3px; font-weight: 500; color: #d1d5db; text-transform: uppercase; font-size: 0.8rem} a:focus-visible, button:focus-visible{ outline: 2px solid #60a5fa; outline-offset: 4px; border-radius: 4px} .footer-separator{ background: linear-gradient(90deg, transparent, #3f4e5a, transparent); height: 1px}