/* ============================================================================
   PROJECT STYLESHEET — Modernized & Token-Driven Architecture
    更多下载：https://www.bootstrapmb.com 
   ----------------------------------------------------------------------------
   Typeface ......... Plus Jakarta Sans (self-hosted, all weights)
   Methodology ...... Design tokens (:root) + component-scoped rules
   Theming .......... Light / Dark via the `.dark-mode` body class
   ----------------------------------------------------------------------------
   NOTE ON STABILITY
   Every token below resolves to the exact value it replaced, so the rendered
   output, layout metrics, animations and responsive breakpoints are unchanged.
   The :root layer simply centralizes reusable values for maintainability,
   scalability and effortless re-theming.
   ============================================================================ */


/* ============================================================
   FONTS - Plus Jakarta Sans (All Weights & Styles)
   ============================================================ */

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/PlusJakartaSans-Light.woff2') format('woff2'),
        url('../fonts/PlusJakartaSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/PlusJakartaSans-LightItalic.woff2') format('woff2'),
        url('../fonts/PlusJakartaSans-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/PlusJakartaSans-Medium.woff2') format('woff2'),
        url('../fonts/PlusJakartaSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/PlusJakartaSans-MediumItalic.woff2') format('woff2'),
        url('../fonts/PlusJakartaSans-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/PlusJakartaSans-Regular.woff2') format('woff2'),
        url('../fonts/PlusJakartaSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/PlusJakartaSans-SemiBold.woff2') format('woff2'),
        url('../fonts/PlusJakartaSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/PlusJakartaSans-SemiBoldItalic.woff2') format('woff2'),
        url('../fonts/PlusJakartaSans-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/PlusJakartaSans-Bold.woff2') format('woff2'),
        url('../fonts/PlusJakartaSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/PlusJakartaSans-BoldItalic.woff2') format('woff2'),
        url('../fonts/PlusJakartaSans-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/PlusJakartaSans-ExtraBold.woff2') format('woff2'),
        url('../fonts/PlusJakartaSans-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/PlusJakartaSans-ExtraBoldItalic.woff2') format('woff2'),
        url('../fonts/PlusJakartaSans-ExtraBoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/PlusJakartaSans-ExtraLight.woff2') format('woff2'),
        url('../fonts/PlusJakartaSans-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/PlusJakartaSans-ExtraLightItalic.woff2') format('woff2'),
        url('../fonts/PlusJakartaSans-ExtraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/PlusJakartaSans-Italic.woff2') format('woff2'),
        url('../fonts/PlusJakartaSans-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}


/* ============================================================
   DESIGN TOKENS — Single Source of Truth (:root)
   ------------------------------------------------------------
   Centralized, reusable values. Edit a token here to re-skin
   the entire interface without hunting through component rules.
   ============================================================ */

:root {
    /* ---- Brand & Core Palette --------------------------------- */
    --c-primary: #367FF7;
    /* Primary brand blue            */
    --c-primary-hover: #0e62eb;
    /* Primary — hover state         */
    --c-primary-deep: #0b50c1;
    /* Primary — dark-mode base      */
    --c-primary-deep-hover: #093885;

    --c-white: #fff;
    --c-black: #000;
    --c-ink: #00021D;
    /* Near-black chip / badge bg     */

    /* ---- Text & Headings -------------------------------------- */
    --c-heading-soft: #181818;
    --c-nav: #1A1A1A;
    --c-text-soft: #2C2C2C;
    --c-muted: #404040;

    /* ---- Surfaces & Borders ----------------------------------- */
    --c-surface-alt: #EEEEF4;
    --c-surface-faint: #EEEEEE;
    --c-border-soft: #EBE5E5;
    /* ---- DARK THEME — Semantic Palette ---------------------------------
       Single source of truth for the whole dark theme. Every `.dark-mode`
       rule references these tokens instead of one-off hex values, so the
       theme is consistent and re-skinnable from one place. These tokens are
       ONLY consumed inside `.dark-mode` rules, so light mode is unaffected.

       Surface hierarchy (lightest interaction on top of darkest page):
         body (#000) < --c-dark-surface < --c-dark-elev < --c-dark-surface-2
    --------------------------------------------------------------------- */
    --c-dark-bg: #000000;
    /* Page background (body)         */
    --c-dark-surface: #0c0d12;
    /* Primary card / panel surface
       (re-valued from #3F3F4D for a deeper, premium tone) */
    --c-dark-surface-2: #262A38;
    /* Raised: inputs, chips, icon tiles, hover states */
    --c-dark-nav: rgba(17, 19, 26, 0.72);
    /* Glassy header bar              */
    --c-dark-nav-solid: #11131A;
    /* Header once scrolled (solid)   */
    --c-dark-elev: #1A1D27;
    /* Dropdown / mega-menu / mobile sheet surface */
    --c-dark-input: #14171F;
    /* Form fields                    */
    --c-dark-border: rgba(255, 255, 255, 0.08);
    /* Hairline divider / soft border */
    --c-dark-border-strong: rgba(255, 255, 255, 0.14);
    /* Input / emphasised border      */
    --c-dark-text: rgba(255, 255, 255, 0.86);
    /* Primary text on dark surfaces  */
    --c-dark-text-muted: rgba(255, 255, 255, 0.58);
    /* Secondary / meta text          */
    --c-dark-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    /* Elevation shadow for dark cards */

    /* ---- Translucent Glass Layers ----------------------------- */
    --glass-light: rgba(255, 255, 255, 0.33);
    --glass-border: rgba(255, 255, 255, 0.30);
    --glass-strong: rgba(255, 255, 255, 0.80);

    /* ---- Elevation / Shadow Scale ----------------------------- */
    --shadow-btn: 0px 12px 12px -3.75px rgba(0, 0, 0, 3.6%);
    --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 15px 40px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 25px 60px rgba(0, 0, 0, 0.08);
    --shadow-float: 0 20px 40px 0 rgba(0, 0, 0, 0.15);

    /* ---- Motion / Transitions --------------------------------- */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --t-fast: all 0.25s ease;
    --t-base: all 0.3s ease;
    --t-transform: transform 0.3s ease;
    --t-transform-slow: transform 0.4s ease;

    /* ---- Radius Scale (reference tokens) ----------------------- */
    --r-sm: 10px;
    --r-md: 20px;
    --r-lg: 30px;
    --r-pill: 100px;

    /* ---- Spacing Scale (reference tokens) ---------------------- */
    --space-xs: 6px;
    --space-sm: 12px;
    --space-md: 20px;
    --space-lg: 30px;
    --space-xl: 40px;

    /* ---- Layer / Stacking Order ------------------------------- */
    --z-header: 99;

    /* ---- Responsive Breakpoints (reference) ------------------- */
    --bp-xl: 1399px;
    --bp-lg: 1199px;
    --bp-md: 991px;
    --bp-sm: 767px;
    --bp-xs: 576px;
}


/* ============================================================
   MODERN BASE LAYER — Progressive, Non-Destructive Enhancements
   ------------------------------------------------------------
   Purely additive polish: crisper text rendering, accessible
   focus states, tasteful selection colors and motion-reduction
   support. None of these rules alter layout or existing behavior.
   ============================================================ */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Accessible keyboard focus (does not affect mouse interaction). */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 3px;
    border-radius: 4px;
}

/* On-brand text selection. */
::selection {
    background: var(--c-primary);
    color: var(--c-white);
}

/* Native control accent matches the brand. */
input,
textarea,
select {
    accent-color: var(--c-primary);
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}


/* ============================================================
   COMMON CSS - Base Styles (body, headings, links, buttons)
   ============================================================ */

body {
    font-weight: 400;
    font-size: 18px;
    color: var(--c-black);
    letter-spacing: 0;
    font-family: 'Plus Jakarta Sans';
    line-height: 1.5;
    position: relative;
}

html {
    scroll-behavior: smooth;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--c-black);
    font-weight: 700;
    font-family: 'Plus Jakarta Sans';
    line-height: 1.4;
}

a {
    color: var(--c-primary);
}

a:hover {
    color: var(--c-black);
    text-decoration: none;
}

.btn,
button {
    background-color: var(--c-primary);
    color: var(--c-white);
    border: none;
    font-weight: 500;
    border-radius: 10px;
    padding: 12px 24px;
    font-size: 18px;
    text-transform: none;
    box-shadow: var(--shadow-btn);
}

.btn:hover img {
    filter: brightness(0) invert(1);
}

.dark-mode .btn,
.dark-mode button {
    background-color: #0b50c1;
}

.btn:hover,
.button:hover {
    background-color: #0e62eb !important;
    color: var(--c-white) !important;
}

.dark-mode .btn:hover,
.dark-mode .button:hover {
    background-color: #093885 !important;
    color: var(--c-white) !important;
}

.btn-arrow img {
    width: 30px;
    height: 30px;
    margin-left: 8px;
}

.read-more img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    margin-left: 10px;
}

.read-more {
    font-size: 18px;
    font-weight: 600;
    color: var(--c-primary);
    text-decoration: none;
    width: fit-content;
    display: flex;
    align-items: center;
}

.read-more:hover {
    color: var(--c-primary);
}

.category,
.author {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 50px;
    background: var(--c-ink);
    color: var(--c-white);
}

.category img {
    width: 30px;
    height: 30px;
}

.author img {
    border-radius: 50%;
    width: 30px;
    height: 30px;
}

img {
    max-width: 100%;
    height: auto;
}

.ad-images img,
.ad img {
    width: 100%;
}

.position-unset {
    position: unset !important;
}

.after-none::after,
.before-none::before {
    display: none;
}

.bg-light-primary-btn,
.dark-mode .bg-light-primary-btn {
    background-color: rgba(54, 127, 247, 20%);
    color: var(--c-primary);
    font-weight: 700;
}

.bg-white-btn,
.dark-mode .bg-white-btn {
    background-color: var(--c-white);
    color: var(--c-primary);
    font-weight: 700;
}


/* ============================================================
   ANIMATION CSS - Fade In / Scroll Animations
   ============================================================ */

.fade-animation {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease;
}

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


/* ============================================================
   DARK MODE - Theme Toggle & Dark Theme Styles
   ============================================================ */

body .theme-toggle {
    width: 60px;
    height: 30px;
    background: var(--c-black);
    border-radius: 50px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 6px;
    transition: 0.3s;
    user-select: none;
}

body .theme-toggle .toggle-icon {
    width: 16px;
    height: 16px;
    z-index: 1;
    position: absolute;
}

body .theme-toggle .toggle-circle {
    width: 20px;
    height: 20px;
    background: var(--c-white);
    border-radius: 50%;
    position: absolute;
    right: 4px;
    transition: 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 41%);
}

body.light-mode .theme-toggle {
    background: var(--c-black);
}

body.light-mode .theme-toggle .toggle-circle {
    right: 3px;
}

body.dark-mode {
    background: var(--c-black);
    color: var(--c-dark-text);
}

body.dark-mode .theme-toggle {
    background: #c5c5c5;
}

body.dark-mode .theme-toggle .toggle-circle {
    left: 3px;
    right: auto;
    background: var(--c-black);
}

body.dark-mode .theme-toggle .dark-icon {
    display: none;
}

body .theme-toggle .dark-icon {
    display: block;
    left: 4px;
}

body.dark-mode .theme-toggle .light-icon {
    display: block;
    right: 4px;
}

body .theme-toggle .light-icon {
    display: none;
}

/* ============================================================
   SMOOTH THEME TRANSITION
   ------------------------------------------------------------
   `.theme-anim` is added to <body> by main.js only for ~450ms
   during a toggle, then removed. Scoping the transition to that
   window means it animates the colour swap without interfering
   with normal load, hover or transform animations.
   ============================================================ */
.theme-anim,
.theme-anim *,
.theme-anim *::before,
.theme-anim *::after {
    transition: background-color 0.4s var(--ease-standard),
        color 0.4s var(--ease-standard),
        border-color 0.4s var(--ease-standard),
        box-shadow 0.4s var(--ease-standard),
        fill 0.4s var(--ease-standard) !important;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {

    .theme-anim,
    .theme-anim *,
    .theme-anim *::before,
    .theme-anim *::after {
        transition: none !important;
    }
}


/* ============================================================
   DARK MODE — Premium Dark Navbar
   ------------------------------------------------------------
   Converts the header bar, dropdowns, mega-menu, mobile sheet
   and hamburger into a glassy dark surface with light text.
   Every rule is `.dark-mode`-scoped, so light mode is untouched.
   (The glassy bar itself is set on `.dark-mode .header-section
   .container` up in the header section.)
   ============================================================ */

/* Solid dark bar once scrolled (overrides the shared white fix-header rule) */
.dark-mode .fix-header .custom-navbar {
    background-color: var(--c-dark-nav-solid);
    border-color: var(--c-dark-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* Logo: navy lockup is invisible on dark — render it as a crisp white silhouette */

.header-section .navbar-brand .dark-logo {
    display: none;
}

.dark-mode .header-section .navbar-brand .dark-logo {
    display: block;
}

.header-section .navbar-brand .light-logo {
    display: block;
}

.dark-mode .header-section .navbar-brand .light-logo {
    display: none;
}

/* Nav links + dropdown caret -> light */
.dark-mode .header-section .navbar-nav .nav-item .nav-link {
    color: var(--c-dark-text);
}

.dark-mode .header-section .navbar-nav .nav-item .nav-link:hover,
.dark-mode .header-section .navbar-nav .show>.nav-link {
    color: var(--c-white);
}

.dark-mode .header-section .navbar-nav .nav-item .dropdown-toggle::after {
    border-color: var(--c-dark-text);
}

/* Dropdown menus -> dark elevated cards */
.dark-mode .header-section .navbar-nav .dropdown-menu {
    background: var(--c-dark-elev);
    border: 1px solid var(--c-dark-border);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

.dark-mode .header-section .navbar-nav .dropdown-menu .dropdown-item {
    color: var(--c-dark-text);
}

.dark-mode .header-section .navbar-nav .dropdown-menu .dropdown-item:hover {
    background: rgba(54, 127, 247, 0.16);
    color: var(--c-white);
}

/* Mega-menu panel -> dark */
.dark-mode .header-section .mega-menu .mega-dropdown {
    background: var(--c-dark-elev);
    border: 1px solid var(--c-dark-border);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.dark-mode .header-section .mega-content {
    background: rgba(17, 19, 26, 0.9);
}

.dark-mode .header-section .mega-content h6 {
    color: var(--c-white);
}

.dark-mode .header-section .mega-content span {
    color: rgba(255, 255, 255, 0.62);
}

.dark-mode .header-section .mega-footer a {
    color: var(--c-dark-text);
}

/* Mobile (<=991px): dark dropdown sheet + light hamburger bars */
@media (max-width: 991px) {
    .dark-mode .header-section .navbar-collapse {
        background: var(--c-dark-elev);
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    }

    .dark-mode .header-section .menu-toggler span {
        background: var(--c-white);
    }
}


.dark-mode .h1,
.dark-mode .h2,
.dark-mode .h3,
.dark-mode .h4,
.dark-mode .h5,
.dark-mode .h6,
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
    color: var(--c-dark-text);
}

.dark-mode .top-bg-image,
.dark-mode .bottom-bg-image {
    display: none;
}


/* ============================================================
   NEBO CSS - Custom Notch / Mask Shape Utility
   ============================================================ */

.nebo {
    --nb-r: 20px;
    --nb-w: 20px;
    --nb-h: 20px;

    --nb-cor1-rw: var(--nb-r);
    --nb-cor1-rh: var(--nb-r);
    --nb-cor2-rw: var(--nb-r);
    --nb-cor2-rh: var(--nb-r);
    --nb-curve-rw: var(--nb-r);
    --nb-curve-rh: var(--nb-r);

    --_nb-smooth: 98%;

    /* Default = bottom-right */
    --_nb-mask-image:
        linear-gradient(to bottom, #000, #000),
        linear-gradient(to bottom, #000, #000),
        linear-gradient(to bottom, #000, #000),
        linear-gradient(to bottom, #000, #000),
        radial-gradient(closest-side at center,
            #000 var(--_nb-smooth),
            transparent 100%),
        radial-gradient(closest-side at center,
            #000 var(--_nb-smooth),
            transparent 100%),
        radial-gradient(farthest-side at 100% 100%,
            transparent var(--_nb-smooth),
            #000 100%);

    --_nb-mask-size:
        100% calc(100% - var(--nb-h) - var(--nb-cor1-rh) - var(--nb-curve-rh) - var(--nb-cor2-rh)),
        calc(100% - var(--nb-cor1-rw)) calc(100% - var(--nb-h) - var(--nb-curve-rh) - var(--nb-cor2-rh)),
        calc(100% - var(--nb-w) - var(--nb-curve-rw) - var(--nb-cor1-rw)) calc(100% - var(--nb-cor2-rh)),
        calc(100% - var(--nb-w) - var(--nb-cor1-rw) - var(--nb-curve-rw) - var(--nb-cor2-rw)) 100%,
        calc(var(--nb-cor1-rw) * 2) calc(var(--nb-cor1-rh) * 2),
        calc(var(--nb-cor2-rw) * 2) calc(var(--nb-cor2-rh) * 2),
        calc(var(--nb-curve-rw) + 0.5px) calc(var(--nb-curve-rh) + 0.5px);

    --_nb-mask-position-tl:
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        0 calc(var(--nb-h) + var(--nb-curve-rh) + var(--nb-cor2-rh)),
        calc(var(--nb-w) + var(--nb-cor1-rw) + var(--nb-curve-rw)) 0,
        calc(var(--nb-w) + var(--nb-cor1-rw)) calc(var(--nb-h) + var(--nb-cor2-rh));

    --_nb-mask-position-tr:
        0 100%,
        0 100%,
        0 100%,
        0 100%,
        100% calc(var(--nb-h) + var(--nb-curve-rh) + var(--nb-cor2-rh)),
        calc(100% - var(--nb-w) - var(--nb-curve-rw) - var(--nb-cor1-rw)) 0,
        calc(100% - var(--nb-w) - var(--nb-cor1-rw)) calc(var(--nb-h) + var(--nb-cor2-rh));

    --_nb-mask-position-bl:
        100% 0,
        100% 0,
        100% 0,
        100% 0,
        0 calc(100% - var(--nb-h) - var(--nb-curve-rh) - var(--nb-cor2-rh)),
        calc(var(--nb-w) + var(--nb-curve-rw) + var(--nb-cor1-rw)) 100%,
        calc(var(--nb-w) + var(--nb-cor1-rw)) calc(100% - var(--nb-h) - var(--nb-cor2-rh));

    --_nb-mask-position-br:
        0 0,
        0 0,
        0 0,
        0 0,
        100% calc(100% - var(--nb-h) - var(--nb-curve-rh) - var(--nb-cor2-rh)),
        calc(100% - var(--nb-w) - var(--nb-curve-rw) - var(--nb-cor1-rw)) 100%,
        calc(100% - var(--nb-w) - var(--nb-cor1-rw)) calc(100% - var(--nb-h) - var(--nb-cor2-rh));

    --_nb-mask-position: var(--_nb-mask-position-br);

    mask-image: var(--_nb-mask-image);
    mask-size: var(--_nb-mask-size);
    mask-position: var(--_nb-mask-position);
    mask-repeat: no-repeat;
}

/* ============================================================
   Top Left
   ============================================================ */

.nebo--tl {
    --_nb-mask-image:
        linear-gradient(to bottom, #000, #000),
        linear-gradient(to bottom, #000, #000),
        linear-gradient(to bottom, #000, #000),
        linear-gradient(to bottom, #000, #000),
        radial-gradient(closest-side at center,
            #000 var(--_nb-smooth),
            transparent 100%),
        radial-gradient(closest-side at center,
            #000 var(--_nb-smooth),
            transparent 100%),
        radial-gradient(farthest-side at 0 0,
            transparent var(--_nb-smooth),
            #000 100%);

    --_nb-mask-position: var(--_nb-mask-position-tl);
}

/* ============================================================
   Top Right
   ============================================================ */

.nebo--tr {
    --_nb-mask-image:
        linear-gradient(to bottom, #000, #000),
        linear-gradient(to bottom, #000, #000),
        linear-gradient(to bottom, #000, #000),
        linear-gradient(to bottom, #000, #000),
        radial-gradient(closest-side at center,
            #000 var(--_nb-smooth),
            transparent 100%),
        radial-gradient(closest-side at center,
            #000 var(--_nb-smooth),
            transparent 100%),
        radial-gradient(farthest-side at 100% 0,
            transparent var(--_nb-smooth),
            #000 100%);

    --_nb-mask-position: var(--_nb-mask-position-tr);
}

/* ============================================================
   Bottom Left
   ============================================================ */

.nebo--bl {
    --_nb-mask-image:
        linear-gradient(to bottom, #000, #000),
        linear-gradient(to bottom, #000, #000),
        linear-gradient(to bottom, #000, #000),
        linear-gradient(to bottom, #000, #000),
        radial-gradient(closest-side at center,
            #000 var(--_nb-smooth),
            transparent 100%),
        radial-gradient(closest-side at center,
            #000 var(--_nb-smooth),
            transparent 100%),
        radial-gradient(farthest-side at 0 100%,
            transparent var(--_nb-smooth),
            #000 100%);

    --_nb-mask-position: var(--_nb-mask-position-bl);
}

/* ============================================================
   Bottom Right
   ============================================================ */

.nebo--br {
    --_nb-mask-image:
        linear-gradient(to bottom, #000, #000),
        linear-gradient(to bottom, #000, #000),
        linear-gradient(to bottom, #000, #000),
        linear-gradient(to bottom, #000, #000),
        radial-gradient(closest-side at center,
            #000 var(--_nb-smooth),
            transparent 100%),
        radial-gradient(closest-side at center,
            #000 var(--_nb-smooth),
            transparent 100%),
        radial-gradient(farthest-side at 100% 100%,
            transparent var(--_nb-smooth),
            #000 100%);

    --_nb-mask-position: var(--_nb-mask-position-br);
}


/* ============================================================
   TOP & BOTTOM BACKGROUND IMAGE - Decorative BG Overlays
   ============================================================ */

.top-bg-image {
    width: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    background: linear-gradient(to bottom, #bae0fd, #ffffff);
}

.bottom-bg-image {
    width: 100%;
    position: absolute;
    z-index: -1;
    bottom: 0;
}

.top-bg-image img,
.bottom-bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ============================================================
   HEADER SECTION - Navbar, Dropdown Menu, Mega Menu
   ============================================================ */

.header-section {
    position: fixed;
    width: 100%;
    z-index: 99;
}

.header-section .custom-navbar {
    background: rgba(255, 255, 255, 0.33);
    border: 2px solid rgba(255, 255, 255, 0.30);
    padding: 10px 28px;
    border-radius: 100px;
}

/* Premium dark navbar — glassy deep surface (see DARK NAVBAR block below) */
.dark-mode .header-section .custom-navbar {
    background: var(--c-dark-nav);
    border-color: var(--c-dark-border);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

/* Light-mode scrolled header (dark-mode equivalent lives in the dark navbar
   block above, so it is NOT overridden here). */
.fix-header .custom-navbar {
    background-color: var(--c-white);
    border-color: #030b62;
}

.header-section .navbar-brand img {
    width: 130px;
    height: auto;
}

.header-section .navbar-nav .nav-item .nav-link {
    color: var(--c-nav);
    font-size: 18px;
    font-weight: 600;
}

.header-section .navbar-nav .nav-item .dropdown-toggle::after {
    content: "";
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.14em;
    border: solid var(--c-nav);
    border-width: 0 2px 2px 0;
    padding: 3px;
    transform: rotate(45deg);
    transition: 0.3s;
}

.header-section .navbar-nav .dropdown:hover .dropdown-toggle::after {
    transform: rotate(-135deg);
    vertical-align: 0;
}

.header-section .navbar-nav .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.98);
    transition: var(--t-fast);
    border: none;
    border-radius: 14px;
    padding: 12px;
    min-width: 186px;
    background: var(--c-white);
    box-shadow: var(--shadow-lg);
}

.header-section .navbar-nav .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(20px) scale(1);
}

.header-section .navbar-nav .dropdown-menu .dropdown-item {
    position: relative;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #222;
    border-radius: 10px;
    transition: var(--t-fast);
}

.header-section .navbar-nav .dropdown-menu .dropdown-item:hover {
    background: linear-gradient(135deg, #E6F8FF, #F8EEFF);
    color: var(--c-primary);
    transform: translateX(6px);
}

.header-section .navbar-nav .dropdown-menu .dropdown-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 60%;
    background: var(--c-primary);
    border-radius: 3px;
    transition: 0.25s ease;
}

.header-section .navbar-nav .dropdown-menu .dropdown-item:hover::before {
    transform: translateY(-50%) scaleY(1);
}

.header-section .dropdown-menu li:not(:last-child) {
    margin-bottom: 4px;
}

.header-section .mega-menu {
    position: static;
}

.header-section .mega-menu .mega-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-width: 1320px;
    width: 100%;
    margin: auto;
    padding: 25px;
    border-radius: 20px;
    background: var(--c-white);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: 0.3s ease;
    box-shadow: var(--shadow-xl);
}

.header-section .navbar-nav .mega-menu:hover .mega-dropdown {
    transform: translateY(0px) scale(1);
}

.header-section .mega-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.header-section .mega-item {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    display: block;
    height: 250px;
    text-decoration: none;
}

.header-section .mega-img img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: 0.4s;
    width: 100%;
    height: 100%;
}

.header-section .mega-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.header-section .mega-content {
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 5px;
    z-index: 2;
    color: var(--c-white);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transform: translateY(0);
    transition: 0.35s ease;
    background: rgba(255, 255, 255, 93%);
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    padding: 12px;
}

.header-section .mega-content h6 {
    margin: 0;
    font-size: 18px;
    color: var(--c-black);
}

.header-section .mega-content span {
    font-size: 16px;
    color: var(--c-muted);
}

.header-section .mega-link {
    display: none;
    font-size: 14px;
}

.header-section .mega-item:hover .mega-img img {
    transform: scale(1.1);
}

.header-section .mega-item:hover .mega-content {
    transform: translateY(-10px);
}

.header-section .mega-item:hover .mega-link {
    display: block;
}

.header-section .mega-footer {
    text-align: center;
    margin-top: 20px;
}

.header-section .mega-footer a {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 100px;
    background-color: rgba(54, 127, 247, 20%);
    color: var(--c-primary);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: 0.3s;
}

.header-section .mega-footer a:hover {
    background-color: rgba(54, 127, 247, 40%);
    color: var(--c-primary);
}

.header-section .mega-footer a img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    margin-left: 10px;
}


/* ============================================================
   FOOTER SECTION - Links, Logo, Social Icons, Bottom Bar
   ============================================================ */

.footer-section {
    font-size: 16px;
    padding: 40px 0;
}

.footer-section a {
    font-size: 16px;
    color: var(--c-black);
    text-decoration: none;
}

.dark-mode .footer-section a,
.dark-mode .footer-section .menu-title {
    color: var(--c-dark-text);
}

.footer-section a:hover {
    color: var(--c-primary);
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section .menu-title {
    font-size: 20px;
    color: var(--c-primary);
    display: block;
    margin-bottom: 6px;
}

.footer-section .footer-logo img {
    width: 180px;
    height: auto;
    margin-bottom: 1rem;
}

.footer-section .footer-logo .footer-light-logo {
    display: block;
}

.footer-section .footer-logo .footer-dark-logo {
    display: none;
}

.dark-mode .footer-section .footer-logo .footer-light-logo {
    display: none;
}

.dark-mode .footer-section .footer-logo .footer-dark-logo {
    display: block;
}

.footer-section .foo-social ul {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer-section .foo-social ul img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    transition: var(--t-transform);
}

.dark-mode .footer-section .foo-social ul img {
    width: 28px;
    height: 28px;
    background: var(--c-dark-text);
    padding: 4px;
    border-radius: 6px;
}

.footer-section .foo-social ul a:hover img {
    transform: scale(1.15);
}

.footer-section .footer-menu .footer-link a {
    margin-bottom: 10px;
    display: block;
}

.footer-section .foo-bottom {
    border-top: 2px solid rgba(0, 0, 0, 10%);
    padding-top: 16px;
    margin-top: 16px;
}


/* ============================================================
   HOME PAGE 1 - Hero Banner Section
   ============================================================ */

.hero-section.style-1 {
    padding-top: 170px;
}

.hero-section.style-1 .hero-title {
    font-size: 56px;
}

.hero-section.style-1 .search-box {
    margin-top: 30px;
    background: linear-gradient(180deg, rgba(0, 187, 255, 0.10) 0%, rgba(196, 77, 255, 0.10) 100%);
    box-shadow: var(--shadow-float);
    max-width: 700px;
    padding: 10px;
    border-radius: 36px;
}

.dark-mode .hero-section.style-1 .search-box {
    background: linear-gradient(180deg, rgb(1 28 38 / 24%) 0%, rgb(55 0 82 / 24%) 100%);
}

.hero-section.style-1 .search-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    background: var(--c-white);
    padding: 10px 16px;
    border-radius: 26px;
    margin: auto;
    box-shadow: var(--shadow-sm);
}

.dark-mode .hero-section.style-1 .search-inner {
    background: var(--c-dark-nav);
}

.hero-section.style-1 .search-inner input {
    border: none;
    flex: 1;
    padding: 10px;
    outline: none;
    color: rgba(0, 0, 0, 40%);
    font-size: 18px;
    background-color: transparent;
}

.hero-section.style-1 .search-inner input::placeholder {
    color: rgba(0, 0, 0, 40%);
}

.dark-mode .hero-section.style-1 .search-inner input,
.dark-mode .hero-section.style-1 .search-inner input::placeholder {
    color: var(--c-dark-text);
}

.hero-section.style-1 .cat-outer .category-slid {
    font-weight: 700;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.hero-section.style-1 .cat-outer.outer-layout-2 .category-slid {
    background: rgba(255, 255, 255, 0.59);
    border-radius: 100px;
    padding: 8px 14px;
    gap: 10px;
}

.dark-mode .hero-section.style-1 .cat-outer.outer-layout-2 .category-slid {
    border: 1px solid var(--c-white);
    background: transparent;
}

.hero-section.style-1 .cat-outer {
    overflow: hidden;
    max-width: 560px;
    margin: 0 auto;
    position: relative;
}

.hero-section.style-1 .cat-outer::before,
.hero-section.style-1 .cat-outer::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    z-index: 2;
}

.hero-section.style-1 .cat-outer::before {
    left: 0;
    background: linear-gradient(to right, #e4e4eb, transparent);
}

.hero-section.style-1 .cat-outer::after {
    right: 0;
    background: linear-gradient(to left, #e4e4eb, transparent);
}

.dark-mode .hero-section.style-1 .cat-outer::before,
.dark-mode .hero-section.style-1 .cat-outer::after {
    background: transparent;
}

.hero-section.style-1 .cat-track {
    display: flex;
    gap: 30px;
    align-items: center;
    animation: slide 18s linear infinite;
    width: max-content;
}

.hero-section.style-1 .cat-track:hover {
    animation-play-state: paused;
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }

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

.hero-section.style-1 .cat-outer .category-slid img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: inline-block;
}


/* ============================================================
   HOME PAGE 1 - Stories Section (Slider)
   ============================================================ */

.stories-section {
    padding: 40px 0;
    background: rgba(255, 255, 255, 38%);
    border-top-left-radius: 150px;
    border-top-right-radius: 150px;
}

.dark-mode .stories-section {
    background: transparent;
}

.dark-mode .stories-section .sec-title {
    color: var(--c-white);
}

.stories-section .sec-title span {
    color: var(--c-primary);
}

.stories-section .stories-slider,
.stories-section .stories-wrapper {
    position: relative;
}

.stories-section .slick-list,
.stories-section .slick-track {
    height: 512px;
}

.stories-section .slick-slide>div {
    height: 100%;
}

.stories-section .story-slide {
    display: flex !important;
    height: 100%;
    border-radius: 26px;
    overflow: hidden;
}

.stories-section .story-slide .slider-img {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-position: right;
}

.stories-section .slick-slide {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.stories-section .slick-active {
    opacity: 1;
}

.stories-section .slick-current .slide-left {
    animation: slideFade 0.8s ease;
}

@keyframes slideFade {
    from {
        transform: translateX(40px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.stories-section .slide-left {
    flex: 1;
    padding: 30px 28px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 520px;
}

.stories-section .slide-content {
    display: flex;
    flex-direction: column;
}

.stories-section .slide-bottom {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
}

.stories-section .cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #F2FDFF;
    border: 1px solid #B9BBFF;
    border-radius: 50px;
    padding: 5px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-black);
    width: fit-content;
    margin-bottom: 14px;
}

.dark-mode .stories-section .cat-badge {
    background: #0d0e0e;
    border: 1px solid #2b2b3c;
    color: #ffff;
}

.stories-section .cat-badge img {
    width: 25px;
    height: 25px;
    object-fit: contain;
}

.dark-mode .stories-section .cat-badge img {
    filter: brightness(0) invert(1);
}

.stories-section .cat-badge-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.stories-section .slide-meta {
    display: flex;
    gap: 14px;
    margin-bottom: 12px;
}

.stories-section .slide-meta span {
    font-size: 14px;
    color: var(--c-surface-faint);
    display: flex;
    align-items: center;
    gap: 10px;
}

.stories-section .slide-meta img {
    width: 20px;
    height: 20px;
}

.stories-section .slide-title {
    font-size: 26px;
    color: var(--c-white);
    margin-bottom: 10px;
}

.stories-section .slide-desc {
    font-size: 16px;
    color: var(--c-white);
}

.stories-section .thumb-row {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.stories-section .thumb {
    width: 200px;
    height: 130px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.stories-section .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stories-section .slide-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stories-section .progress-bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    margin-right: 22px;
    overflow: hidden;
}

.stories-section .progress-fill {
    height: 100%;
    background: var(--c-white);
    width: 0%;
    transition: width 5s linear;
}

.stories-section .nav-btns {
    display: flex;
    gap: 14px;
}

.stories-section .nav-btn {
    padding: 20px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stories-section .nav-btn span {
    font-size: 22px;
    color: #040519;
    margin-bottom: 4px;
}

.stories-section .nav-btn:hover {
    background: var(--c-white);
}

.stories-section .nav-btn.next {
    background: var(--c-white);
}


/* ============================================================
   HOME PAGE 1 - Blog Section (Style 1) - Blog Cards & Sidebar
   ============================================================ */

.blog-section.style-1 .blog-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    height: 460px;
    margin-bottom: 26px;
}

.blog-section.style-1 .blog-card:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    z-index: 1;
    backdrop-filter: blur(12px);
    mask-image: linear-gradient(to top, black 60%, transparent 100%);
}

.blog-section.style-1 .blog-card .card-bg-img {
    position: absolute;
    inset: 0;
    background: #48004E;
}

.blog-section.style-1 .blog-card .card-bg-img-2 {
    background: #004E09;
}

.blog-section.style-1 .blog-card .card-bg-img-3 {
    background: #673000;
}

.blog-section.style-1 .blog-card .card-bg-img-4 {
    background: #001F4E;
}

.blog-section.style-1 .blog-card .card-bg-img-5 {
    background: #3D0001;
}

.blog-section.style-1 .blog-card .card-bg-img-6 {
    background: #957000;
}

.blog-section.style-1 .blog-card .card-bg-img-7 {
    background: #238E00;
}

.blog-section.style-1 .blog-card .card-bg-img-8 {
    background: #004E35;
}

.blog-section.style-1 .blog-card .card-bg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: luminosity;
}

.blog-section.style-1 .blog-details {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px;
    z-index: 2;
    color: var(--c-white);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 40%) 50%);
}

.dark-mode .blog-section.style-1 .blog-details {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0 0 0 / 92%) 33%);
}

.blog-section.style-1 .cate-auth {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.blog-section.style-1 .cate-auth .category,
.blog-section.style-1 .cate-auth .author {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 50px;
    background: var(--c-ink);
}

.dark-mode .blog-section.style-1 .cate-auth .category,
.dark-mode .blog-section.style-1 .cate-auth .author {
    background: #000000;
    border: 1px solid #606060;
}

.blog-section.style-1 .category img,
.blog-section.style-1 .author img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.blog-section.style-1 .author img {
    border-radius: 50%;
    width: 30px;
    height: 30px;
}

.blog-section.style-1 .blog-content a {
    text-decoration: none;
    color: inherit;
}

.blog-section.style-1 .blog-content h3 {
    font-size: 25px;
    color: var(--c-white);
}

.blog-section.style-1 .blog-content p {
    font-size: 16px;
}

.blog-section.style-1 .blog-time-date,
.trending-post.in-sidebar .trending-time-date {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    border-top: 2px solid rgba(204, 204, 204, 21%);
    padding-top: 1rem;
}

.blog-section.style-1 .blog-time-date div,
.trending-post.in-sidebar .trending-time-date div {
    display: flex;
    align-items: center;
    gap: 6px;
}

.blog-section.style-1 .blog-time-date img,
.trending-post.in-sidebar .trending-time-date img {
    width: 14px;
    height: 14px;
}

.blog-section.style-1 .blog-card img {
    transition: var(--t-transform-slow);
}

.blog-section.style-1 .blog-card:hover img {
    transform: scale(1.05);
}


/* ============================================================
   HOME PAGE 1 - Sidebar: Explore Category & Trending Posts
   ============================================================ */

.explore-category.in-sidebar,
.trending-post.in-sidebar {
    border: 1px solid #D4D4D4;
    background: #FBFBFB;
    padding: 20px;
    border-radius: 24px;
    margin-bottom: 26px;
}

.dark-mode .explore-category.in-sidebar,
.dark-mode .trending-post.in-sidebar {
    background: var(--c-dark-surface);
    border-color: var(--c-dark-border);
}

.explore-category.in-sidebar h4,
.trending-post.in-sidebar h4,
.explore-category.in-sidebar h3,
.trending-post.in-sidebar h3,
.trending-post.in-sidebar .trending-post-right h5 {
    color: var(--c-black);
}

.explore-category.in-sidebar .category-list {
    margin-top: 20px;
}

.explore-category.in-sidebar .category-list .category-btn {
    background: #C8C3FF;
    border-radius: 100px;
    padding: 8px 14px;
    display: inline-block;
    color: var(--c-black);
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 12px;
    margin-right: 6px;
    cursor: pointer;
}

.dark-mode .explore-category.in-sidebar .category-list .category-btn {
    filter: invert(1);
}

.explore-category.in-sidebar .category-list .category-btn:hover {
    mix-blend-mode: difference;
}

.explore-category.in-sidebar .category-list .category-btn img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    margin-right: 4px;
}

.explore-category.in-sidebar .category-list .category-btn.tech {
    background: #C8C3FF;
}

.explore-category.in-sidebar .category-list .category-btn.business {
    background: #FFCCCC;
}

.explore-category.in-sidebar .category-list .category-btn.lifestyle {
    background: #E6BDFF;
}

.explore-category.in-sidebar .category-list .category-btn.travel {
    background: #CAFFF8;
}

.explore-category.in-sidebar .category-list .category-btn.health {
    background: #FFEECB;
}

.explore-category.in-sidebar .category-list .category-btn.career {
    background: #FFE7C2;
}

.explore-category.in-sidebar .category-list .category-btn.education {
    background: #D8D5FF;
}

.trending-post.in-sidebar .trending-post-right a {
    text-decoration: none;
}

.trending-post.in-sidebar .trending-post-right h4,
.trending-post.in-sidebar .trending-post-right h5 {
    font-weight: 600;
    font-size: 18px;
}

.trending-post.in-sidebar .trending-time-date div {
    color: var(--c-text-soft);
}

.dark-mode .trending-post.in-sidebar .trending-time-date div {
    filter: brightness(0) invert(1);
}

.trending-post.in-sidebar .border-bottom-row {
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #DED3FF;
    padding-bottom: 16px;
    margin-bottom: 16px;
    margin-top: 20px;
    transition: var(--t-transform-slow);
}

.dark-mode .trending-post.in-sidebar .border-bottom-row {
    border-color: var(--c-dark-border);
}

.trending-post.in-sidebar .border-bottom-row:hover {
    transform: scale(1.05);
}

.trending-post.in-sidebar .border-bottom-row:last-child {
    border: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.trending-post.in-sidebar .border-bottom-row .right-side {
    width: 25%;
}

.trending-post.in-sidebar .border-bottom-row .left-side {
    width: 75%;
}

.trending-post.in-sidebar .trending-post-thum {
    background: #352EC0;
    border-radius: 14px;
}

.trending-post.in-sidebar .trending-post-thum-2 {
    background: #004104;
}

.trending-post.in-sidebar .trending-post-thum-3 {
    background: #30003D;
}

.trending-post.in-sidebar .trending-post-thum img {
    mix-blend-mode: luminosity;
    border-radius: 12px;
}


/* ============================================================
   HOME PAGE 1 - Sidebar: Author Profile Card
   ============================================================ */

.profile-card.in-sidebar {
    background: linear-gradient(to bottom, #00FF95 0%, #0088FF 100%);
    padding: 6px;
    border-radius: 36px;
    position: relative;
}

.dark-mode .profile-card.in-sidebar {
    background: linear-gradient(to bottom, #012013 0%, #02335e 100%);
}

.profile-card.in-sidebar .profile-img {
    position: absolute;
    z-index: 1;
    top: 0;
    border-radius: 36px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    left: 0;
    right: 0;
    padding: 6px;
}

.profile-card.in-sidebar .card-details {
    padding: 320px 20px 20px 20px;
    color: var(--c-white);
    font-size: 18px;
    position: relative;
    z-index: 2;
}

.profile-card.in-sidebar .card-details .name-type {
    display: flex;
    align-items: center;
    gap: 28px;
}

.profile-card.in-sidebar .card-details .name-type .author-name {
    font-weight: 700;
    color: var(--c-white);
    font-size: 24px;
}

.profile-card.in-sidebar .card-details .name-type .author {
    background: var(--c-black);
    color: var(--c-primary);
    padding: 4px 16px;
    border-radius: 100px;
    font-style: italic;
    font-weight: 500;
}

.profile-card.in-sidebar .card-details .social-media {
    background: var(--c-black);
    border-radius: 100px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}

.profile-card.in-sidebar .card-details .social-media ul {
    display: flex;
    list-style: none;
    padding: 0;
    gap: 20px;
    margin: 0;
}

.profile-card.in-sidebar .card-details .social-media ul li {
    line-height: 0;
}

.profile-card.in-sidebar .card-details .social-media ul li img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}


/* ============================================================
   SUBSCRIBE FORM - Newsletter / Email Subscription Box
   ============================================================ */

.subscribe-form .subscribe-box {
    background: #03095D;
    color: var(--c-white);
    padding: 30px;
    border-radius: 30px;
    position: relative;
}

.dark-mode .subscribe-form .subscribe-box {
    background: #020422;
}

.subscribe-form .subscribe-box:after {
    content: "";
    background-image: url(../images/subscribe-bg-image.png);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 30px;
}

.subscribe-form .subscribe-box .form-control {
    padding: 12px 14px;
}

.subscribe-form .subscribe-box .form-label {
    font-size: 16px;
    font-weight: 300;
}


/* ============================================================
   HOME PAGE 2 - Hero Blog Section (Style 2)
   ============================================================ */

.hero-blog-section.style-2 {
    padding-top: 140px;
    padding-bottom: 40px;
}

.hero-blog-section.style-2 .container {
    position: relative;
}

.hero-blog-section.style-2 .hero-blog-image {
    border-radius: 30px;
    overflow: hidden;
}

.hero-blog-section.style-2 .hero-blog-image img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;
}

.hero-blog-section.style-2 .hero-blog-details {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 200px 40px 40px 40px;
    border-radius: 30px;
    background: linear-gradient(180deg,
            rgba(0, 2, 29, 0) 0%,
            rgba(0, 2, 29, 0.85) 85%,
            rgba(0, 2, 29, 1) 100%);
    margin: 0 12px;
}

.hero-blog-section.style-2 .cate-time-date {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    margin-bottom: 15px;
}

.hero-blog-section.style-2 .category {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #4000FF;
    color: var(--c-white);
    font-size: 14px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 50px;
}

.dark-mode .hero-blog-section.style-2 .category {
    background: #0d0e0e;
    border: 1px solid #6a6a89;
}

.hero-blog-section.style-2 .category img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.hero-blog-section.style-2 .blog-time-date {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hero-blog-section.style-2 .blog-time-date div {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--c-surface-faint);
    font-size: 16px;
}

.hero-blog-section.style-2 .blog-time-date img {
    width: 14px;
    height: 14px;
}

.hero-blog-section.style-2 .learn-more-btn img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.dark-mode .hero-blog-section.style-2 .learn-more-btn img {
    filter: hue-rotate(26deg);
}

.hero-blog-section.style-2 .learn-more-btn a:hover img {
    filter: drop-shadow(2px 4px 6px black);
}


/* ============================================================
   HOME PAGE 2 - Explore Category Section (Style 2)
   ============================================================ */

.explore-category.style-2 {
    background: rgba(255, 255, 255, 20%);
}

.dark-mode .explore-category.style-2 {
    background: transparent;
}

.explore-category.style-2 .category-card {
    background-color: rgba(43, 131, 145, 0.2);
    border-radius: 22px;
    display: block;
    text-decoration: none;
    height: 100%;
    transition: var(--t-transform);
}

.dark-mode .explore-category.style-2 .category-card {
    filter: invert(1);
}

.explore-category.style-2 .category-card:hover {
    transform: translateY(-10px);
}

.explore-category.style-2 .category-card.card-2 {
    background-color: rgba(254, 145, 1, 0.2);
}

.explore-category.style-2 .category-card.card-3 {
    background-color: rgba(248, 123, 255, 0.2);
}

.explore-category.style-2 .category-card.card-4 {
    background-color: rgba(0, 190, 181, 0.2);
}

.explore-category.style-2 .category-card.card-5 {
    background-color: rgba(89, 74, 142, 0.2);
}

.explore-category.style-2 .category-card .category-card-inner {
    padding-top: 20px;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.explore-category.style-2 .category-card strong,
.explore-category.style-2 .category-card span {
    display: block;
    color: var(--c-black);
}

.explore-category.style-2 .category-card .cate-icon {
    border-radius: 22px;
}


/* ============================================================
   HOME PAGE 2 - Blog Section (Style 2) - Large & Small Cards
   ============================================================ */

.blog-section.style-2 .large-blog {
    position: relative;
}

.blog-section.style-2 .large-blog .background-image {
    position: absolute;
    z-index: -1;
    border-radius: 30px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-section.style-2 .large-blog .large-blog-details {
    border: 0px solid var(--c-white);
    background-color: rgba(192, 241, 255, 0.75);
    padding: 20px;
    border-radius: 30px;
    height: 550px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 22px;
}

.dark-mode .blog-section.style-2 .large-blog .large-blog-details,
.dark-mode .blog-section.style-2 .large-blog.card-2 .large-blog-details {
    background-color: rgba(5, 15, 18, 0.75);
    border: 0;
}

.blog-section.style-2 .large-blog.card-2 .large-blog-details {
    background-color: rgba(192, 229, 229, 0.75);
    border: 0;
}

.blog-section.style-2 .large-blog .large-blog-details .cate-time-date {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 15px;
}

.blog-section.style-2 .category {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(255, 255, 255, 0.5);
    color:rgba(0, 0, 0, 0.75);
    font-size: 14px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 50px;
}

.dark-mode .blog-section.style-2 .category {
    background: transparent;
    color: #ffff;
    border: 1px solid #505050;
}

.blog-section.style-2 .category img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.dark-mode .blog-section.style-2 .category img {
    filter: brightness(0) invert(1);
}

.blog-section.style-2 .blog-time-date {
    display: flex;
    align-items: center;
    gap: 16px;
}

.blog-section.style-2 .blog-time-date div {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--c-black);
    font-size: 16px;
}

.dark-mode .blog-section.style-2 .blog-time-date div {
    color: var(--c-white);
}

.blog-section.style-2 .blog-time-date img {
    width: 14px;
    height: 14px;
}

.dark-mode .blog-section.style-2 .blog-time-date img {
    filter: brightness(0) invert(1);
}

.blog-section.style-2 .continue-reading-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.blog-section.style-2 .continue-reading-btn img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    transition: var(--t-transform-slow);
}

.dark-mode .blog-section.style-2 .continue-reading-btn img {
    filter: brightness(0) invert(1);
}

.blog-section.style-2 .continue-reading-btn a:hover img {
    transform: scale(1.1);
}

.blog-section.style-2 .small-blog {
    background-color: #FFDFD2;
    border-radius: 30px;
    position: relative;
    transition: var(--t-transform);
}

.blog-section.style-2 .small-blog:hover {
    transform: translateY(-6px);
}

.blog-section.style-2 .small-blog.card-2 {
    background-color: #dff3ea;
}

.blog-section.style-2 .small-blog.card-3 {
    background-color: #D0DECF;
}

.blog-section.style-2 .small-blog.card-4 {
    background-color: #FFD2D9;
}

.blog-section.style-2 .small-blog.card-5 {
    background-color: #FFE8D5;
}

.blog-section.style-2 .small-blog.card-6 {
    background-color: #C4E5C6;
}

.dark-mode .blog-section.style-2 .small-blog {
    background-color: #4c3a32;
}

.dark-mode .blog-section.style-2 .small-blog.card-2 {
    background-color: #1f1b2e;
}

.dark-mode .blog-section.style-2 .small-blog.card-3 {
    background-color: #162815;
}

.dark-mode .blog-section.style-2 .small-blog.card-4 {
    background-color: #2e0f14;
}

.dark-mode .blog-section.style-2 .small-blog.card-5 {
    background-color: #361f0b;
}

.dark-mode .blog-section.style-2 .small-blog.card-6 {
    background-color: #103412;
}

.blog-section.style-2 .small-blog .blog-img img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 30px;
}

.dark-mode .blog-section.style-2 .small-blog .blog-img img {
    border-radius: 28px;
}

.blog-section.style-2 .small-blog .continue-reading-btn {
    padding: 0 1.5rem;
    position: absolute;
    bottom: 18px;
    width: 100%;
    z-index: 2;
    color: var(--c-white);
}

.blog-section.style-2 .small-blog::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    border-radius: 24px;
}


/* ============================================================
   HOME PAGE 3 - Hero Blog Section (Style 3)
   ============================================================ */

.hero-blog-section.style-3 {
    padding-top: 160px;
    padding-bottom: 40px;
}

.hero-blog-section.style-3 .hero-blog-card {
    position: relative;
}

.hero-blog-section.style-3 .hero-blog-card .blog-bg-img img {
    width: 100%;
    object-fit: cover;
    object-position: top;
    height: 500px;
    border-radius: 30px;
}

.hero-blog-section.style-3 .hero-blog-small-card .blog-bg-img img {
    height: 400px;
}

.hero-blog-section.style-3 .hero-blog-card-2 .blog-bg-img img {
    height: 320px;
}

.hero-blog-section.style-3 .continue-reading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ECF6FF;
    padding: 13px 20px;
    border-radius: 100px;
    margin-top: 14px;
    color: #5F5F5F;
    font-size: 16px;
    position: relative;
}

.dark-mode .hero-blog-section.style-3 .continue-reading {
    background: #ecf6ff0d;
    color: var(--c-dark-text);
}

.hero-blog-section.style-3 .continue-reading img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    transition: var(--t-transform-slow);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
}

.dark-mode .hero-blog-section.style-3 .continue-reading img {
    filter: brightness(0) invert(1);
}

.hero-blog-section.style-3 .hero-blog-small-card .continue-reading {
    margin-top: 6px;
    border: 1px solid rgba(47, 151, 247, 10%);
    background: transparent;
    width: 72%;
    float: right;
}

.hero-blog-section.style-3 .hero-blog-card-2 .continue-reading {
    background: rgba(255, 255, 255, 70%);
}

.home-3 .category {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(54, 127, 247, 10%);
    color: var(--c-black);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 50px;
    margin-bottom: 10px;
}

.dark-mode.home-3 .category {
    background: #0d0e0e;
    border: 1px solid #2b2b3c;
    color: var(--c-dark-text);
}

.home-3 .category img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.dark-mode.home-3 .category img {
    filter: brightness(0) invert(1);
}

.hero-blog-section.style-3 .hero-blog-card .blog-details {
    background: var(--c-white);
    padding: 30px;
    border-radius: 30px;
    position: absolute;
    bottom: 0;
    --nb-r: 14px;
    --nb-w: 152px;
}

.dark-mode .hero-blog-section.style-3 .hero-blog-card .blog-details {
    background: var(--c-dark-surface);
}

.hero-blog-section.style-3 .hero-blog-card .blog-details h2,
.web-story .web-story-slider .web-story-slid .story-card h3 {
    font-size: 25px;
}

.dark-mode .hero-blog-section.style-3 .hero-blog-card-2 .blog-details h2 {
    color: #000;
}

.hero-blog-section.style-3 .hero-blog-card-2 .blog-details {
    background: transparent;
    top: 0;
    bottom: 0;
    margin: auto;
    height: fit-content;
    max-width: 63%;
}

.dark-mode .hero-blog-section.style-3 .hero-blog-card-2 .blog-details {
    background: transparent;
}

.dark-mode .hero-blog-section.style-3 .hero-blog-card-2 .blog-details h3 {
    color: var(--c-black);
}

.hero-blog-section.style-3 .category-badge {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.hero-blog-section.style-3 .category-badge a {
    text-decoration: none;
    display: block;
    background: rgba(255, 255, 255, 68%);
    border: 1px solid var(--c-white);
    color: var(--c-black);
    font-weight: 700;
    font-size: 14px;
    padding: 14px;
    border-radius: 22px;
    width: 130px;
    text-align: center;
}

.dark-mode .hero-blog-section.style-3 .category-badge a {
    background: #181818;
    color: #ffff;
    border-color: #464545;
}

.hero-blog-section.style-3 .category-badge a:hover {
    background: var(--c-white);
}

.dark-mode .hero-blog-section.style-3 .category-badge a:hover {
    background: var(--c-dark-text);
    color: #000;
}

.hero-blog-section.style-3 .category-badge a img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
    margin: auto;
    margin-bottom: 4px;
}

.hero-blog-section.style-3 .explore-category {
    background: linear-gradient(175deg, #cbb6f6, #e6dcff);
    border-radius: 20px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--c-white);
}

.dark-mode .hero-blog-section.style-3 .explore-category {
    background: linear-gradient(175deg, #352f42, #100f12);
    border-color: #464545;
    border-width: 2px;
}

.hero-blog-section.style-3 .explore-category .icons img {
    width: 140px;
    height: 96px;
    object-fit: contain;
    mix-blend-mode: luminosity;
}

.hero-blog-section.style-3 .explore-category .explore-all-category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.hero-blog-section.style-3 .explore-category .explore-all-category span {
    font-weight: 700;
    font-size: 20px;
}

.hero-blog-section.style-3 .explore-category .explore-all-category img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.dark-mode .hero-blog-section.style-3 .explore-category .explore-all-category img {
    filter: brightness(0) invert(1);
}

.dark-mode .hero-blog-section.style-3 .hero-blog-card-2 .continue-reading {
    background: #1e1e1e;
}

.hero-blog-section.style-3 .card-image img {
    border-radius: 30px;
    width: 100%;
    height: 100%;
}


/* ============================================================
   HOME PAGE 3 - Web Story Section
   ============================================================ */

.web-story {
    margin-top: -17.5rem;
}

.web-story .web-story-slider {
    overflow: hidden;
}

.web-story .web-story-slider .web-story-slid .story-card .continue-reading {
    background: transparent;
    color: var(--c-white);
    width: 66%;
    float: right;
}

.web-story .web-story-slider .web-story-slid .story-card.continue-reading img {
    position: unset;
}

.web-story .web-story-slider .web-story-slid .story-card {
    position: relative;
    height: 597px;
}

.web-story .web-story-slider .web-story-slid .story-card:after {
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
}

.web-story .web-story-slider .web-story-slid .story-card .strory-img-slid {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
}

.web-story .web-story-slider .web-story-slid .story-card .story-overlay {
    position: absolute;
    bottom: 0;
    color: var(--c-white);
    padding: 20px;
    z-index: 1;
}

.web-story .web-story-slider .slick-slider .slick-track,
.web-story .web-story-slider .slick-slider .slick-list {
    border-radius: 30px;
}

.web-story .web-story-slider .slick-next-arrow {
    position: absolute;
    right: 12px;
    top: 0;
    bottom: 0;
    width: 46px;
    background-color: transparent !important;
    height: 46px;
    margin: auto;
}

.web-story .slick-dots {
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
    padding: 0 20px;
    display: flex !important;
    gap: 6px;
    height: 5px;
    box-sizing: border-box;
}

.web-story .slick-dots li {
    flex: 1;
    height: 5px;
    background: var(--c-white);
    border-radius: 10px;
    overflow: hidden;
    margin: 0;
}

.web-story .slick-dots li button {
    display: none;
}

.web-story .slick-dots li.slick-active {
    background: var(--c-white);
    position: relative;
}

.web-story .slick-dots li.slick-active::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #009DFF;
    animation: progressBar 5s linear forwards;
}

.web-story .slick-dots li.visited {
    background: var(--c-white);
}

@keyframes progressBar {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}


/* ============================================================
   HOME PAGE 3 - Blog Section (Style 3) - Read All Blog Cards
   ============================================================ */

.blog-section.style-3 .blog-bg {
    background: #E7FAFF;
    padding: 20px;
    border-radius: 30px;
    margin-bottom: 20px;
}

.dark-mode .blog-section.style-3 .blog-bg {
    background: #186478;
}

.blog-section.style-3 .blog-bg.card-2 {
    background: #FFF0EA;
}

.dark-mode .blog-section.style-3 .blog-bg.card-2 {
    background: #5c2712;
}

.blog-section.style-3 .blog-bg.card-3 {
    background: #EAFFEB;
}

.dark-mode .blog-section.style-3 .blog-bg.card-3 {
    background: #0d4010;
}

.blog-section.style-3 .blog-bg .blog-img {
    position: relative;
}

.blog-section.style-3 .blog-bg .nebo {
    border-radius: 30px;
    --nb-w: 136px;
    --nb-r: 24px;
    height: 400px;
    width: 100%;
    object-fit: cover;
}

.blog-section.style-3 .blog-bg .blog-img .category {
    position: absolute;
    right: 16px;
    top: 14px;
    background: var(--c-white);
    font-size: 14px;
}

.dark-mode .blog-section.style-3 .blog-bg .blog-img .category {
    border-color: #939393;
    background: transparent;
}

.blog-section.style-3 .blog-bg.card-2 .category {
    left: 0;
    right: auto;
}

.blog-section.style-3 .blog-time-date {
    font-size: 16px;
}


/* ============================================================
   HOME PAGE 4 - Hero Banner Slider (Style 4)
   ============================================================ */

.hero-section.style-4 {
    padding-top: 160px;
    padding-bottom: 40px;
    background: linear-gradient(180deg, var(--c-white)00 0%, var(--c-white) 100%);
}

.dark-mode .hero-section.style-4 {
    background: var(--c-black);
}

.hero-section.style-4 .blog-slid {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.hero-section.style-4 .blog-slid .slider-card {
    position: relative;
    flex: 0.8;
    height: 450px;
    border-radius: 30px;
    overflow: hidden;
    cursor: pointer;
    transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s ease;
}

.hero-section.style-4 .blog-slid .slider-card.active {
    flex: 5;
    cursor: auto;
}

.hero-section.style-4 .slider-img {
    height: 100%;
}

.hero-section.style-4 .slider-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.hero-section.style-4 .slider-card:hover .slider-img img {
    transform: scale(1.1);
}

.hero-section.style-4 .slider-card.active .slider-img img {
    transform: scale(1.05);
}

.hero-section.style-4 .slide-overly {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    border-radius: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s;
    z-index: 2;
}

.hero-section.style-4 .slider-card.active .slide-overly {
    opacity: 1;
    visibility: visible;
}

.hero-section.style-4 .slider-card.active::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 2, 29, 0) 0%, rgba(0, 2, 29, 1) 90%);
    border-radius: 30px;
    z-index: 1;
}

.hero-section.style-4 .cate-time-date {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    margin-bottom: 15px;
}

.hero-section.style-4 .category {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--c-white);
    color: var(--c-black);
    font-size: 14px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 50px;
}

.dark-mode .hero-section.style-4 .category {
    background: #0d0e0e;
    border: 1px solid #6a6a89;
    color: #ffff;
}

.hero-section.style-4 .category img {
    width: 16px;
    height: 16px;
}

.hero-section.style-4 .blog-time-date {
    display: flex;
    gap: 16px;
}

.hero-section.style-4 .blog-time-date div {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #eee;
    font-size: 16px;
}

.hero-section.style-4 .blog-time-date img {
    width: 14px;
}

.hero-section.style-4 .learn-more-btn img {
    width: 134px;
}

.hero-section.style-4 .process-bar-arrow {
    gap: 30px;
}

.hero-section.style-4 .slider-progress {
    width: 100%;
    height: 4px;
    background: rgba(64, 0, 255, 0.3);
}

.dark-mode .hero-section.style-4 .slider-progress {
    background: #646464;
}

.hero-section.style-4 .progress-bar {
    height: 100%;
    width: 0;
    background: #4000FF;
    transition: width 0.4s ease;
}

.dark-mode .hero-section.style-4 .progress-bar {
    background: #dddddd;
}

.hero-section.style-4 .custom-nav {
    gap: 20px;
}

.hero-section.style-4 .custom-nav button {
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0.6;
    transition: 0.3s;
    padding: 0;
    border-radius: 100px;
}

.dark-mode .hero-section.style-4 .custom-nav button {
    filter: brightness(0) invert(1);
    opacity: 1;
}

.hero-section.style-4 .custom-nav button:hover {
    opacity: 1;
}

.hero-section.style-4 .custom-nav button:hover,
.hero-section.style-4 .custom-nav button:active {
    background-color: transparent !important;
}

.hero-section.style-4 .prev-arrow img {
    transform: rotate(180deg);
    width: 30px;
}

.hero-section.style-4 .next-arrow img {
    width: 30px;
}


/* ============================================================
   HOME PAGE 4 - Category Auto Slider
   ============================================================ */

.category-auto-slider {
    background: var(--c-white);
}

.dark-mode .category-auto-slider {
    background: var(--c-black);
}

.category-auto-slider .category-auto-slid span {
    font-weight: 500;
    font-size: 24px;
    display: block;
    margin: 0 20px;
    opacity: 0.8;
}


/* ============================================================
   HOME PAGE 4 - Blog Cards (Style 4)
   ============================================================ */

.blog-section.style-4 .blog-cards {
    transition: var(--t-transform);
}

.blog-section.style-4 .blog-cards:hover {
    transform: translateY(-12px);
}

.blog-section.style-4 .blog-cards .blog-with-cate {
    position: relative;
}

.blog-section.style-4 .blog-cards .category {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--c-white);
    color: var(--c-black);
    font-size: 14px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 50px;
    position: absolute;
    top: 12px;
    left: 12px;
}

.blog-section.style-4 .blog-cards .category img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.blog-section.style-4 .blog-cards .author-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.blog-section.style-4 .blog-cards .author {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 50px;
    background: var(--c-ink);
    color: var(--c-white);
}

.dark-mode .blog-section.style-4 .blog-cards .author {
    background: #0d0e0e;
    border: 1px solid #626262;
}

.blog-section.style-4 .blog-cards .author img {
    border-radius: 50%;
    width: 30px;
    height: 30px;
}

.blog-section.style-4 .blog-cards .blog-time-date {
    display: flex;
    align-items: center;
    gap: 16px;
}

.blog-section.style-4 .blog-cards .blog-time-date div {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--c-black);
    font-size: 16px;
}

.dark-mode .blog-section.style-4 .blog-cards .blog-time-date div {
    color: var(--c-white);
}

.blog-section.style-4 .blog-cards .blog-time-date img {
    width: 16px;
    height: 16px;
}

.dark-mode .blog-section.style-4 .blog-cards .blog-time-date img {
    filter: invert(1);
}

.blog-section.style-4 .blog-cards .learn-more {
    position: absolute;
    bottom: 14px;
    right: 14px;
}

.blog-section.style-4 .blog-cards .learn-more img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    transition: var(--t-transform-slow);
}

.dark-mode .blog-section.style-4 .blog-cards .learn-more img {
    filter: brightness(0) invert(1);
}

.blog-section.style-4 .blog-cards .learn-more a:hover img {
    transform: scale(1.1);
}

.blog-section.style-4 .blog-cards.card-2 .learn-more {
    top: 16px;
    bottom: auto;
}

.blog-section.style-4 .blog-cards h3 {
    font-size: 30px;
}

.blog-section.style-4 .blog-cards .blog-img {
    border-radius: 36px;
}

.blog-section.style-4 .blog-cards .nebo {
    --nb-r: 31px;
    --nb-w: 20px;
    object-fit: cover;
    height: 390px;
    width: 100%;
}


/* ============================================================
   HOME PAGE 4 - Music & Sound Section
   ============================================================ */

.music-and-sound {
    background: var(--c-white);
}

.dark-mode .music-and-sound {
    background: var(--c-black);
}


/* ============================================================
   HOME PAGE 4 - Travel Tips Section
   ============================================================ */

.travel-tips {
    background-color: #D3D4E2;
    padding: 40px 0;
}

.dark-mode .travel-tips {
    background: var(--c-dark-nav);
}

.travel-tips .blog-section.style-4 .blog-cards {
    background: rgba(255, 255, 255, 55%);
    border-radius: 40px;
    padding: 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.dark-mode .travel-tips .blog-section.style-4 .blog-cards {
    background: var(--c-black);
}

.travel-tips .learn-more {
    bottom: 10px;
    right: 10px;
}

.travel-tips .blog-section.style-4 .blog-cards.card-2 .learn-more {
    top: 13px;
}


/* ============================================================
   HOME PAGE 4 - Explore Category (Style 4)
   ============================================================ */

.explore-category.style-4 .explore-item {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    display: block;
    height: 250px;
    text-decoration: none;
}

.explore-category.style-4 .explore-img img {
    position: absolute;
    inset: 0;
    object-fit: cover;
    object-position: center;
    transition: 0.4s;
    width: 100%;
    height: 100%;
}

.explore-category.style-4 .explore-content {
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 5px;
    z-index: 2;
    color: var(--c-white);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transform: translateY(0);
    transition: 0.35s ease;
    background: rgba(255, 255, 255, 93%);
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    padding: 12px;
}

.dark-mode .explore-category.style-4 .explore-content {
    color: var(--c-white);
    background: var(--c-black);
}

.explore-category.style-4 .explore-content strong {
    margin: 0;
    font-size: 18px;
    color: var(--c-heading-soft);
}

.explore-category.style-4 .explore-content span {
    font-size: 16px;
    color: var(--c-muted);
    font-weight: 500;
}

.dark-mode .explore-category.style-4 .explore-content strong,
.dark-mode .explore-category.style-4 .explore-content span {
    color: var(--c-white);
}

.explore-category.style-4 .explore-link {
    display: none;
    font-size: 14px;
}

.explore-category.style-4 .explore-item:hover .explore-img img {
    transform: scale(1.1);
}

.explore-category.style-4 .explore-item:hover .explore-content {
    transform: translateY(-10px);
}

.explore-category.style-4 .explore-item:hover .explore-link {
    display: block;
}


/* ============================================================
   HOME PAGE 5 - Hero Section (Style 5)
   ============================================================ */

.hero-section.style-5 {
    position: relative;
    height: 900px;
    display: flex;
    align-items: center;
}

.dark-mode .hero-section.style-5:before {
    content: "";
    background-color: rgba(0, 0, 0, 64%);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-section.style-5 .hero-bg-img {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.hero-section.style-5 .category {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--c-white);
    color: var(--c-black);
    font-size: 14px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 50px;
}

.dark-mode .hero-section.style-5 .category {
    border: 1px solid #6a6a89;
    background: transparent;
    color: #ffff;
}

.hero-section.style-5 .category img {
    width: 16px;
    height: 16px;
}

.dark-mode .hero-section.style-5 .category img {
    filter: brightness(0) invert(1);
}

.hero-section.style-5 .blog-time-date {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hero-section.style-5 .blog-time-date div {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--c-black);
    font-size: 16px;
}

.dark-mode .hero-section.style-5 .blog-time-date div {
    color: var(--c-white);
}

.hero-section.style-5 .blog-time-date img {
    width: 14px;
    height: 14px;
}

.dark-mode .hero-section.style-5 .blog-time-date img {
    filter: invert(1);
}

.hero-section.style-5 .cate-time-date {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    margin-bottom: 15px;
}

.hero-section.style-5 .slider-card {
    background: rgba(255, 255, 255, 80%);
    padding: 26px 26px 8px 26px;
    border-radius: 30px;
    margin-bottom: 1.5rem;
    border: 4px solid var(--c-white);
}

.dark-mode .hero-section.style-5 .slider-card {
    background-color: rgba(0, 0, 0, 80%);
    border: 4px solid #686868;
}

.hero-section.style-5 .btn {
    color: var(--c-black);
    background: rgba(255, 255, 255, 80%);
    font-weight: 600;
    padding: 12px 16px;
}


.dark-mode .hero-section.style-5 .btn {
    background-color: rgba(0, 0, 0, 80%);
    border: 1px solid #c5c5c5;
    color: #bdbdbd;
}

.hero-section.style-5 .btn:hover {
    background: var(--c-white) !important;
    color: var(--c-black) !important;
}

.hero-section.style-5 .btn img {
    border: 1px solid var(--c-primary);
    border-radius: 100px;
    padding: 5px;
    width: 40px;
    height: 40px;
    display: inline-block;
}

.dark-mode .hero-section.style-5 .btn img {
    filter: brightness(0) invert(1);
}

.hero-section.style-5 .btn:hover img {
    filter: none;
}

.hero-section.style-5 .slick-dots {
    bottom: 30px;
    text-align: left;
    width: auto;
}

.hero-section.style-5 .slick-dots li {
    padding: 0;
    background: rgba(255, 255, 255, 50%);
    width: 64px;
    height: 10px;
    border-radius: 100px;
}

.dark-mode .hero-section.style-5 .slick-dots li {
    background: rgba(255, 255, 255, 40%);
}

.hero-section.style-5 .slick-dots .slick-active {
    background: var(--c-white);
}

.dark-mode .hero-section.style-5 .slick-dots .slick-active {
    background: rgba(255, 255, 255, 0.70);
}

.hero-section.style-5 .slick-dots li button {
    width: 64px;
    height: 10px;
    border-radius: 100px;
}

.hero-section.style-5 button:hover {
    background-color: var(--c-white) !important;
}

.hero-section.style-5 .slick-dots li button:before {
    display: none;
}


/* ============================================================
   HOME PAGE 5 - Explore Category (Style 5)
   ============================================================ */

.explore-category.style-5 {
    background: var(--c-surface-alt);
    border-radius: 100px;
    margin-top: -120px;
    padding: 40px 0;
}

.dark-mode .explore-category.style-5 {
    background: #0f0f18;
    position: relative;
    z-index: 1;
}

.explore-category.style-5 .category-type {
    background: rgba(255, 255, 255, 80%);
    padding: 10px 20px 10px 10px;
    border: 2px solid var(--c-white);
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1.5rem;
    text-decoration: none;
    transition: var(--t-transform);
}

.explore-category.style-5 .category-type:hover {
    background: var(--c-white);
    transform: translateY(-6px);
}

.explore-category.style-5 .category-type img {
    width: 78px;
    min-width: 78px;
    height: 78px;
    border-radius: 138px;
}

.explore-category.style-5 .category-name {
    font-weight: 700;
    color: var(--c-heading-soft);
    display: block;
}

.explore-category.style-5 .category-article {
    color: var(--c-muted);
}

.explore-category.style-5 .number-circle {
    background-color: rgba(54, 127, 247, 20%);
    color: var(--c-heading-soft);
    font-weight: 700;
    width: 78px;
    min-width: 78px;
    height: 78px;
    border-radius: 138px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.dark-mode .explore-category.style-5 .number-circle {
    color: #fff;
}

.explore-category.style-5 .story-card {
    position: relative;
    height: 510px;
}

.explore-category.style-5 .story-card:after {
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
}

.explore-category.style-5 .story-card .strory-img-slid {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
    object-position: center 33%;
}

.explore-category.style-5 .story-card .story-overlay {
    position: absolute;
    bottom: 0;
    color: var(--c-white);
    padding: 20px;
    z-index: 1;
}

.explore-category.style-5 .continue-reading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ECF6FF;
    padding: 13px 20px;
    border-radius: 100px;
    margin-top: 14px;
    color: #5F5F5F;
    font-size: 16px;
    position: relative;
}

.explore-category.style-5 .continue-reading img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    transition: var(--t-transform-slow);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
}

.explore-category.style-5 .category {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(238, 238, 244, 20%);
    color: var(--c-white);
    font-size: 14px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 50px;
}

.dark-mode .explore-category.style-5 .category {
    background: #0d0e0e;
    border: 1px solid #626262;
}

.explore-category.style-5 .category img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.dark-mode .explore-category.style-5 .category img {
    filter: brightness(0) invert(1);
}

.explore-category.style-5 .story-card .continue-reading {
    background: transparent;
    color: var(--c-white);
    width: 66%;
    float: right;
}

.explore-category.style-5 .border-bottom-row {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 46%);
    padding: 14px;
    border-radius: 26px;
    margin-bottom: 16px;
    border: 1px solid var(--c-white);
}

.explore-category.style-5 .border-bottom-row .category {
    background: var(--c-surface-alt);
    color: var(--c-black);
}

.dark-mode .explore-category.style-5 .border-bottom-row .category {
    background: var(--c-dark-surface-2);
    color: var(--c-dark-text);
}

.explore-category.style-5 .border-bottom-row .right-side {
    width: 35%;
}

.explore-category.style-5 .border-bottom-row .left-side {
    width: 65%;
}

.explore-category.style-5 .trending-post-right a {
    text-decoration: none;
}

.explore-category.style-5 .trending-post-right h3,
.explore-category.style-5 .trending-post-right h4 {
    font-weight: 600;
    font-size: 18px;
}

.explore-category.style-5 .trending-time-date {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 14px;
    border-top: 2px solid rgba(204, 204, 204, 21%);
    padding-top: 1rem;
}

.explore-category.style-5 .trending-time-date div {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--c-text-soft);
}

.dark-mode .explore-category.style-5 .trending-time-date div {
    filter: brightness(0) invert(1);
}

.explore-category.style-5 .trending-time-date img {
    width: 14px;
    height: 14px;
}

.explore-category.style-5 .trending-post-thum {
    background: #352EC0;
    border-radius: 14px;
}

.explore-category.style-5 .trending-post-thum-2 {
    background: #004104;
}

.explore-category.style-5 .trending-post-thum-3 {
    background: #30003D;
}

.explore-category.style-5 .trending-post-thum-4 {
    background: #410001;
}

.explore-category.style-5 .trending-post-thum img {
    mix-blend-mode: luminosity;
    border-radius: 12px;
}

.explore-category.style-5 .border-bottom-row:hover .trending-post-thum img {
    mix-blend-mode: normal;
}

.explore-category.style-5 .btn {
    color: var(--c-primary);
}


/* ============================================================
   HOME PAGE 5 - New Today Blog Cards
   ============================================================ */

.new-today-blog-card {
    position: relative;
    margin-bottom: 1rem;
}

.new-today-blog-card .today-blog-card-image {
    border-radius: 30px;
    overflow: hidden;
}

.new-today-blog-card .today-blog-card-image img {
    width: 100%;
    height: 246px;
    object-fit: cover;
    display: block;
    transition: var(--t-transform-slow);
}

.new-today-blog-card:hover .today-blog-card-image img {
    transform: scale(1.05);
}

.new-today-blog-card .today-blog-card-details {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 14px 18px 14px;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(0, 2, 29, 0) 0%, rgba(0, 2, 29, 0.85) 85%, rgba(0, 2, 29, 1) 100%);
}

.new-today-blog-card .cate-time-date {
    display: flex;
    align-items: center;
    gap: 30px;
}

.new-today-blog-card .category {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(238, 238, 244, 20%);
    color: var(--c-white);
    font-size: 14px;
    font-weight: 600;
    border-radius: 50px;
}

.new-today-blog-card .category img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.new-today-blog-card .blog-time-date {
    display: flex;
    align-items: center;
    gap: 16px;
}

.new-today-blog-card .blog-time-date div {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--c-surface-faint);
    font-size: 16px;
}

.new-today-blog-card .blog-time-date img {
    width: 14px;
    height: 14px;
}

.new-today-blog-card .learn-more-btn img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}


/* ============================================================
   HOME PAGE 5 - Blog Section (Style 5) - Read All Blogs
   ============================================================ */

.blog-section.style-5 {
    padding-top: 50px;
}

.blog-section.style-5 .small-card .blog-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.blog-section.style-5 .big-card .blog-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-section.style-5 .blog-card {
    background: #F0FFE0;
    border-radius: 40px;
    padding: 14px;
    height: 100%;
}

.dark-mode .blog-section.style-5 .blog-card {
    background: #2c3a1d;
}

.blog-section.style-5 .blog-card.card-2 {
    background: #EEEEFF;
}

.dark-mode .blog-section.style-5 .blog-card.card-2 {
    background: #141436;
}

.blog-section.style-5 .blog-card.card-3 {
    background: #FFF2E9;
}

.dark-mode .blog-section.style-5 .blog-card.card-3 {
    background: #3e220f;
}

.blog-section.style-5 .blog-card.card-4 {
    background: #EEF1F4;
}

.dark-mode .blog-section.style-5 .blog-card.card-4 {
    background: #112334;
}

.blog-section.style-5 .blog-card.card-5 {
    background: #E4FFC8;
}

.dark-mode .blog-section.style-5 .blog-card.card-5 {
    background: #1f340a;
}

.blog-section.style-5 .blog-card.card-6 {
    background: #FFE0F1;
}

.dark-mode .blog-section.style-5 .blog-card.card-6 {
    background: #42132d;
}

.blog-section.style-5 .blog-card.card-7 {
    background: #FFF2E9;
}

.dark-mode .blog-section.style-5 .blog-card.card-7 {
    background: #341b09;
}

.blog-section.style-5 .blog-card.card-8 {
    background: #D8FFDD;
}

.dark-mode .blog-section.style-5 .blog-card.card-8 {
    background: #0e2e12;
}

.blog-section.style-5 .blog-card .blog-with-cate {
    position: relative;
}

.blog-section.style-5 .blog-card .category {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--c-white);
    color: var(--c-black);
    font-size: 14px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 50px;
    position: absolute;
    top: 10px;
    left: 10px;
}

.blog-section.style-5 .blog-card .category img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.blog-section.style-5 .blog-card .author-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    gap: 1rem;
}

.blog-section.style-5 .blog-card .author {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 50px;
    background: var(--c-ink);
    color: var(--c-white);
}

.dark-mode .blog-section.style-5 .blog-card .author {
    background: transparent;
    border: 1px solid #bbbbbb;
}

.blog-section.style-5 .blog-card .author img {
    border-radius: 50%;
    width: 30px;
    height: 30px;
}

.blog-section.style-5 .blog-card .blog-time-date {
    display: flex;
    align-items: center;
    gap: 16px;
}

.blog-section.style-5 .blog-card .blog-time-date div {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--c-black);
    font-size: 16px;
}

.dark-mode .blog-section.style-5 .blog-card .blog-time-date div {
    color: var(--c-white);
}

.blog-section.style-5 .blog-card .blog-time-date img {
    width: 16px;
    height: 16px;
}

.dark-mode .blog-section.style-5 .blog-card .blog-time-date img {
    filter: invert(1);
}

.blog-section.style-5 .blog-card .blog-img {
    border-radius: 20px;
}

.blog-section.style-5 .blog-card .btn {
    color: var(--c-primary);
    padding: 8px 14px;
    font-size: 16px;
}

.dark-mode .blog-section.style-5 .blog-card .btn {
    background: #1c1c1c !important;
    color: var(--c-dark-text);
}

.dark-mode .blog-section.style-5 .blog-card .btn img {
    filter: brightness(0) invert(1);
}

.blog-section.style-5 .blog-card .blog-with-cate .continue-reading {
    position: absolute;
    bottom: 10px;
    right: 10px;
}


/* ============================================================
   SINGLE BLOG POST - Hero, Content, Author, Comments
   ============================================================ */

.single-blog {
    padding-top: 150px;
}

.single-blog .single-blog-card {
    position: relative;
    height: 510px;
    border-radius: 30px;
    overflow: hidden;
}

.single-blog .single-blog-card .blog-card-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    position: absolute;
    z-index: -1;
}

.single-blog .single-blog-overly {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    border-radius: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    z-index: 2;
}

.single-blog .single-blog-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 2, 29, 0) 0%, rgba(0, 2, 29, 1) 90%);
    border-radius: 30px;
    z-index: 1;
}

.single-blog .cate-time-date {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    margin-bottom: 15px;
}

.single-blog .category {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--c-white);
    color: var(--c-black);
    font-size: 14px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 50px;
}

.dark-mode .single-blog .category {
    background: #0d0e0e;
    border: 1px solid #606060;
    color: #fff;
}

.single-blog .category img {
    width: 16px;
    height: 16px;
}

.dark-mode .single-blog .category img {
    filter: brightness(0) invert(1);
}

.single-blog .post-time-date {
    display: flex;
    gap: 16px;
}

.dark-mode .single-blog .position-bagde .post-time-date {
        filter: invert(1);
}

.single-blog .post-time-date div {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #eee;
    font-size: 16px;
}

.dark-mode .single-blog .post-time-date div {
    filter: brightness(0) invert(1);
}

.single-blog .post-time-date img {
    width: 14px;
}

.single-blog .learn-more-btn img {
    width: 70px;
}

.single-blog .post-title h2 {
    font-size: 30px;
}

.single-blog .author {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    padding: 4px 10px;
    border-radius: 50px;
    background: var(--c-white);
    color: var(--c-black);
}

.dark-mode .single-blog .author {
    background: #0d0e0e;
    border: 1px solid #606060;
    color: #fff;
}

.single-blog .author img {
    border-radius: 50%;
    width: 26px;
    height: 26px;
}

.single-blog-content .blog-inner-img {
    width: 100%;
    height: 300px;
    border-radius: 22px;
    object-fit: cover;
    margin-bottom: 1rem;
    margin-top: 0.5rem;
}

.single-blog-content .height-small {
    height: 245px;
}

.single-blog-content .height-big {
    height: 340px;
}

.single-blog-content ul,
.single-blog-content ol {
    padding-left: 1.4rem;
}

.single-blog-content ul li,
.single-blog-content ol li {
    margin-bottom: 0.5rem;
}

.single-blog-content ul li::marker,
.single-blog-content ol li::marker {
    color: var(--c-primary);
}

.single-blog-content .testimonial {
    background: #F5F5F5;
    border: 1px solid #D1E2FF;
    border-radius: 22px;
    padding: 22px;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
    font-style: italic;
}

.dark-mode .single-blog-content .testimonial {
    background: var(--c-dark-surface);
    border-color: var(--c-dark-border);
}

.tags ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    gap: 10px;
}

.tags ul li a {
    background-color: var(--c-white);
    border: 1px solid var(--c-border-soft);
    border-radius: 12px;
    padding: 8px 20px;
    text-transform: capitalize;
    color: var(--c-nav);
    display: block;
    text-decoration: none;
    font-weight: 600;
}

.tags ul li a:hover {
    background-color: var(--c-border-soft);
}

.single-blog-content .follow-us ul {
    list-style: none;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
}

.single-blog-content .follow-us ul li {
    margin: 0;
}

.single-blog-content .follow-us ul img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    transition: var(--t-transform);
}

.dark-mode .single-blog .blog-section.style-3 .blog-time-date .time,
.dark-mode .single-blog .blog-section.style-3 .blog-time-date .date {
    filter: brightness(0) invert(1);
}


/* ============================================================
   SINGLE BLOG POST - Author Card
   ============================================================ */

.auther-card {
    background: #F8E3FF;
    padding: 18px 18px 0px 18px;
    border-radius: 30px;
    margin-block: 1.5rem;
    position: relative;
    overflow: hidden;
}

.dark-mode .auther-card {
    background: #6f4d7a;
}

.dark-mode .auther-card strong {
    color: var(--c-black);
}

.auther-card .blur-circle {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 80px;
}

.auther-card .blur-circle-1 {
    background: #6631FF;
    left: 0;
    top: -91px;
    opacity: 0.2;
    filter: blur(70px);
}

.auther-card .blur-circle-2 {
    background: #FFDE89;
    left: 54%;
    top: -91px;
    opacity: 0.54;
    filter: blur(50px);
}

.auther-card .blur-circle-3 {
    background: #EB72FF;
    right: 0;
    bottom: 0;
    filter: blur(58px);
}

.auther-card:before {
    content: "";
    background: rgba(255, 255, 255, 33%);
    width: 100%;
    height: 87px;
    position: absolute;
    bottom: 0;
    right: 0;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
}

.auther-card .author-bagde {
    background: var(--c-white);
    color: var(--c-primary);
    border-radius: 100px;
    padding: 4px 14px;
    font-style: italic;
}

.auther-card .author-image {
    width: 100%;
    height: 265px;
    object-fit: cover;
    object-position: top;
}


/* ============================================================
   SINGLE BLOG POST - Share This Box
   ============================================================ */

.share-this {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #F7F7F7;
    padding: 15px 20px;
    border-radius: 16px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.dark-mode .share-this {
    background: var(--c-dark-surface);
}

.share-this ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    gap: 10px;
    padding: 0;
    margin: 0;
}

.share-this ul li a {
    display: flex;
    width: 35px;
    height: 35px;
    align-items: center;
    justify-content: center;
    background: var(--c-white);
    border-radius: 8px;
    transition: 0.3s;
}

.dark-mode .share-this ul li a,
.dark-mode .share-this .copy-btn {
    background: var(--c-dark-surface-2);
}

.dark-mode .share-this .copy-btn {
    color: var(--c-dark-text);
}

.dark-mode .share-this .copy-btn img,
.dark-mode .share-this ul li a img {
    filter: brightness(0) invert(1);
}

.dark-mode .share-this ul li a:hover {
    background: var(--c-dark-elev);
}

.share-this ul li a:hover {
    background: #e0e0e0;
}

.share-this ul li img {
    width: 18px;
    height: 18px;
}

.share-this .copy-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--c-white);
    color: #0D0D0D;
    border: none;
    padding: 8px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    transition: 0.3s;
}

.share-this .copy-btn img {
    width: 16px;
}


/* ============================================================
   SINGLE BLOG POST - Post Navigation (Prev / Next)
   ============================================================ */

.single-blog-content .post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-block: 22px;
}

.single-blog-content .post-card {
    border: 1px solid var(--c-border-soft);
    padding: 20px;
    border-radius: 24px;
    text-decoration: none;
}

.dark-mode .single-blog-content .post-card {
    border: 1px solid var(--c-dark-border-strong);
}

.single-blog-content .post-card:hover {
    background-color: #F7F7F7;
}

.dark-mode .single-blog-content .post-card:hover {
    background-color: var(--c-black);
}

.single-blog-content .nav-label {
    color: var(--c-primary);
    margin-bottom: 14px;
    font-size: 16px;
    font-weight: 600;
}

.dark-mode .single-blog-content .nav-label,
.dark-mode .post-info span {
    color: var(--c-white);
}

.dark-mode .single-blog-content .nav-label img,
.dark-mode .single-blog-content .post-info span img {
    filter: brightness(0) invert(1);
}

.single-blog-content .post-info {
    display: flex;
    gap: 15px;
    align-items: center;
}

.post-info .post-thumb {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    object-fit: cover;
}

.post-info span {
    font-size: 14px;
    color: var(--c-text-soft);
}

.single-blog-content .post-info h4 {
    font-size: 16px;
    margin-bottom: 0px;
    font-weight: 600;
}

.single-blog-content .post-info p {
    font-size: 13px;
    color: #777;
    margin: 5px 0 0;
}


/* ============================================================
   SINGLE BLOG POST - Comments Section & Form
   ============================================================ */

.single-blog-content .comments-section {
    background: #F9F9F9;
    padding: 30px;
    border-radius: 30px;
}

.dark-mode .single-blog-content .comments-section {
    background: var(--c-black);
    border: 1px solid var(--c-dark-border-strong);
}

.single-blog-content .comment {
    display: flex;
    gap: 24px;
    background: var(--c-white);
    padding: 20px;
    border-radius: 30px;
    margin-bottom: 15px;
}

.dark-mode .single-blog-content .comment {
    background: var(--c-dark-surface);
}

.single-blog-content .comment img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.single-blog-content .comment-content h4 {
    font-size: 18px;
    font-weight: 600;
    color: #0D0D0D;
}

.single-blog-content .comment-content span {
    font-size: 16px;
    color: #7D7575;
    margin-left: 10px;
    font-weight: 400;
}

.single-blog-content .comment-content p {
    font-size: 16px;
    color: #333;
}

.single-blog-content .reply-btn {
    background: var(--c-border-soft);
    color: var(--c-black);
    font-size: 14px;
    border: none;
    padding: 6px 14px;
    border-radius: 100px;
    cursor: pointer;
}

.single-blog-content .comment-form {
    margin-top: 20px;
}

.single-blog-content .form-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 15px;
}

.single-blog-content .comment-form input,
.single-blog-content .comment-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #DACEFF;
    border-radius: 10px;
    outline: none;
    color: #808080;
    font-size: 14px;
}

.dark-mode .single-blog-content .comment-form input,
.dark-mode .single-blog-content .comment-form textarea {
    background: var(--c-dark-input);
    border-color: var(--c-dark-border-strong);
    color: var(--c-dark-text);
}

.single-blog-content .comment-form textarea {
    height: 120px;
    resize: none;
    margin-bottom: 15px;
}

.single-blog .custom-border-bottom {
    border-bottom: 1px solid;
}

.single-blog .custom-border-bottom.border-color-1 {
    border-color: #ADADAD;
}

.single-blog .custom-border-bottom.border-color-2 {
    border-color: #C3C3C3;
}

.single-blog .position-bagde {
    width: fit-content;
    top: -38px;
}

.single-blog.style-overlay {
    margin-top: -120px;
    padding: 40px 0;
    border-radius: 114px;
    background: linear-gradient(180deg, var(--c-surface-alt) 19.23%, rgba(238, 238, 244, 0.00) 100%);
}

.dark-mode .single-blog.style-overlay {
    background: #0f0f18;
}


/* ============================================================
   SINGLE BLOG POST OVERLAY - Hero Section (Full-Width Style)
   ============================================================ */

.hero-section.single-blog-overlay {
    height: 700px;
}


/* ============================================================
   CATEGORY PAGE - Layout
   ============================================================ */

.blog-section.category-page {
    padding-top: 140px;
}


/* ============================================================
   SEARCH PAGE - Layout
   ============================================================ */

.explore-category.search-explore {
    border-radius: 150px 150px 0 0;
    background: rgba(255, 255, 255, 0.38);
}

.dark-mode .explore-category.search-explore {
    background: transparent;
}

.explore-category.search-explore .container-end {
    width: calc(100% - ((100% - 1320px) / 2));
    margin-left: auto;
}

.explore-category .trending-post-slider .slick-list {
    padding-right: 158px;
}

.explore-category .trending-post-slider .slick-list .slick-track {
    display: flex;
}

.explore-category .trending-post-slider .border-bottom-row {
    margin-right: 20px;
    margin-bottom: 0;
    height: inherit;
}

.explore-category .trending-post-slider .border-bottom-row .category {
    font-size: 12px;
}

.explore-category .trending-post-slider .border-bottom-row h3 {
    font-size: 16px;
}

.explore-category .trending-post-slider .border-bottom-row.color-1 {
    background: #DDDFFF;
}

.explore-category .trending-post-slider .border-bottom-row.color-2 {
    background: #F8DEFF;
}

.explore-category .trending-post-slider .border-bottom-row.color-3 {
    background: #D7FFCC;
}

.explore-category .trending-post-slider .border-bottom-row.color-4 {
    background: #FFCCD7;
}


.dark-mode .explore-category .trending-post-slider .border-bottom-row {
    background: var(--c-dark-surface);
}

/* ============================================================
   AUTHER PAGE - Layout
   ============================================================ */
.auther-full-section {
    padding-top: 150px;
}

.auther-full-section .auther-profile {
    position: relative;
    margin-bottom: 1rem;
}

.auther-full-section .auther-bagde {
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.40);
    padding: 8px 20px;
    display: inline-flex;
    color: var(--c-black);
    font-weight: 600;
    letter-spacing: -0.1px;
    position: absolute;
    top: 100px;
    left: -36px;
    transform: rotate(-30.879deg);
}

.dark-mode .auther-full-section .auther-bagde {
        background: rgb(0 0 0);
    border: 1px solid #2a2a2a;
    color: #fff;
}

.auther-full-section .auther-social {
    display: flex;
    padding: 16px 18px;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border-radius: 100px;
    border: 1px solid var(--c-white);
    background: rgba(255, 255, 255, 0.40);
    position: absolute;
    bottom: 100px;
    right: -30px;
    list-style: none;
    margin: 0;
}

.dark-mode .auther-full-section .auther-social {
        background: rgb(0 0 0);
    border: 1px solid #2a2a2a;
}

.auther-full-section .auther-social a img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    transition: var(--t-transform);
}

.auther-full-section .auther-social a {
    display: block;
}

.auther-full-section .auther-social a:hover img {
    transform: scale(1.15);
}

.auther-full-section .author-img {
    border-radius: 30px;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ============================================================
   Page not found - Layout
   ============================================================ */
.page-not-found {
    padding-top: 200px;
    padding-bottom: 40px;
    background: linear-gradient(180deg, #ffffff00 0%, #fff 100%);
}

.dark-mode .page-not-found {
    background: transparent;
}

.page-not-found .page-not-found-img {
    width: 250px;
    height: 250px;
    object-fit: contain;
}

/* ============================================================
   Contact Page - Layout
   ============================================================ */
.hero-section.contact-page {
    padding-block: 190px;
}

.conatct-page-layout.explore-category {
    background: rgba(255, 255, 255, 0.38);
    padding-top: 100px;
}

.conatct-page-layout.explore-category .map-wrapper {
    width: 100%;
    height: 660px;
    overflow: hidden;
}

.conatct-page-layout.explore-category .map {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    border-radius: 49px;
}

.form-label {
    color: #4A4A4A;
    font-size: 16px;
    font-weight: 700;
}

.dark-mode .form-label {
    color: var(--c-white);
}

.form-control {
    border: 1px solid #D9D9D9;
    background: var(--c-white);
    border-radius: 8px;
    padding: 12px 16px;
    color: #C2C2C2;
}

.form-control::placeholder {
    color: #C2C2C2;
}

.form-check-label {
    color: #344054;
    font-size: 16px;
    font-weight: 500;
}

.dark-mode .form-check-label {
    color: var(--c-white);
}

.form-check-label a {
    font-weight: 400;
    color: inherit;
}

.stay-connected {
    border-radius: 14px;
    background: #DDEAFF;
    padding: 20px;
    margin-top: 40px;
}

.stay-connected span {
    color: var(--c-heading-soft);
    font-size: 20px;
    font-weight: 600;
    display: block;
}

.stay-connected p {
    color: var(--c-muted);
    font-weight: 500;
}

.stay-connected .connected-social {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    gap: 14px;

}

.stay-connected .connected-social img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    transition: var(--t-transform);
}


.stay-connected .connected-social a:hover img {
    transform: scale(1.1);
}

.contact-info {
    border-radius: 100px;
    background: #D0E2FF;
    padding: 20px 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    position: absolute;
    left: 0;
    right: 0;
    top: -40px;
    margin: auto;
}

.contact-info .info-col {
    display: flex;
    gap: 18px;
}

.contact-info .info-col .title {
    font-size: 20px;
    color: var(--c-heading-soft);
    font-weight: 600;
}

.contact-info .info-col p,
.contact-info .info-col a {
    color: var(--c-muted);
}

.contact-info .info-col img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

/* ============================================================
   About Page - Layout
   ============================================================ */

.hero-section.story-press {
    padding-top: 150px;
}

.story-press .stats-card {
    background: #EBEBF1;
    border-radius: 24px;
    border: 1px solid var(--c-white);
    padding: 14px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dark-mode .story-press .stats-card {
    background: var(--c-dark-surface);
        border: 1px solid #464646;
}

.story-press .icon-btn {
    background: rgba(54, 127, 247, 0.10);
    border-radius: 54px;
    display: block;
    width: fit-content;
    padding: 21px;
    position: absolute;
    top: -10px;
    right: -10px;
}

.story-press .icon-btn img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.story-press .global-card {
    border-radius: 24px;
    background: #00032E;
    color: var(--c-white);
    position: relative;
    overflow: hidden;
}

.dark-mode .story-press .global-card {
    background: var(--c-dark-surface);
}

.story-press .global-card .global-content {
    padding: 14px;
}

.story-press strong {
    font-size: 40px;
    color: #03095D;
    line-height: 1;
}

.dark-mode .story-press strong {
    color: var(--c-white);
}

.story-press .reader-group img {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 100px;
    position: relative;
    margin-right: -14px;
    border: 3px solid var(--c-white);
}

.story-press .reader-group .border-color {
    border-color: transparent;
}

.content-and-social .content-social-card {
    border-radius: 30px;
    padding: 30px;
}

.content-and-social .content-card {
    background: #EBEBF1;
}

.dark-mode .content-and-social .content-card {
    background: var(--c-dark-surface);
}

.content-and-social .social-card {
    background: #00032E;
}

.dark-mode .content-and-social .social-card {
    background: #000114;
}

.content-and-social ul {
    column-count: 2;
    margin: 0;
}

.content-and-social .right-side-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50px;
}

.partners-slid {
    width: 180px;
    height: 100px;
    justify-content: center;
    padding: 10px;
}

.dark-mode .partners-slid {
    background: var(--c-white);
}

.partners-slid img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.our-customers {
    background: #F9FBFA;
    overflow: hidden;
}

.dark-mode .our-customers {
    background: var(--c-dark-surface);
}

.our-customers .our-customer-right-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left;
}

.dark-mode .our-customers .our-customer-right-block img {
    mix-blend-mode: multiply;
}

.our-customers .trusted-testimonial {
    border-radius: 30px;
    border: 2px solid var(--c-white);
    background: rgba(255, 255, 255, 0.95);
    padding: 30px;
    margin: 20px 0;
}

.dark-mode .our-customers .trusted-testimonial {
    background: rgba(30, 30, 30, 0.95);
    border: 2px solid #464646;
}

.our-customers .trusted-testimonial .profile img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 100px;
}

.our-customers .rating-stars svg {
    fill: #E3E6F0;
    width: 20px;
    height: 20px;
}

.our-customers .rating-stars .active {
    fill: #FFA928;
}

.our-customers .slick-dots {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin-top: 35px;
    padding: 0;
    list-style: none;
}

.our-customers .slick-dots li {
    margin: 0;
    width: auto;
    height: auto;
}

.our-customers .slick-dots li button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #E3E6F0;
    border: none;
    padding: 0;
    font-size: 0;
    transition: var(--t-base);
}

.our-customers .slick-dots li button:before {
    display: none;
}

.our-customers .slick-dots li.slick-active button {
    width: 38px;
    border-radius: 30px;
    background: var(--c-primary);
}

.creative-team-section {
    padding: 46px 0;
}

.creative-team-section .team-card {
    position: relative;
    border-radius: 58px;
    overflow: hidden;
    padding: 20px;
    text-align: center;
    transition: all .4s ease;
    margin-right: 20px;
    min-height: 355px;
}

.creative-team-section .team-card:hover {
    transform: translateY(-8px);
}

.creative-team-section .team-card .team-image img {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 60px;
}

.creative-team-section .team-info {
    border-radius: 60px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    padding: 16px;
}

.creative-team-section .team-card.pink-bg {
    background: #FFE7E7;
}

.creative-team-section .team-card.pink-bg .team-info {
    background: rgba(255, 239, 239, 0.94);
}

.creative-team-section .team-card.purple-bg {
    background: #E1DCFF;
}

.creative-team-section .team-card.purple-bg .team-info {
    background: rgba(225, 220, 255, 0.94);
}

.creative-team-section .team-card.blue-bg {
    background: #DCF1FF;
}

.creative-team-section .team-card.blue-bg .team-info {
    background: rgba(220, 241, 255, 0.94);
}

.creative-team-section .team-card.peach-bg {
    background: #FFC2EE;
}

.creative-team-section .team-card.peach-bg .team-info {
    background: rgba(255, 239, 239, 0.94);
}

.dark-mode .creative-team-section .team-card.pink-bg {
    background: #8F5656;
}

.dark-mode .creative-team-section .team-card.pink-bg .team-info {
    background: rgba(143, 86, 86, 0.94);
}


.dark-mode .creative-team-section .team-card.purple-bg {
    background: #6B5FA8;
}

.dark-mode .creative-team-section .team-card.purple-bg .team-info {
    background: rgba(107, 95, 168, 0.94);
}


.dark-mode .creative-team-section .team-card.blue-bg {
    background: #4E7A96;
}

.dark-mode .creative-team-section .team-card.blue-bg .team-info {
    background: rgba(78, 122, 150, 0.94);
}


.dark-mode .creative-team-section .team-card.peach-bg {
    background: #B56A9E;
}

.dark-mode .creative-team-section .team-card.peach-bg .team-info {
    background: rgba(181, 106, 158, 0.94);
}

/* ============================================================
   Web Stories - Layout
   ============================================================ */
.web-story-banner {
    background: linear-gradient(180deg, var(--c-white)00 0%, var(--c-white) 100%);
}

.dark-mode .web-story-banner {
    background: transparent;
}

/* ============================================================
   FAQ Page - Layout
   ============================================================ */

.faq-section {
    padding-top: 150px;
}

.faq-section .faq-item {
    background: rgba(0, 1, 22, 0.16);
    border-radius: 20px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: var(--t-base);
}

.dark-mode .faq-section .faq-item {
    background: var(--c-dark-surface);
}

.dark-mode .faq-section .faq-question {
    color: var(--c-white);
}

.faq-section .faq-question {
    width: 100%;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    font-size: 20px;
    font-weight: 600;
    color: var(--c-black);
    background: transparent;
    box-shadow: none;
    text-align: left;
    cursor: pointer;
}

.faq-section .faq-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    background: var(--c-primary);
    color: var(--c-white);

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

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

    line-height: 30px;
    padding-bottom: 2px;
}

.dark-mode .faq-section .faq-icon {
    background: var(--c-black);
}

.faq-section .faq-icon span {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -3px;
}

.faq-section .faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 24px;
    max-width: 90%;
    opacity: 0;

    transition:
        max-height 0.4s ease,
        opacity 0.3s ease,
        padding 0.3s ease;
}

.faq-section .faq-item.active .faq-answer {
    max-height: 300px;
    opacity: 1;
    padding: 0 24px 22px;
}

.theme-customization .customization {
    background: #00010E;
    position: relative;
    padding: 40px 80px;
    border-radius: 30px;
}

.theme-customization .customization .btn {
    padding: 6px 30px 6px 24px;
}

.theme-customization .customization .btn:hover {
    background: var(--c-white) !important;
    color: var(--c-black) !important;
}

.theme-customization .customization .btn:hover img {
    filter: invert(1);
}

.theme-customization .customization .btn img {
    margin-right: -26px;
    width: 40px;
    height: 40px;
}

.theme-customization .customization .customization-bg {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 30px;
}

/* ============================================================
   RESPONSIVE - Large Screens (992px - 1199px)
   ============================================================ */

@media (max-width: 1399px) {
    .explore-category.search-explore .container-end {
        width: calc(100% - ((100% - 1140px) / 2));
    }

    .explore-category .trending-post-slider .slick-list {
        padding-right: 0;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {

    .hero-blog-section.style-3 .hero-blog-card .blog-details {
        --nb-w: 50px;
    }

    .conatct-page-layout.explore-category {
        padding-top: 140px;
    }
}


/* ============================================================
   RESPONSIVE - Tablet & Below (max-width: 1199px)
   ============================================================ */

@media (max-width: 1199px) {

    .hero-blog-section.style-3 .category-badge {
        justify-content: center;
    }

    .hero-blog-section.style-3 .hero-blog-card-2 .blog-details {
        max-width: 100%;
    }

    .web-story .web-story-slider .web-story-slid .story-card .continue-reading {
        width: 100%;
    }

    .explore-category.search-explore .container-end {
        width: calc(100% - ((100% - 960px) / 2));
    }
}


/* ============================================================
   RESPONSIVE - Tablet (max-width: 991px)
   ============================================================ */

@media (max-width: 991px) {

    .btn,
    button {
        font-size: 16px;
    }

    .container,
    .container-fluid,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Header Mobile - Hamburger Toggle */
    .header-section .menu-toggler {
        border: none !important;
        width: 30px;
        height: 24px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0;
        background: transparent !important;
        box-shadow: none;
    }

    .header-section .menu-toggler:focus-visible,
    .header-section .menu-toggler:active,
    .header-section .menu-toggler:focus {
        background: transparent !important;
    }

    .header-section .menu-toggler span {
        display: block;
        height: 3px;
        width: 100%;
        background: var(--c-black);
        border-radius: 3px;
        transition: 0.3s;
    }

    .header-section .menu-toggler.active span:nth-child(1) {
        transform: rotate(45deg) translate(10px, 5px);
    }

    .header-section .menu-toggler.active span:nth-child(2) {
        opacity: 0;
    }

    .header-section .menu-toggler.active span:nth-child(3) {
        transform: rotate(-45deg) translate(9px, -5px);
    }

    .header-section .custom-navbar {
        border-radius: 20px;
        padding: 10px 16px;
    }

    .header-section .navbar-collapse {
        background: var(--c-white);
        margin-top: 15px;
        padding: 20px;
        border-radius: 16px;
        box-shadow: var(--shadow-md);
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    .header-section .navbar-nav {
        align-items: flex-start !important;
        gap: 10px;
    }

    .header-section .nav-item {
        width: 100%;
    }

    .header-section .nav-link {
        width: 100%;
        padding: 10px 0;
    }

    .header-section .navbar-nav .dropdown-menu {
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: none;
        box-shadow: none;
        padding-left: 0;
        padding-right: 0;
        background: transparent;
    }

    .header-section .navbar-nav .dropdown-menu.show {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: none !important;
    }

    .header-section .mega-dropdown {
        position: static;
        display: none;
        padding: 10px 0;
        box-shadow: none;
        background: transparent;
    }

    .header-section .mega-menu.show .mega-dropdown {
        display: block;
    }

    .header-section .mega-grid {
        grid-template-columns: 1fr;
    }

    .header-section .mega-item {
        height: 180px;
    }

    /* Home Page 1 */
    .hero-section.style-1 .cat-outer::before,
    .hero-section.style-1 .cat-outer::after {
        background: transparent;
    }

    .hero-section.style-1 .search-inner {
        justify-content: end;
    }

    .stories-section .story-slide .slider-img {
        background: var(--c-black);
    }

    .profile-card.in-sidebar {
        margin-bottom: 2rem;
    }

    .hero-section.style-1 .hero-title {
        font-size: 44px;
    }

    /* Home Page 2 */
    .hero-blog-section.style-2 .hero-blog-details {
        padding: 84px 40px 40px 40px;
        margin: 0 20px;
    }

    .dark-mode .hero-blog-section.style-2 .hero-blog-details {
        background: linear-gradient(180deg, rgba(0, 2, 29, 0) 0%, rgb(3 4 10) 85%, rgb(1 2 16) 100%);
    }

    .blog-section.style-2 .large-blog {
        height: 500px;
        display: flex;
        align-items: end;
    }

    .blog-section.style-2 .large-blog .large-blog-details {
        height: auto;
    }

    .blog-section.style-2 .small-blog .blog-img img {
        height: 400px;
    }

    .blog-section.style-2 .large-blog .large-blog-details .cate-time-date {
        gap: 15px;
        flex-wrap: wrap;
    }

    /* Home Page 3 */
    .hero-blog-section.style-3 .category-badge a {
        border: 1px solid var(--c-black);
    }

    .hero-blog-section.style-3 .category-badge {
        gap: 1rem;
    }

    .hero-blog-section.style-3 .hero-blog-small-card .blog-bg-img img {
        height: 500px;
    }

    .hero-blog-section.style-3 .explore-category .icons img {
        width: 112px;
    }

    .hero-blog-section.style-3 .card-image img {
        margin-bottom: 1rem;
    }

    .blog-section.style-3 .blog-bg .blog-img {
        margin-bottom: 1rem;
    }

    .hero-blog-section.style-3 .hero-blog-card .blog-details {
        --nb-w: 75px;
    }

    .web-story {
        margin-top: 2rem;
    }

    /* Home Page 4 */
    .hero-section.style-4 .blog-slid .slider-card {
        display: none;
    }

    .hero-section.style-4 .blog-slid .slider-card.active {
        display: block;
    }

    .hero-section.style-4 .slide-overly {
        flex-wrap: wrap;
        gap: 0;
    }

    .hero-section.style-4 .learn-more-btn img {
        width: 70px;
    }

    .blog-section.style-4 .blog-cards h3 {
        font-size: 20px;
        margin-bottom: 0.5rem;
    }

    /* Home Page 5 */
    .explore-category.style-5 .story-card {
        margin-bottom: 2rem;
    }

    .new-today-blog-card {
        margin-top: 1rem;
    }

    .blog-section.style-5 .blog-card {
        height: auto;
    }

    /* Single Blog Post */
    .single-blog .single-blog-card {
        height: 500px;
    }

    .single-blog .cate-time-date {
        gap: 10px;
    }

    .single-blog-content .form-row,
    .single-blog-content .post-nav {
        grid-template-columns: repeat(1, 1fr);
    }

    .single-blog-content .comment {
        flex-wrap: wrap;
    }

    .single-blog.style-overlay {
        border-radius: 50px;
    }

    .single-blog.style-overlay .cate-time-date {
        justify-content: center;
    }

    .single-blog .position-bagde {
        width: 90%;
        top: -70px;
    }

    .explore-category.search-explore .container-end {
        width: calc(100% - ((100% - 720px) / 2));
        padding-left: 20px;
        padding-right: 20px;
    }

    /* AUTHER PAGE - Layout */
    .auther-full-section .auther-bagde {
        left: 0;
    }

    .auther-full-section .auther-social {
        right: 0;
    }

    /* conatct page */
    .conatct-page-layout.explore-category {
        padding-top: 50px;
    }

    .contact-info {
        position: unset;
        flex-direction: column;
        align-items: start;
        padding: 28px;
        border-radius: 60px;
        margin-bottom: 40px;
    }

    .stay-connected {
        margin-bottom: 40px;
    }

    .conatct-page-layout.explore-category .map-wrapper {
        height: 400px;
    }

    /* About Page */
    .hero-section.story-press .story-card img,
    .hero-section.story-press .global-card .global-card-img {
        height: 450px !important;
    }

    .content-and-social ul {
        column-count: 1;
    }
}


/* ============================================================
   RESPONSIVE - Mobile (max-width: 767px)
   ============================================================ */

@media (max-width: 767px) {

    /* Home Page 1 - Stories */
    .stories-section .thumb.thumb-current {
        display: none;
    }

    .stories-section .thumb {
        max-width: 100%;
        width: 100%;
    }

    .stories-section .slide-bottom {
        width: 82%;
    }

    .stories-section .slick-list,
    .stories-section .slick-track {
        height: 638px;
    }

    /* Home Page 2 */
    .hero-blog-section.style-2 .hero-blog-details {
        padding: 14px 24px 26px 24px;
    }

    /* Home Page 3 */
    .blog-section.style-3 .blog-bg .nebo {
        height: 300px;
    }

    /* Home Page 4 */
    .hero-section.style-4 .blog-slid .slider-card {
        height: 550px;
    }

    /* Home Page 5 */
    .hero-section.style-5 {
        height: 1064px;
    }

    .hero-section.style-5 .slick-dots {
        bottom: -36px;
    }

    .explore-category.style-5 .category-type {
        flex-direction: column;
        border-radius: 32px;
        text-align: center;
        padding: 20px;
    }

    .explore-category.style-5 {
        border-radius: 50px;
    }

    /* Single Blog Post */
    .tags ul li a {
        font-size: 14px;
    }

    .hero-section.single-blog-style {
        height: 500px;
    }

    /* Explore category */
    .explore-category.search-explore .container-end {
        width: calc(100% - ((100% - 540px) / 2));
    }

    .explore-category .trending-post-slider .border-bottom-row {
        margin-right: 0;
    }

    /* contact page */
    .hero-section.contact-page {
        padding-top: 160px;
        padding-bottom: 0;
    }

    .conatct-page-layout.explore-category {
        margin-top: 0;
    }

    /* About Page */
    .hero-section.story-press .story-card img,
    .hero-section.story-press .global-card .global-card-img {
        height: 350px !important;
    }

    /* FAQ Page */
    .theme-customization .customization {
        padding: 40px 16px;
    }
}


/* ============================================================
   RESPONSIVE - Small Mobile (max-width: 576px)
   ============================================================ */

@media (max-width: 576px) {

    /* Header */
    .header-section .custom-navbar {
        margin: 0 0.8rem;
    }

    /* Home Page 2 */
    .hero-blog-section.style-2 .cate-time-date {
        gap: 15px;
    }

    .blog-section.style-2 .small-blog .blog-img img {
        height: 300px;
    }

    .explore-category.search-explore .container-end {
        width: 100%;
    }
}


/* ============================================================================
   DARK MODE — COVERAGE COMPLETION (token-driven)
   ----------------------------------------------------------------------------
   Completes dark-theme coverage for components that previously had no dark
   treatment — so they no longer render as bright panels / invisible
   dark-on-dark text once the (now-working) toggle is enabled.

   Rules here:
     • are ALL `.dark-mode`-scoped → light mode is completely unaffected;
     • reference the semantic palette in :root (no one-off hex) → consistent
       and re-skinnable from a single place;
     • intentionally LEAVE readable accent elements untouched (e.g. partner-
       logo white tiles, coloured category chips, over-image glass badges).
   Grouped by page / section.
   ============================================================================ */

/* ---- Home 1 · Sidebar (Explore Category / Trending Posts) ----------------
   The sidebar surface is now dark, so default + heading text must go light.
   Headings carried an explicit `color:var(--c-black)` that out-specified the
   global dark-heading rule, leaving them invisible — fixed here. */
.dark-mode .explore-category.in-sidebar,
.dark-mode .trending-post.in-sidebar {
    color: var(--c-dark-text);
}

.dark-mode .explore-category.in-sidebar h3,
.dark-mode .explore-category.in-sidebar h4,
.dark-mode .trending-post.in-sidebar h3,
.dark-mode .trending-post.in-sidebar h4,
.dark-mode .trending-post.in-sidebar .trending-post-right h5 {
    color: var(--c-dark-text);
}

/* ---- Home 5 · Category cards & rows (were light panels on the dark area) - */
.dark-mode .explore-category.style-5 .category-type {
    background: var(--c-dark-surface);
    border-color: var(--c-dark-border);
}

.dark-mode .explore-category.style-5 .category-type:hover {
    background: var(--c-dark-elev);
}

.dark-mode .explore-category.style-5 .category-name {
    color: var(--c-dark-text);
}

.dark-mode .explore-category.style-5 .category-article {
    color: var(--c-dark-text-muted);
}

.dark-mode .explore-category.style-5 .border-bottom-row {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--c-dark-border);
}

/* ---- Single Post · Tags (row of white pills → subtle dark chips) --------- */
.dark-mode .tags ul li a {
    background-color: var(--c-dark-surface-2);
    border-color: var(--c-dark-border);
    color: var(--c-dark-text);
}

.dark-mode .tags ul li a:hover {
    background-color: var(--c-dark-elev);
}

/* ---- Single Post · Comments (card is now dark → text was dark-on-dark) --- */
.dark-mode .single-blog-content .comment-content h4,
.dark-mode .single-blog-content .comment-content p {
    color: var(--c-dark-text);
}

.dark-mode .single-blog-content .comment-content span {
    color: var(--c-dark-text-muted);
}

.dark-mode .single-blog-content .reply-btn {
    background: var(--c-dark-surface-2);
    color: var(--c-dark-text);
}

/* ---- Forms · inputs / textarea (everywhere `.form-control` is used) ------ */
.dark-mode .form-control {
    background: var(--c-dark-input);
    border-color: var(--c-dark-border-strong);
    color: var(--c-dark-text);
}

.dark-mode .form-control::placeholder {
    color: var(--c-dark-text-muted);
}

.dark-mode .form-control:focus {
    background: var(--c-dark-input);
    border-color: var(--c-primary);
    color: var(--c-dark-text);
    box-shadow: 0 0 0 0.2rem rgba(54, 127, 247, 0.25);
}

/* ---- Contact page · panels + their text ---------------------------------- */
.dark-mode .conatct-page-layout.explore-category {
    background: rgba(255, 255, 255, 0.04);
}

.dark-mode .stay-connected,
.dark-mode .contact-info {
    background: var(--c-dark-surface);
}

.dark-mode .stay-connected span,
.dark-mode .contact-info .info-col .title {
    color: var(--c-dark-text);
}

.dark-mode .stay-connected p,
.dark-mode .contact-info .info-col p,
.dark-mode .contact-info .info-col a {
    color: var(--c-dark-text-muted);
}

/* ============================================================
   Image Lightbox
   ============================================================ */
.np-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(8, 12, 22, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 24px;
}

.np-lightbox.is-open {
    display: flex;
}

.np-lightbox-figure {
    margin: 0;
    max-width: 90vw;
    max-height: 90vh;
    text-align: center;
}

.np-lightbox-figure img {
    max-width: 100%;
    max-height: 80vh;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    display: block;
    margin: 0 auto;
}

.np-lightbox-figure figcaption {
    color: #e2e8f0;
    font-size: 14px;
    margin-top: 14px;
    opacity: 0.85;
}

.np-lightbox-close,
.np-lightbox-prev,
.np-lightbox-next {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.np-lightbox-close:hover,
.np-lightbox-prev:hover,
.np-lightbox-next:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.np-lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    font-size: 26px;
}

.np-lightbox-prev {
    margin-right: 16px;
}

.np-lightbox-next {
    margin-left: 16px;
}

@media (max-width: 576px) {

    .np-lightbox-prev,
    .np-lightbox-next {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
}

/* Inline form status feedback */
.form-status {
    margin-top: 10px;
    font-size: 14px;
}