/*
Theme Name: Newsup Child (SmartKee Contemporary)
Theme URI: https://smartkee.org
Description: Contemporary editorial overhaul for Newsup theme in Dark Forest Green & Black palette, featuring modern typography, sleek slate navigation, pill badges, and smooth rounded card aesthetics.
Author: SmartKee Engineering
Template: newsup
Version: 1.9.0
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Syne:wght@700;800&display=swap');

/* ==========================================================================
   01. DYNAMIC COLOR ARCHITECTURE (SUPPORTING DARK & LIGHT MODES)
   ========================================================================== */
:root {
  --pri-color: #10b981 !important;
  --grady-color: linear-gradient(135deg, #081c15, #10b981) !important;
  --header-color: #050807 !important;

  --canvas-deep: #060a08;       /* Deep Canvas */
  --canvas-card: #0c1511;       /* Card Surface */
  --canvas-card-hover: #111d17; /* Card Hover Elevation */
  --canvas-input: #08110d;      /* Input Field Surface */
  
  --forest-dark: #081c15;       /* Forest Base */
  --forest-mid: #0f2e22;        /* Mid Forest Tone */
  --forest-light: #164030;      /* Elevated Green */
  --forest-emerald: #10b981;    /* Dynamic Accent (Forest, Lemon, Orange, Gold, Cyan) */
  --forest-mint: #a7f3d0;       /* Mint Text & Highlights */
  
  --ink-heading: #f8fafc;       /* Headings */
  --ink-body: #cbd5e1;          /* Body Text (High Contrast) */
  --ink-subtle: #64748b;        /* Micro Labels */
  
  --hairline-forest: rgba(16, 185, 129, 0.18);
  --hairline-glow: rgba(16, 185, 129, 0.45);
  --topbar-bg: #040705;
  --navbar-bg: #050807;
  --header-overlay: linear-gradient(90deg, rgba(6, 10, 8, 0.94) 0%, rgba(6, 10, 8, 0.7) 100%);
  --capsule-bg: rgba(8, 28, 21, 0.8);
  --footer-bg: #040705;
  --footer-overlay: linear-gradient(180deg, #060a08 0%, #020403 100%);
  --brand-smart-color: #ffffff;
}

/* ==========================================================================
   02. LIGHT MODE OVERRIDES ([data-ui-mode="light"])
   ========================================================================== */
[data-ui-mode="light"] {
  --canvas-deep: #f4f6f8;
  --canvas-card: #ffffff;
  --canvas-card-hover: #f8fafc;
  --canvas-input: #ffffff;
  --ink-heading: #0f172a;
  --ink-body: #334155;
  --hairline-forest: rgba(0, 0, 0, 0.08);
  --topbar-bg: #ffffff;
  --navbar-bg: #ffffff;
  --header-overlay: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(244, 246, 248, 0.88) 100%);
  --capsule-bg: rgba(255, 255, 255, 0.92);
  --footer-bg: #f8fafc;
  --footer-overlay: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  --brand-smart-color: #0f172a;
}

[data-ui-mode="light"] .navbar-wp .navbar-nav > li > a {
  color: #0f172a !important;
}
[data-ui-mode="light"] .navbar-wp .navbar-nav > li > a:hover,
[data-ui-mode="light"] .navbar-wp .navbar-nav > li.active > a,
[data-ui-mode="light"] .navbar-wp .navbar-nav > .current-menu-item > a {
  color: var(--forest-emerald) !important;
  background: #f1f5f9 !important;
}

[data-ui-mode="light"] .mg-sidebar .mg-widget ul li a {
  color: #1e293b !important;
}
[data-ui-mode="light"] .mg-sidebar .mg-widget ul li a:hover {
  color: var(--forest-emerald) !important;
}

[data-ui-mode="light"] .mg-latest-news-slider a {
  color: #0f172a !important;
}

[data-ui-mode="light"] .mg-posts-sec-post,
[data-ui-mode="light"] .mg-blog-post-box,
[data-ui-mode="light"] .small-post,
[data-ui-mode="light"] .mg-sidebar .mg-widget {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

/* ==========================================================================
   03. GLOBAL FOUNDATIONS & ANIMATIONS
   ========================================================================== */
body,
#custom-background-css,
.wrapper {
  background-color: var(--canvas-deep) !important;
  color: var(--ink-body) !important;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
  line-height: 1.75 !important;
  transition: background-color 0.35s ease, color 0.35s ease;
}

/* Headings in bold contemporary Syne */
h1, h2, h3, h4, h5, h6,
.entry-title, .entry-title a,
.mg-blog-post-box .title a,
.small-post-content h5 a,
.title a {
  font-family: 'Syne', 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: var(--ink-heading) !important;
  transition: color 0.25s ease !important;
}

a:hover,
.entry-title a:hover,
.small-post-content h5 a:hover,
.title a:hover {
  color: var(--forest-emerald) !important;
}

/* Theme Dot Micro-interactions */
.theme-dot {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.theme-dot:hover {
  transform: scale(1.3) !important;
}

/* Header Trending Capsule Link Hover */
.header-live-capsule a:hover {
  background: var(--forest-emerald) !important;
  color: #050807 !important;
  border-color: var(--forest-emerald) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px var(--hairline-glow) !important;
}

/* Pulse Glow Animation */
@keyframes pulseWave {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 var(--hairline-glow); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.live-pulse-dot {
  animation: pulseWave 2.2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

/* Shimmer on Ticker Badge */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.mg-latest-news .bn_title {
  background-size: 200% 200% !important;
  animation: gradientShift 6s ease infinite !important;
}

/* ==========================================================================
   04. TOP BAR & DATE/TIME
   ========================================================================== */
.mg-head-detail,
.mg-headwidget .top-bar {
  background: var(--topbar-bg) !important;
  border-bottom: 1px solid var(--hairline-forest) !important;
  transition: all 0.3s ease;
}

#time.time,
.header-date span,
.time {
  background: var(--forest-emerald) !important;
  color: #040705 !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  font-size: 0.76rem !important;
  margin-left: 8px !important;
  display: inline-block !important;
  transition: background-color 0.3s ease;
}

/* ==========================================================================
   05. HEADER BANNER & NAVBAR
   ========================================================================== */
.mg-nav-widget-area-back {
  background-image: url("https://smartkee.org/wp-content/uploads/2026/08/smartkee-forest-green-black-banner.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  border-bottom: 1px solid var(--hairline-forest) !important;
}

.site-branding-text {
  display: none !important;
}

.navbar-wp {
  background: var(--navbar-bg) !important;
  border: none !important;
  border-bottom: 3px solid var(--forest-emerald) !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.35s ease;
}

.navbar-wp .navbar-nav > li:first-child > a,
.mobilehomebtn {
  background: var(--forest-emerald) !important;
  color: #050807 !important;
  transition: background-color 0.3s ease;
}

/* ==========================================================================
   06. LATEST POST TICKER STRIP
   ========================================================================== */
.mg-latest-news-sec {
  background: var(--canvas-card) !important;
  border: 1px solid var(--hairline-forest) !important;
  border-radius: 14px !important;
  padding: 6px 14px !important;
  margin: 24px 0 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease;
}

.mg-latest-news .bn_title {
  background: linear-gradient(135deg, var(--forest-dark), var(--forest-emerald)) !important;
  border-radius: 8px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 8px 16px !important;
  color: #ffffff !important;
}

.mg-latest-news .bn_title::after {
  display: none !important;
}

/* ==========================================================================
   07. IMAGES & CARDS: VISUALLY BEST POSSIBLE WAY (NO RECTANGLES)
   ========================================================================== */
.mg-posts-sec-post,
.mg-blog-post-box,
.small-post {
  background: var(--canvas-card) !important;
  border: 1px solid var(--hairline-forest) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  padding: 20px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mg-posts-sec-post:hover,
.mg-blog-post-box:hover {
  background: var(--canvas-card-hover) !important;
  border-color: var(--forest-emerald) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 40px -8px var(--hairline-glow) !important;
}

.mg-post-thumb,
.mg-post-thumb.back-img,
.small-post .img-small-post,
.small-post img,
.mg-blog-post-box .thumb,
.mg-blog-post-box .thumb img {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid var(--hairline-forest) !important;
  box-shadow: 0 8px 25px -4px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mg-post-thumb:hover,
.mg-posts-sec-post:hover .mg-post-thumb,
.small-post:hover img {
  transform: scale(1.04) !important;
  border-color: var(--forest-emerald) !important;
  box-shadow: 0 12px 30px var(--hairline-glow) !important;
}

.post-form,
.post-formate-icon,
.mg-post-thumb .post-form {
  background: rgba(8, 28, 21, 0.88) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1.5px solid var(--forest-emerald) !important;
  color: var(--forest-emerald) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
  bottom: 12px !important;
  left: 12px !important;
}

.post-form i,
.post-formate-icon i {
  color: var(--forest-emerald) !important;
  font-size: 0.9rem !important;
}


/* ==========================================================================
   07B. SINGLE POST, ARTICLE & EDITORIAL TYPOGRAPHY (PERFECT VISIBILITY)
   ========================================================================== */
.mg-blog-post-box {
  background: var(--canvas-card) !important;
  border: 1px solid var(--hairline-forest) !important;
  border-radius: 20px !important;
  color: var(--ink-body) !important;
}

/* Reset theme default #222 override on single post article */
.mg-blog-post-box .small,
article.page-content-single,
article.page-content-single.small,
.page-content-single,
.entry-content {
  color: var(--ink-body) !important;
  font-size: 1.08rem !important;
  line-height: 1.85 !important;
}

/* Single Post Paragraphs - High Contrast & Crisp Readability */
.mg-blog-post-box p,
.page-content-single p,
.entry-content p,
article.page-content-single p,
.single-class .page-content-single p {
  color: var(--ink-body) !important;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
  font-size: 1.08rem !important;
  line-height: 1.85 !important;
  margin-bottom: 1.6rem !important;
  letter-spacing: 0.01em !important;
}

/* Headings inside Article Body */
.page-content-single h1,
.page-content-single h2,
.page-content-single h3,
.page-content-single h4,
.page-content-single h5,
.page-content-single h6,
.mg-blog-post-box .mg-header h1.title.single,
.mg-blog-post-box .mg-header h1.title.single a {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  color: var(--ink-heading) !important;
  margin-top: 2rem !important;
  margin-bottom: 1rem !important;
  line-height: 1.35 !important;
  letter-spacing: -0.02em !important;
}

.page-content-single h2 {
  font-size: 1.75rem !important;
  border-bottom: 1px solid var(--hairline-forest) !important;
  padding-bottom: 8px !important;
}

.page-content-single h3 {
  font-size: 1.35rem !important;
}

/* Strong / Bold Emphasis in Articles */
.page-content-single strong,
.page-content-single b,
.mg-blog-post-box strong,
.entry-content strong {
  color: #ffffff !important;
  font-weight: 700 !important;
}

[data-ui-mode="light"] .page-content-single strong,
[data-ui-mode="light"] .page-content-single b,
[data-ui-mode="light"] .mg-blog-post-box strong,
[data-ui-mode="light"] .entry-content strong {
  color: #0f172a !important;
}

/* In-text Links */
.page-content-single a,
.entry-content a {
  color: var(--forest-emerald) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  font-weight: 600 !important;
  transition: color 0.2s ease, text-decoration-color 0.2s ease !important;
}

.page-content-single a:hover,
.entry-content a:hover {
  color: #34d399 !important;
  text-decoration-color: #34d399 !important;
}

/* Ordered & Unordered Lists */
.page-content-single ul,
.page-content-single ol {
  color: var(--ink-body) !important;
  padding-left: 1.8rem !important;
  margin-bottom: 1.6rem !important;
}

.page-content-single ul li,
.page-content-single ol li {
  color: var(--ink-body) !important;
  font-size: 1.05rem !important;
  line-height: 1.8 !important;
  margin-bottom: 0.6rem !important;
}

/* Blockquotes */
.page-content-single blockquote,
.entry-content blockquote {
  background: rgba(16, 185, 129, 0.08) !important;
  border-left: 4px solid var(--forest-emerald) !important;
  border-radius: 0 14px 14px 0 !important;
  padding: 18px 24px !important;
  margin: 28px 0 !important;
  font-style: italic !important;
}

.page-content-single blockquote p,
.entry-content blockquote p {
  color: #e2e8f0 !important;
  font-size: 1.12rem !important;
  line-height: 1.75 !important;
  margin-bottom: 0 !important;
}

[data-ui-mode="light"] .page-content-single blockquote p,
[data-ui-mode="light"] .entry-content blockquote p {
  color: #1e293b !important;
}

/* Image Captions */
.featured-image-caption,
.wp-caption-text,
figcaption {
  color: var(--ink-subtle) !important;
  font-size: 0.88rem !important;
  text-align: center !important;
  margin-top: 8px !important;
  font-style: italic !important;
  display: block !important;
}

/* Author Info Block at Top of Post */
.mg-info-author-block {
  background: var(--canvas-card) !important;
  border: 1px solid var(--hairline-forest) !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
  margin-bottom: 20px !important;
  color: var(--ink-body) !important;
}

.mg-info-author-block .media-body h4,
.mg-info-author-block .media-heading a {
  color: var(--ink-heading) !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
}

.mg-info-author-block .media-heading span {
  color: var(--ink-subtle) !important;
}

.mg-info-author-block .mg-blog-date,
.mg-blog-meta a,
.mg-blog-meta i {
  color: var(--ink-subtle) !important;
}

.mg-blog-meta a:hover {
  color: var(--forest-emerald) !important;
}

/* Post Navigation (Prev / Next) */
.single-nav-links,
.navigation.post-navigation {
  margin-top: 40px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--hairline-forest) !important;
}

.single-nav-links a,
.nav-previous a,
.nav-next a {
  background: var(--canvas-card) !important;
  border: 1px solid var(--hairline-forest) !important;
  color: var(--ink-heading) !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
}

.single-nav-links a:hover,
.nav-previous a:hover,
.nav-next a:hover {
  background: var(--forest-emerald) !important;
  color: #050807 !important;
  border-color: var(--forest-emerald) !important;
}

/* ==========================================================================
   08. SIDEBAR WIDGETS & TITLES
   ========================================================================== */
#secondary,
#secondary .mg-sidebar,
#secondary .mg-widget,
.mg-sidebar .mg-widget,
.mg-sidebar .widget_recent_entries,
.mg-sidebar .widget_archive,
.mg-sidebar .widget_search,
.mg-sidebar .mg-widget ul,
.mg-sidebar .mg-widget ol,
.mg-sidebar .mg-widget ul li,
.mg-sidebar .mg-widget ol li,
.mg-sidebar .mg-widget p {
  background-color: var(--canvas-card) !important;
  background: var(--canvas-card) !important;
  color: var(--ink-body) !important;
  border-color: var(--hairline-forest) !important;
}

.mg-sidebar .mg-widget {
  border-radius: 18px !important;
  padding: 22px !important;
  margin-bottom: 26px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid var(--hairline-forest) !important;
  transition: all 0.3s ease;
}

.mg-sidebar .mg-widget ul li {
  border-bottom: 1px solid var(--hairline-forest) !important;
  padding: 12px 0 !important;
}

/* Widget Titles */
.mg-sidebar .mg-widget .wtitle,
.mg-wid-title .wtitle,
.mg-wid-title,
.widget-title,
.mg-widget-title,
.footer .mg-widget h6,
.footer h6,
.footer .wtitle {
  background: linear-gradient(135deg, var(--forest-dark), #0f3829) !important;
  border-left: 4px solid var(--forest-emerald) !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  margin: 0 0 18px 0 !important;
  color: #ffffff !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  display: block !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

.mg-sidebar .mg-widget .wtitle::before,
.mg-sidebar .mg-widget .wtitle::after,
.mg-wid-title::before,
.mg-wid-title::after,
.footer .mg-widget h6::before,
.footer .mg-widget h6::after {
  display: none !important;
  border: none !important;
}

/* Search input & buttons */
.search-form input[type="search"],
.widget_search input[type="search"] {
  background: var(--canvas-input) !important;
  border: 1px solid var(--hairline-forest) !important;
  border-radius: 10px !important;
  color: var(--ink-heading) !important;
  padding: 12px 16px !important;
}

.search-form input[type="search"]:focus,
.widget_search input[type="search"]:focus {
  border-color: var(--forest-emerald) !important;
  outline: none !important;
}

.search-form button[type="submit"],
.widget_search button[type="submit"],
.btn-theme,
.btn-primary,
#respond input[type="submit"],
.form-submit #submit {
  background: var(--forest-emerald) !important;
  color: #050807 !important;
  border-radius: 10px !important;
  border: none !important;
  font-weight: 800 !important;
  transition: all 0.2s ease !important;
}

.search-form button[type="submit"]:hover,
.btn-theme:hover,
#respond input[type="submit"]:hover {
  background: var(--forest-emerald) !important;
  filter: brightness(1.2) !important;
}

/* ==========================================================================
   09. "YOU MISSED" SECTION & PAGINATION
   ========================================================================== */
.missed-section,
.missed-inner {
  background: var(--canvas-deep) !important;
  border-top: 1px solid var(--hairline-forest) !important;
  padding: 30px 0 !important;
  transition: all 0.3s ease;
}

.mg-sec-title {
  border-color: var(--forest-emerald) !important;
  border-bottom: 2px solid var(--forest-emerald) !important;
  margin-bottom: 24px !important;
}

.mg-sec-title h4 {
  background: linear-gradient(135deg, var(--forest-dark), #0f3829) !important;
  border-left: 4px solid var(--forest-emerald) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  color: #ffffff !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  display: inline-block !important;
}

.mg-sec-title h4::before,
.mg-sec-title h4::after {
  display: none !important;
  border: none !important;
}

/* Pagination */
.navigation.pagination .nav-links .page-numbers {
  background: var(--canvas-card) !important;
  border: 1px solid var(--hairline-forest) !important;
  color: var(--ink-heading) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  margin: 0 4px !important;
  transition: all 0.2s ease !important;
}

.navigation.pagination .nav-links .page-numbers.current,
.navigation.pagination .nav-links .page-numbers:hover {
  background: var(--forest-emerald) !important;
  border-color: var(--forest-emerald) !important;
  color: #050807 !important;
  box-shadow: 0 4px 14px var(--hairline-glow) !important;
}

/* ==========================================================================
   10. FOOTER AREA & SCROLLER
   ========================================================================== */
.footer,
.footer.back-img,
footer.footer {
  background: var(--footer-bg) !important;
  border-top: 1px solid var(--hairline-forest) !important;
  transition: all 0.35s ease;
}

.footer .overlay {
  background: var(--footer-overlay) !important;
  transition: all 0.35s ease;
}

.footer .mg-widget {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.footer ul li,
.footer ul li a {
  color: var(--ink-body) !important;
  border-bottom: 1px solid var(--hairline-forest) !important;
}

.footer ul li a:hover {
  color: var(--forest-emerald) !important;
}

.ta_upscr,
.scrollup,
.back-to-top {
  background: var(--forest-emerald) !important;
  color: #050807 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px var(--hairline-glow) !important;
  border: none !important;
}

.ta_upscr:hover {
  background: var(--forest-emerald) !important;
  filter: brightness(1.2) !important;
  color: #050807 !important;
  transform: translateY(-4px) !important;
}

.ta_upscr i {
  color: #050807 !important;
}

/* ==========================================================================
   11. CATEGORY PILL BADGES
   ========================================================================== */
.newsup-categories,
.mg-blog-post-box .newsup-categories {
  border-radius: 20px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 4px 12px !important;
  display: inline-block !important;
  background: var(--forest-emerald) !important;
  color: #050807 !important;
  box-shadow: 0 2px 8px var(--hairline-glow) !important;
  border: none !important;
  transition: transform 0.2s ease !important;
}

.newsup-categories:hover {
  transform: translateY(-1px) !important;
  background: var(--forest-emerald) !important;
  filter: brightness(1.2) !important;
  color: #050807 !important;
}

/* ==========================================================================
   12. CONTINUOUS 3D REVOLVING SHARD ANIMATION (ORIGINAL LOGO FORMAT)
   ========================================================================== */
@keyframes smartkeeSpinContinuous {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.smartkee-shard-spinner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  transform-style: preserve-3d !important;
  animation: smartkeeSpinContinuous 3s linear infinite !important;
  will-change: transform;
}

.smartkee-living-logo:hover .smartkee-shard-spinner,
.site-logo a:hover .smartkee-shard-spinner {
  animation-duration: 1.2s !important;
}