/**
 * Main css File for Yomooh Theme
 *
 * @package Yomooh
 */
/* =============================================
   Root CSS Variables with Light Theme Defaults
   ============================================= */

:root {
  /* Layout */
  --container-width: 1200px;
  --container-padding: 15px;
  --header-height: 80px;
  --footer-height: 300px;
  
  /* Layout Types */
  --layout-boxed-width: 1200px;
  --layout-boxed-bg-color: #f5f5f5;
  
  /* Colors - Light Theme */
  --primary-color: #3a7bd5;
  --secondary-color: #00d2ff;
--color-accent: #e74c3c; /* Vibrant accent color */
  --accent-color: #e74c3c;
  --text-color: #333333;
  --heading-color: #222222;
  --link-color: #3a7bd5;
  --link-hover-color: #2c5fb3;
  --background-color: #f9f9f9;
	--layout-background: #ffffff; /* Main layout background */
  --background-alt: #ffffff;
  --border-color: #dee2e6;
  --card-bg: #ffffff;
  --header-bg: #ffffff;
  --footer-bg: #2c3e50;
  --footer-text: #ffffff;
  --input-bg: #ffffff;
  --input-text: #333333;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --color-box-shadow-rgb: 0, 0, 0; /* RGB values for box shadow */

  
  /* Color System */
  --success-color: #28a745;
  --error-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  --light-color: #f8f9fa;
  --dark-color: #343a40;
  
  /* Typography */
  --body-font-family: 'Roboto', sans-serif;
  --body-font-weight: 400;
  --body-font-size: 16px;
  --body-line-height: 1.6;
  --body-letter-spacing: normal;
  
  --heading-font-family: 'Poppins', sans-serif;
  --heading-font-weight: 700;
  --heading-line-height: 1.2;
  --heading-letter-spacing: -0.5px;
  
  --h1-font-size: 2.5rem;
  --h2-font-size: 2rem;
  --h3-font-size: 1.75rem;
  --h4-font-size: 1.5rem;
  --h5-font-size: 1.25rem;
  --h6-font-size: 1rem;
  
  --menu-font-family: 'Poppins', sans-serif;
  --menu-font-weight: 600;
  --menu-font-size: 18px;
  --menu-letter-spacing: 0.5px;
  
  /* Spacing */
  --spacing-unit: 0rem;
  --border-radius: 10px;
  --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
	--effect: all .2s cubic-bezier(.32,.74,.57,1);
   --timing: cubic-bezier(.32,.74,.57,1);
}
[data-theme="light"] {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --color-accent: #ff6b6b; /* Softer red accent */
  --text-color: #212529;
  --heading-color: #111111;
  --link-color: #007bff;
  --link-hover-color: #0056b3;
  --background-color: #ffffff;
  --layout-background: #ffffff;
  --background-alt: #f8f9fa;
  --border-color: #dee2e6;
  --card-bg: #ffffff;
  --header-bg: #ffffff;
  --footer-bg: #f1f1f1;
  --footer-text: #6c757d;
  --input-bg: #ffffff;
  --input-text: #212529;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --color-box-shadow-rgb: 0, 0, 0;
  --layout-boxed-bg-color: #f2f2f2;
}

[data-theme="dark"] {
  --primary-color: #4a90e2;
  --secondary-color: #00c6ff;
  --color-accent: #ff8a80; /* Softer, more visible accent in dark mode */
  --text-color: #e0e0e0;
  --heading-color: #ffffff;
  --link-color: #4a90e2;
  --link-hover-color: #3a7bd5;
  --background-color: #1c1c1c;
  --layout-background: #121212; /* Darker background for better contrast */
  --background-alt: #222;
  --border-color: #333333;
  --card-bg: #1e1e1e;
  --header-bg: #1a1a1a;
  --footer-bg: #121212;
  --footer-text: #e0e0e0;
  --input-bg: #2d2d2d;
  --input-text: #e0e0e0;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --color-box-shadow-rgb: 255, 255, 255; /* White shadow in dark mode */
  --layout-boxed-bg-color: #000000;
}
/* =============================================
   Base Layout Styles
   ============================================= */

body {
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  color: var(--text-color);
  background-color: var(--background-color);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* Add this to your existing CSS */
.no-theme-transition,
.no-theme-transition *,
.no-theme-transition *:before,
.no-theme-transition *:after {
  transition: none !important;
}

/* Ensure smooth transitions after initial load */
html {
  transition: background-color 0.3s ease;
}

body {
  transition: background-color 0.3s ease, visibility 0.1s ease;
}
/* Default Layout (Full Width) */
.yomooh-layout-default {
  width: 100%;
}

.yomooh-layout-default .site-main {
  width: 100%;
  max-width: 100%;
}

/* Boxed Layout */
.yomooh-layout-boxed {
  background-color: var(--layout-boxed-bg-color);
}
body.yomooh-page-padding-default.yomooh-layout-boxed {
  padding: 20px;
}
.yomooh-layout-boxed  {
  max-width: 90% !important;
  margin: 0 auto;
  background-color: var(--background-color);
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
}

/* Container Styles */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Content Area */
.content-area {
  padding: var(--spacing-unit) 0;
}

/* Typography Elements */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
  color: var(--heading-color);
  margin-top: 0;
  margin-bottom: calc(var(--spacing-unit) * 0.5);
}

h1 { font-size: var(--h1-font-size); }
h2 { font-size: var(--h2-font-size); }
h3 { font-size: var(--h3-font-size); }
h4 { font-size: var(--h4-font-size); }
h5 { font-size: var(--h5-font-size); }
h6 { font-size: var(--h6-font-size); }

p {
  margin-top: 0;
  margin-bottom: var(--spacing-unit);
}

a {
  color: var(--link-color);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

/* Menu Typography */
.main-navigation a {
  font-family: var(--menu-font-family);
  font-weight: var(--menu-font-weight);
  font-size: var(--menu-font-size);
  letter-spacing: var(--menu-letter-spacing);
}

/* Form Elements */
input,
textarea,
select {
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  background-color: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 0.5rem 1rem;
}

/* Utility Classes */
.text-primary { color: var(--primary-color); }
.bg-primary { background-color: var(--primary-color); }
.border-primary { border-color: var(--primary-color); }

.text-secondary { color: var(--secondary-color); }
.bg-secondary { background-color: var(--secondary-color); }
.border-secondary { border-color: var(--secondary-color); }

.text-success { color: var(--success-color); }
.bg-success { background-color: var(--success-color); }
.border-success { border-color: var(--success-color); }

.text-error { color: var(--error-color); }
.bg-error { background-color: var(--error-color); }
.border-error { border-color: var(--error-color); }

.text-warning { color: var(--warning-color); }
.bg-warning { background-color: var(--warning-color); }
.border-warning { border-color: var(--warning-color); }

.text-info { color: var(--info-color); }
.bg-info { background-color: var(--info-color); }
.border-info { border-color: var(--info-color); }

.text-light { color: var(--light-color); }
.bg-light { background-color: var(--light-color); }
.border-light { border-color: var(--light-color); }

.text-dark { color: var(--dark-color); }
.bg-dark { background-color: var(--dark-color); }
.border-dark { border-color: var(--dark-color); }

/* Body Background Options */
body.yomooh-body-bg-default {
  background-color: var(--background-color);
}

body.yomooh-body-bg-color {
  background-color: var(--body-bg-color);
}

body.yomooh-body-bg-image {
  background-image: var(--body-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Page Padding */
body.yomooh-page-padding-default {
  padding: var(--spacing-unit) 0;
}

body.yomooh-page-padding-custom {
  padding: var(--body-padding-top, 0) var(--body-padding-right, 0) 
           var(--body-padding-bottom, 0) var(--body-padding-left, 0);
}

/* Content Padding */
.entry-page-content {
  padding: var(--content-padding-top, 5px) var(--content-padding-right, 5px) 
           var(--content-padding-bottom, 5px) var(--content-padding-left, 5px);
}
/* =============================================
   Theme Toggle Styles
   ============================================= */
/* Common styles for both versions */
.theme-switcher {
    display: inline-block;
    position: relative;
    margin: 0 5px;
    vertical-align: middle;
}

.theme-toggle-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    display: block;
    position: relative;
    outline: none;
}

/* Version 1: Minimal Icon Toggle */
.theme-switcher.version-1 {
    --icon-size: 1.3rem;
    --hover-scale: 1.15;
}

.theme-switcher.version-1 .theme-toggle-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.theme-switcher.version-1 .theme-toggle-btn:hover {
    transform: scale(var(--hover-scale));
}

.theme-switcher.version-1 .light-icon,
.theme-switcher.version-1 .dark-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease, color 0.3s ease;
    color: var(--heading-color);
}

.theme-switcher.version-1 .light-icon.active,
.theme-switcher.version-1 .dark-icon.active {
    opacity: 1;
}

.theme-switcher.version-1 .light-icon i,
.theme-switcher.version-1 .dark-icon i {
    font-size: var(--icon-size);
    display: block;
}

/* Version 2: Slider Toggle with Track */
.theme-switcher.version-2 {
    --toggle-width: 84px;
    --toggle-height: 38px;
    --thumb-size: 34px;
    --icon-spacing: 8px;
    --track-color: var(--background-alt);
    --border-color: var(--border-color);
}

.theme-switcher.version-2 .theme-toggle-track {
    position: relative;
    display: block;
    width: var(--toggle-width);
    height: var(--toggle-height);
    border-radius: 100px;
    background: var(--track-color);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.theme-switcher.version-2 .theme-toggle-thumb {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--thumb-size);
    height: var(--thumb-size);
    border-radius: 50%;
    background: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.theme-switcher.version-2 .theme-toggle-thumb i {
    font-size: 1.25rem;
    color: white;
}

.theme-switcher.version-2 .light-icon,
.theme-switcher.version-2 .dark-icon {
    position: absolute;
    top: 50%;
    font-size: 1.15rem;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
    color: var(--text-color);
    transition: color 0.3s ease;
}

.theme-switcher.version-2 .light-icon {
    left: var(--icon-spacing);
}

.theme-switcher.version-2 .dark-icon {
    right: var(--icon-spacing);
}

/* Light mode states */
[data-theme="light"] .theme-switcher.version-2 .theme-toggle-thumb {
    left: 4px;
    background: var(--accent-color);
}

[data-theme="light"] .theme-switcher.version-2 .light-icon {
    color: var(--accent-color);
}

/* Dark mode states */
[data-theme="dark"] .theme-switcher.version-2 .theme-toggle-thumb {
    left: calc(100% - 4px - var(--thumb-size));
    background: var(--primary-color);
}

[data-theme="dark"] .theme-switcher.version-2 .dark-icon {
    color: var(--primary-color);
}

/* Focus styles for accessibility */
.theme-toggle-btn:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
}

/* No transition class for initial load */
.no-theme-transition,
.no-theme-transition * {
    transition: none !important;
}
@media (max-width: 768px) {
    .theme-switcher.version-1 {
    --icon-size: 1.2rem;
    --hover-scale: 1.15;
}
}
/* =============================================
   Dark Mode Global Styles
   ============================================= */
[data-theme="dark"] img {
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

[data-theme="dark"] img:hover {
    opacity: 1;
}

[data-theme="dark"] iframe {
    filter: brightness(0.8) contrast(1.2);
}

/* Logo switching */
.logo-dark {
    display: none;
}

[data-theme="dark"] .logo-light {
    display: none;
}

[data-theme="dark"] .logo-dark {
    display: inline-block;
}

/* =============================================
   Desktop Header
   ============================================= */

/* Default: Show mobile, hide desktop */
.desktop-header {
    display: none;
}

.mobile-header {
    display: block;
}

/* Desktop Breakpoint (1024px+) */
@media (min-width: 1024px) {
    .desktop-header {
        display: block;
    }
    .mobile-header {
        display: none !important;
    }
}
/* Header Base Styles */
#mastheader {
    position: relative;
    width: 100%;
    z-index: 100;
    transition: all 0.3s ease;
    background-color: var(--background-color);
}

/* Full Width Header */
.desktop-header-full {
    padding: 0;
}

/* Custom Width Header */
.desktop-header-custom {
    padding: 0 20px;
}

/* Header Inner */
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 0;
}

/* Sticky Header */
#mastheader.active {
    position: fixed;
    left: 0;
    right: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Non-sticky header behavior */
#mastheader:not(.active) {
    left: 0;
    right: 0;
}

/* Logo Styles */
.site-branding {
    flex: 0 0 auto;
}

.header-logo img {
    height: 40px;
    width: auto;
    transition: all 0.3s ease;
}
.site-title-wrapper {
    margin-left: 15px;
}

.site-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.site-title a {
    color: var(--heading-color);
    text-decoration: none;
}
.site-branding > *:first-letter {
    color: red;
}
.site-description {
    font-size: 0.875rem;
    color: var(--light-text);
    margin: 0;
}

/* Navigation Styles */
.main-navigation {
    flex: 1;
    display: flex;
    justify-content: center;
}

#primary-menu {
     display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

#primary-menu > li {
    position: relative;
    margin: 0 12px;
}

#primary-menu > li > a {
    display: block;
    color: var(--heading-color);
    font-weight: 500;
    text-decoration: none;
    position: relative;
    font-family: var(--menu-font-family);
    font-size: var(--menu-font-size);
}

#primary-menu > li > a {
    position: relative;
    padding-bottom: 5px; /* Space for the underline */
    display: inline-block;
}

/* Dropdown indicator ONLY for items with submenus */
#primary-menu > li.has-submenu > a::after {
    content: '▾';
    margin-left: 5px;
    font-size: 0.9em;
    color: var(--light-text);
}
#primary-menu ul li.current-menu-item > a {
    color: var(--accent-active-color, var(--accent-color)) !important;
    font-weight: 600;
}

/* Animated underline for ALL menu items */
#primary-menu > li > a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent-color);
    transition: width var(--transition);
}

/* Hover/active states */
#primary-menu > li:hover > a::before,
#primary-menu > li.current-menu-item > a::before,
#primary-menu > li.current_page_item > a::before {
    width: 100%;
}
#primary-menu > li.current-menu-item > a::before,
#primary-menu > li.current_page_item > a::before,
#primary-menu > li.current-menu-ancestor > a::before {
    width: 90%;
    background-color: var(--accent-active-color, var(--accent-color));
}

/* Active submenu indicator color */
#primary-menu > li.has-submenu.current-menu-item > a::after,
#primary-menu > li.has-submenu.current-menu-ancestor > a::after,
#primary-menu > li.has-submenu.current_page_item > a::after {
    color: var(--accent-active-color, var(--accent-color));
}
/* Dropdown Menu Styles */
#primary-menu ul {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    min-width: 200px;
    background-color: var(--background-alt);
    box-shadow: var(--box-shadow);
    border-radius: 14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    z-index: 100;
    padding: 10px 0;
    margin: 0;
    list-style: none;
    border: 1px solid var(--border-color);
}
/* Right-aligned dropdown for submenus */
#primary-menu ul ul {
    top: 0;
    left: 100%;
    margin-left: 5px;
}

/* Left-aligned dropdown for RTL or specific cases */
#primary-menu ul ul.left-dropdown {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 5px;
}

#primary-menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#primary-menu ul li a {
    display: block;
    padding: 8px 20px;
    color: var(--text-color);
    text-decoration: none;
}

.has-submenu > ul > li.has-submenu > a::after {
    content: '▾';
    position: absolute;
    right: 10%;
    top: 0%;
    font-size: 1.2em;
}


/* Second-level submenu indicators */
.has-submenu > ul > li.has-submenu > a::after {
    content: '▸';
}

.has-submenu > ul > li.has-submenu:hover > a::after {
    content: '◂';
}
#primary-menu ul .submenu-toggle {
    display: none;
}


#primary-menu ul li a:hover {
    color: var(--accent-color);
    padding-left: 25px;
}

/* Submenu arrow styles */
.has-submenu > a {
    position: relative;
    padding-right: 20px !important;
}
.submenu-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2em;
    margin-left: 5px;
    color: var(--text-color);
}

.has-submenu:hover .submenu-toggle {
    transform: translateY(-50%) rotate(180deg);
}

/* Header Actions Styles */
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 0 0 auto;
}

/* Search Styles */
.header-search {
    position: relative;
}

.search-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-color);
    font-size: 1.4rem;
    padding: 5px;
    transition: color var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-toggle:hover {
    color: var(--primary-color);
}

.search-form-wrapper {
    position: absolute;
    top: 140%;
    right: -100%;
    width: 250px;
    opacity: 0;
    background: none;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition);
    z-index: 99;
}

.search-form-wrapper.active {
    opacity: 1;
    background: none;
    visibility: visible;
    transform: translateY(0);
}

/* Search Form Styles */
.yomooh-search-form {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}
.search-form-container {
background: none;
}
.yomooh-search-form .search-icon {
    position: absolute;
    left: 15px;
    color: var(--light-text);
    z-index: 1;
}
.yomooh-search-form .search-field {
    flex: 1;
    padding: 20px 38px 20px 36px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.3s ease;
    transition: all var(--transition);
    background-color: var(--background-color);
    color: var(--text-color);
    height: 30px;
}

.yomooh-search-form .search-field:focus {
    outline: none;
    border-color: #800080;
    background-color: none;
    box-shadow: 0 0 0 2px rgba(128, 0, 128, 0.1);
}

.yomooh-search-form .search-submit {
     position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary-color);
    right: 6px;
    display: flex;
    align-items: center;
}

.yomooh-search-form .search-submit input[type="submit"] {
	background: none;
    border: none;
    border-radius: 30px;
    padding: 8px 15px;
    cursor: pointer;
    opacity: 0;
    width: 0;
    overflow: hidden;
}
/* Disable clear 'x' icon in Chrome, Safari */
.search-field::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* Remove autofill background */
.search-field:-webkit-autofill {
  box-shadow: 0 0 0px 1000px var(--background-color) inset;
  -webkit-text-fill-color: var(--text-color);
}

.yomooh-search-form .search-submit:hover i {
    transform: scale(1.1);
}

.search-form {
    display: flex;
    align-items: center;
}

.yomooh-search-form .search-submit i {
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    font-size: 1.8rem;
    transition: all var(--transition);
}
.search-keyword {
  color: var(--primary-color);
	margin-left: 5px;
    font-weight: 600;
}
.container-form-center {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    padding-top: 10px;
}

.search-form-wide {
    max-width: 620px;
    margin: 0 auto 20px;
    margin-left: 150px;
    margin-right: 150px;
}

/* If 'search-layout-no' class is present on a parent */
.search-layout-no .search-form-wide {
    margin-left: 350px;
    margin-right: 350px;
}

.no-results-message {
    font-size: 16px;
    color: var(--text-color, #555);
}
.not-found-header {
    text-align: center;
    margin-bottom: 20px;
}

.not-found-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--heading-color, #222);
    margin: 0;
}

@media (max-width: 768px) {
    .not-found-title {
        font-size: 26px;
    }
    .search-form-wide {
     max-width: auto;
    margin-right: auto;
   margin-left: auto;
}
}
/* =============================================
   ACCOUNT DROPDOWN BASE STYLES
   ============================================= */
.header-account {
    position: relative;
    display: inline-block;
}

.account-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-color);
    font-size: 1.4rem;
    padding: 0px;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.account-toggle:hover {
    color: var(--primary-color);
}

.account-toggle.active {
    color: var(--primary-color);
}

.account-username {
    font-weight: 500;
    font-size: 0.9rem;
}

/* =============================================
   LOGIN POPUP SPECIFIC STYLES
   ============================================= */
.login-popup {
    position: absolute;
    top: 130%;
    right: 0;
    width: 320px;
    background-color: var(--background-alt);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition);
    z-index: 100;
    padding: 20px;
    border: 1px solid var(--border-color);
}

.login-popup.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.login-popup .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.login-popup .popup-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--heading-color);
}

.login-form .form-group {
    margin-bottom: 15px;
}

.login-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--text-color);
}

.login-form input {
    width: 90%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: border-color var(--transition);
    background-color: var(--input-bg);
    color: var(--input-text);
}

.login-form input:focus {
    border-color: var(--primary-color);
    outline: none;
}

.remember-me {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.remember-me input {
    width: auto;
    margin-right: 8px;
}

.login-button {
    width: 100%;
    padding: 12px;
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: var(--border-radius);
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--transition);
}

.login-button:hover {
     background-color: var(--accent-color);
  color: var(--light-color);
}

.form-links {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    font-size: 0.875rem;
}

.form-links a {
    color: var(--light-text);
    text-decoration: none;
    transition: color var(--transition);
}

.form-links a:hover {
    color: var(--primary-color);
}
/* Loading spinner styles */
.login-button .spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    vertical-align: middle;
}

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

/* Shake animation for errors */
.shake {
    animation: shake 0.5s linear;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

/* Error message styles */
.login-error {
    color: #dc3232;
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(220, 50, 50, 0.1);
    border-radius: 8px;
    text-align: center;
}
/* =============================================
   Modern Desktop Header (Header 2)
   ============================================= */

/* Base Styles */
#mastheader-2 {
    position: relative;
    width: 100%;
    z-index: 100;
    transition: all 0.3s ease;
    background-color: var(--background-color);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

/* Top Bar */
.header-2-top-bar {
    background-color: var(--accent-color);
    color: #fff;
    font-size: 0.85rem;
}

.header-2-top-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.header-2-top-left,
.header-2-top-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-2-date-time {
    display: flex;
    gap: 10px;
}

/* Quick Links */
.header-2-quick-links ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 15px;
}

.header-2-quick-links a {
    color: #fff;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.header-2-quick-links a:hover {
    opacity: 0.8;
}

/* Social Icons */
.header-2-social-icons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-2-social-icons a {
    color: #fff;
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.header-2-social-icons a:hover {
    transform: translateY(-2px);
}
.header-2-top-button {
    margin: 7px;
}
/* Top Button */
.header-2-top-button .button {
    padding: 5px 15px;
    font-size: 0.85rem;
    border-radius: 14px;
    color: #eee;
    text-decoration: none;
    background: #720eec;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.header-2-top-button .button:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Main Header */
.header-2-main {
    padding: 15px 0;
}

.header-2-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Logo/Site Branding */
.header-2-site-branding {
    flex: 0 0 auto;
}

.header-2-logo img {
    height: 45px;
    width: auto;
    transition: all 0.3s ease;
}

.header-2-site-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
}

.header-2-site-title a {
    color: var(--heading-color);
    text-decoration: none;
    background: linear-gradient(to right, var(--accent-color), var(--primary-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Main Navigation */
.header-2-main-navigation {
    flex: 1;
    display: flex;
    justify-content: center;
}

#header-2-primary-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 5px;
}

#header-2-primary-menu > li {
    position: relative;
}

#header-2-primary-menu > li > a {
    display: block;
    padding: 10px 15px;
    color: var(--heading-color);
    font-weight: 500;
    text-decoration: none;
    position: relative;
    font-family: var(--menu-font-family);
    font-size: var(--menu-font-size);
    border-radius: 8px;
}

#header-2-primary-menu > li > a:hover {
    background-color: var(--background-alt);
    color: var(--accent-color);
}

#header-2-primary-menu > li.current-menu-item > a {
    color: var(--accent-color);
    font-weight: 600;
}

/* Dropdown Menu Styles */
#header-2-primary-menu ul {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    min-width: 220px;
    background-color: var(--background-alt);
    box-shadow: var(--box-shadow);
    border-radius: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition);
    z-index: 100;
    padding: 10px 0;
    margin: 0;
    list-style: none;
    border: 1px solid var(--border-color);
}

#header-2-primary-menu ul ul {
    top: 0;
    left: 100%;
    margin-left: 5px;
}

#header-2-primary-menu ul ul.left-dropdown {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 5px;
}

#header-2-primary-menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#header-2-primary-menu ul li a {
    display: block;
    padding: 8px 20px;
    color: var(--text-color);
    text-decoration: none;
}

#header-2-primary-menu ul li a:hover {
    color: var(--accent-color);
    padding-left: 25px;
    background-color: rgba(var(--accent-color-rgb), 0.05);
}

/* Submenu indicators */
.has-submenu > a::after {
    content: '▾';
    margin-left: 5px;
    font-size: 0.9em;
    color: var(--light-text);
}
#header-2-primary-menu > li > a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent-color);
    transition: width var(--transition);
}

/* Hover states */
#header-2-primary-menu > li:hover > a {
    color: var(--accent-color);
}

#header-2-primary-menu > li:hover > a::before {
    width: 100%;
}

/* Active/Current menu item styles - TEXT COLOR */
#header-2-primary-menu > li.current-menu-item > a,
#header-2-primary-menu > li.current_page_item > a,
#header-2-primary-menu > li.current-menu-ancestor > a {
    color: var(--accent-active-color, var(--accent-color)) !important;
}

/* Active underline styles */
#header-2-primary-menu > li.current-menu-item > a::before,
#header-2-primary-menu > li.current_page_item > a::before,
#header-2-primary-menu > li.current-menu-ancestor > a::before {
    width: 100%;
    background-color: var(--accent-active-color, var(--accent-color));
}

/* Active submenu indicator color */
#header-2-primary-menu > li.has-submenu.current-menu-item > a::after,
#header-2-primary-menu > li.has-submenu.current-menu-ancestor > a::after,
#header-2-primary-menu > li.has-submenu.current_page_item > a::after {
    color: var(--accent-active-color, var(--accent-color));
    transform: rotate(180deg);
}
#header-2-primary-menu ul li.current-menu-item > a {
    color: var(--accent-active-color, var(--accent-color)) !important;
    font-weight: 600;
}
/* Header Actions */
.header-2-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 0 0 auto;
}

/* Search Styles */
.header-2-search {
    position: relative;
}

.header-2-search-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-color);
    font-size: 1.2rem;
    padding: 8px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.header-2-search-toggle:hover {
    color: var(--accent-color);
    background-color: var(--background-alt);
}

.header-2-search-form-wrapper {
    position: absolute;
    top: 140%;
    right: 0;
    width: 280px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition);
    z-index: 99;
    background-color: var(--background-color);
    border-radius: 12px;
    padding: 15px;
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
}

.header-2-search-form-wrapper.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Theme Mode Switcher */
.theme-mode-switcher {
    margin-left: 5px;
}

/* Sticky Header */
#mastheader-2.active {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    animation: headerSlideDown 0.3s ease;
}

@keyframes headerSlideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Container Types */
.desktop-header-2-full {
    padding: 0;
}

.desktop-header-2-custom {
    padding: 0 20px;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .header-2-inner {
        padding: 0 15px;
    }
    
    #header-2-primary-menu > li > a {
        padding: 10px 12px;
        font-size: calc(var(--menu-font-size) - 0.1rem);
    }
}

/* Default: Show mobile, hide desktop */
.desktop-header-2 {
    display: none;
}

.mobile-header {
    display: block;
}

/* Desktop Breakpoint (1024px+) */
@media (min-width: 1024px) {
    .desktop-header-2 {
        display: block;
    }
    .mobile-header {
        display: none !important;
    }
}

/* =============================================
   USER POPUP SPECIFIC STYLES (Logged In)
   ============================================= */
.user-popup {
    position: absolute;
    top: 120%;
    right: 0;
    width: 200px;
    background-color: var(--background-alt);
    border-radius: 14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition);
    z-index: 100;
    padding: 15px;
}

.user-popup.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-popup .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.user-popup .popup-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--heading-color);
}

.user-info {
    padding: 5px 0;
}

.user-info p {
    margin: 0 0 10px;
    font-size: 0.9rem;
}

.user-info p strong {
    font-weight: 600;
    color: var(--primary-color);
}

.user-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.user-links li {
    margin-bottom: 8px;
}

.user-links li:last-child {
    margin-bottom: 0;
}

.user-links a {
    display: flex;
    align-items: center;
    color: var(--text-color);
    text-decoration: none;
    transition: color var(--transition);
    padding: 8px 5px;
    border-radius: 3px;
    font-size: 0.9rem;
}

.user-links a:hover {
    color: var(--primary-color);
    background-color: var(--background-light);
}

.user-links i {
    margin-right: 10px;
    width: 18px;
    text-align: center;
    font-size: 0.9rem;
}

/* =============================================
   COMMON POPUP ELEMENTS
   ============================================= */
.popup-close {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--light-text);
    transition: color var(--transition);
    padding: 0;
    line-height: 1;
}

.popup-close:hover {
    color: var(--accent-color);
}

/* Button Styles */
.header-button .button {
    display: inline-block;
    padding: 5px 10px 5px 10px;
    background-color: var(--primary-color);
     color: #fff;
    border-radius: 14px;
    font-weight: 500;
    text-decoration: none;
   transition: var(--transition);
    border: 2px solid var(--primary-color);
}

.header-button .button:hover {
     color: #fff;
    background: var(--link-hover-color);
    transform: translateY(-3px);

}


/*--------------------------------------------------------------
# Mobile Header
--------------------------------------------------------------*/
/* Mobile Header Base Styles */
.mobile-header {
    position: relative;
    width: 100%;
    background-color: var(--header-bg);
    box-shadow: var(--box-shadow);
    z-index: 1000;
    transition: all var(--transition);
    display: block !important; /* Ensure header is always visible */
}

.sticky-mobile-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
}

.mobile-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--container-padding);
    height: 60px;
    position: relative;
}

/* Logo Position Styles */
.mobile-logo-left .mobile-header-inner {
    justify-content: flex-start;
}
.mobile-logo-center .mobile-header-inner {
    justify-content: space-between;
}
.mobile-logo-right .mobile-header-inner {
    justify-content: flex-end;
}

.mobile-logo-left .mobile-logo {
    order: 1;
    margin-right: auto;
}
.mobile-logo-center .mobile-logo {
    order: 2;
    flex: 0 1 auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.mobile-logo-right .mobile-logo {
    order: 3;
    margin-left: auto;
}

.mobile-logo-left .mobile-menu-toggle {
    order: 0;
}
.mobile-logo-center .mobile-menu-toggle {
    order: 1;
}
.mobile-logo-right .mobile-menu-toggle {
    order: 0;
}

.mobile-logo-left .mobile-header-right {
    order: 2;
    margin-left: auto;
}
.mobile-logo-center .mobile-header-right {
    order: 3;
}
.mobile-logo-right .mobile-header-right {
    order: 1;
    margin-right: auto;
}

.mobile-logo {
    text-align: center;
}

.mobile-logo img {
    height: 30px;
    width: auto;
    max-width: 150px;
}

.mobile-header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Menu Toggle Button Styles */
.mobile-menu-toggle {
    background: none;
    border: none;
    padding: 0;
    margin-right: 10px;
    cursor: pointer;
}

.mobile-menu-toggle i {
    font-size: 28px;
    color: var(--text-color);
    transition: color var(--transition);
}

.mobile-menu-toggle:hover i {
    color: var(--primary-color);
}

.mobile-search-toggle, 
.mobile-cart,
.mobile-account {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* Icon Styles */
.mobile-search-toggle i,
.mobile-cart i,
.mobile-account i {
    font-size: 22px;
    color: var(--text-color);
    transition: color var(--transition);
}

.mobile-search-toggle:hover i,
.mobile-cart:hover i,
.mobile-account:hover i {
    color: var(--primary-color);
}

.mobile-cart {
    position: relative;
}

.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: var(--primary-color);
    color: var(--white);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Change menu icon when dropdown is active */
.mobile-menu-toggle.active i.wp-icon-menu {
    display: none;
}

.mobile-menu-toggle.active i.wp-icon-x {
    display: inline-block;
}

.mobile-menu-toggle i.wp-icon-x {
    display: none;
}

.mobile-sidebar-header {
     display: flex;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.mobile-sidebar-close {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.mobile-sidebar-close i {
    font-size: 24px;
    color: var(--text-color);
    transition: color var(--transition);
}

.mobile-sidebar-close:hover i {
    color: var(--primary-color);
}

/* Mobile Dropdown - Canvas Overlay */
#mobile-dropdown {
  position: fixed;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--background-alt);
    box-shadow: var(--box-shadow);
    border-top: 1px solid var(--border-color);
  z-index: 9998;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#mobile-dropdown.active {
  transform: translateY(0);
	padding-bottom: 100px;

}
.dropdown-space {
	padding-bottom: 180px;

}
body.mobile-dropdown-open {
  overflow: hidden;
  touch-action: none;
}

.mobile-header-button {
  	margin-left: 15px;
  	display: flex;
  	padding-top: 15px;
  	justify-content: center;
}
.mobile-header-button .header-button .button {
    display: inline-block;
    padding: 5px 40px 5px 40px;
    background-color: var(--primary-color);
     color: #fff;
    border-radius: 14px;
    font-weight: 500;
    text-decoration: none;
   transition: var(--transition);
    border: 2px solid var(--primary-color);
}
/* Active/Hover States for Mobile Navigation */
#mobile-navigation li.current-menu-item > a,
#mobile-navigation li.current-menu-parent > a,
#mobile-navigation li.current-menu-ancestor > a {
    color: red;
    font-weight: 800;
    position: relative;
}

/* Optional: Add an indicator for active items */
/* Show indicator ONLY for top-level current/parent/ancestor items */
#mobile-navigation > ul > li.current-menu-item > a::before,
#mobile-navigation > ul > li.current-menu-parent > a::before,
#mobile-navigation > ul > li.current-menu-ancestor > a::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--primary-color);
}

/* HIDE indicator for sub-menu items (children) */
#mobile-navigation .sub-menu li.current-menu-item > a::before,
#mobile-navigation .sub-menu li.current-menu-parent > a::before,
#mobile-navigation .sub-menu li.current-menu-ancestor > a::before {
    content: none !important; /* Forcefully removes the pseudo-element */
}

/* Sub-menu active items */
#mobile-navigation .sub-menu li.current-menu-item > a {
    padding-left: 22px; /* Compensate for the indicator */
}

/* Hover effect for better interaction */
#mobile-navigation li a:hover {
    color: var(--primary-color);
    background-color: rgba(var(--primary-color-rgb), 0.05);
}
#mobile-navigation li.always-show-submenu > a::after {
    display: none !important;
}

#mobile-navigation li.menu-item-has-children.active > a::after {
    transform: translateY(-50%) rotate(180deg);
    color: var(--primary-color);
}
mobile-navigation,
#mobile-navigation ul,
#mobile-navigation li,
#mobile-navigation a {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

/* Mobile Navigation Base Styles */
#mobile-navigation {
    padding: 0; /* Remove all padding */
    margin: 0; /* Remove all margins */
    width: 100%;
}


#mobile-navigation li {
    position: relative;
    border-bottom: 0.5px solid var(--border-color);
}

#mobile-navigation li a {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    color: var(--text-color);
    text-decoration: none;
    transition: all var(--transition);
}

#mobile-navigation li a:hover {
    color: var(--primary-color);
   /* background-color: var(--background-color); */
}

#mobile-navigation li.current-menu-item > a {
    color: red;
    font-weight: 500;
}

#mobile-navigation li.menu-item-has-children > a {
    position: relative;
    padding-right: 35px;
}

#mobile-navigation li.menu-item-has-children > a::after {
    content: '\25BE';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    transition: transform var(--transition);
    color: var(--text-color);
}

#mobile-navigation li.menu-item-has-children.active > a::after {
    transform: translateY(-50%) rotate(180deg);
}

#mobile-navigation .sub-menu {
   display: none;
   padding-top: 5px;
   /* background-color: var(--background-color); */
   padding-left: 0; /* Remove default padding */
   margin-left: 0; /* Remove default margin */
   list-style: none; /* Remove list markers */
   width: 100%; /* Full width */
}

#mobile-navigation .sub-menu.active {
   display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2-column grid */
    gap: 5px; /* Space between items */
}

#mobile-navigation .sub-menu li a {
    padding-left: 25px;
    font-size:var(--menu-font-size);
}

/* Search Dropdown Styles */
.mobile-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: none;
    border: none;
    box-shadow: none;
    z-index: 1001;
    display: none;
}

.mobile-search-dropdown.active {
    display: block;
}
#mobile-menu .submenu-toggle {
    display: none;
}
/* Mobile Sidebar Styles */
.mobile-sidebar {
  position: fixed;
  top: 0;
  left: -100%;
  width: 85%;
  max-width: 320px;
  height: 100vh;
  background-color: var(--background-alt);
  z-index: 1002;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-shadow: var(--box-shadow);
  visibility: hidden;
  opacity: 0;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  display: flex;
  flex-direction: column;
}

.mobile-sidebar.active {
  left: 0;
  visibility: visible;
  opacity: 1;
}
.mobile-sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 80px; /* Extra space at bottom */
}
/* Overlay Styles */
.mobile-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1001;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* Toggle Button States */
.mobile-menu-toggle .wp-icon-menu {
    display: block;
}

.mobile-menu-toggle .wp-icon-x {
    display: none;
}

.mobile-menu-toggle.active .wp-icon-menu {
    display: none;
}

.mobile-menu-toggle.active .wp-icon-x {
    display: block;
    font-size: 24px;

}

.mobile-search-dropdown .yomooh-search-form .search-field {
    font-size: 16px;
}

.mobile-search-dropdown .yomooh-search-form .search-submit i {
    font-size: 30px;
    margin-left: 5px;
}

@media (min-width: 993px) {
.mobile-header {
display: none !important;
 }
}
@media (max-width: 992px) {
#mastheader {
   display: none !important;
 }
 }
.header-shortcode-container,
.desktop-header {
    display: block;
}

.mobile-header-shortcode-container,
.mobile-header {
    display: none;
}

@media (max-width: 991px) {
    .header-shortcode-container,
    .desktop-header {
        display: none !important;
    }
    
    .mobile-header-shortcode-container,
    .mobile-header {
        display: block;
    }
}
/*--------------------------------------------------------------
# footer
--------------------------------------------------------------*/
/* Footer Base Styles */
	@media (max-width: 767px) {
    .mobile-footer-spacer {
        display: none; /* Hidden by default */
    }
    
    body.footer-visible .mobile-footer-spacer {
        display: block; /* Only show when footer is visible */
    }
}
.site-footer {
    background-color: var(--background-color);
  color: var(--footer-text);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
padding-left: 20px;
    padding-right: 20px;
  overflow: hidden;
 position: relative;
    z-index: 0;
    display: block;
}
.entry-footer {
  background-color: var(--background-color);
  color: var(--footer-text);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* Widget Area Styles */
.footer-widgets {
    padding: 30px 0 30px;
}
.widget-title {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}
.footer-widgets-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 25px;
}

.footer-widget {
    flex: 1;
    min-width: 200px;
    padding: 15px;
}

.footer-widget:first-child {
    padding-left: 0;
}

.footer-widget:last-child {
    padding-right: 0;
}

/* Widget Title Styles */
.footer-widget .widget-title {
  color: var(--footer-text);
  font-size: 1.25rem;
	margin-left: 0px;
  margin-bottom: 25px;
  margin-top: -15px;
  padding-bottom: 15px;
  position: relative;
}

.footer-widget .widget-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 2px;
    background-color: #00d2ff;
}

/* Widget Content Styles */
.footer-widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-widget li {
    margin-bottom: 12px;
}

.footer-widget a {
    color: var(--text-color);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-widget a:hover {
    color: var(--text-color);
    font-weight: var(--heading-font-weight);
    padding-left: 5px;
}

.footer-widget p {
    color: var(--text-color);
    margin-bottom: 20px;
}

/* Copyright Styles */
.footer-copyright {
    background-color: var(--background-color);
    color: var(--text-color);
    padding: 15px 0;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.copyright-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.copyright-text {
    color: var(--text-color-dark);
    font-size: 1.035rem;
}

.copyright-text a {
  font-size: 1.335rem;
    color:  var(--primary-color);
    text-decoration: none;
}

.copyright-text a:hover {
  font-weight: var(--heading-font-weight);
    text-decoration: none;
}

/* Layout Variations */
.footer-layout-1-column .footer-widget {
    width: 100%;
}

.footer-layout-2-column .footer-widget {
    width: calc(50% - 15px);
}

.footer-layout-3-column .footer-widget {
    width: calc(33.333% - 20px);
}

.footer-layout-4-column .footer-widget {
    width: calc(25% - 22.5px);
}

/* Responsive Styles */
@media (max-width: 991px) {
    .footer-widget {
        width: calc(50% - 15px) !important;
    }
    
    .copyright-inner {
        justify-content: center;
        text-align: center;
    }
}
@media (max-width: 767px) {
  .footer-widgets {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem; /* Optional spacing between widgets */
  }

  .footer-widgets .footer-widget {
    flex: 1 1 45%; /* Adjust width as needed */
    min-width: 0; /* Prevent too narrow widgets */
  }
}

@media (max-width: 767px) {
    .footer-widget {
        width: 100% !important;
        padding: 0 0 30px !important;
    }
    
    .footer-widget:first-child {
       flex-basis: 100%;
       width: 100%;
    }
    
    .footer-widgets {
        padding: 40px 0 20px;
    }
}

/* Base Cookie Notice Styles */
.cookie-notice {
    position: fixed;
    z-index: 9999;
   bottom: 10px;
    left: 20px;
    width: 400px;
    background-color: var(--primary-color);
    color: var(--white);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    visibility: hidden;
}

/* Visible state - triggered by JavaScript */
.cookie-notice.show {
    bottom: 20px;
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.cookie-notice-container {
    position: relative;
    display: flex;
    overflow: hidden;
    padding: 15px 20px;
    align-items: center;
    flex-flow: row nowrap;
    pointer-events: auto;
    border-radius: 12px;
}

.cookie-notice-text {
    margin-right: 15px;
    flex: 1;
    min-width: 250px;
	color: var(--light-color);
    font-size: 14px;
    line-height: 1.4;
}

.cookie-policy-link {
    color: var(--light-color);
    text-decoration: underline;
    margin-left: 5px;
}
.cookie-policy-link:hover {
    color: var(--heading-color);
    text-decoration: underline;
    margin-left: 5px;
}

.cookie-policy-link:hover {
    opacity: 0.8;
}

.cookie-accept-button {
     background-color: #00d2ff;
    color: #333;
    border: none;
    padding: 8px 20px;
    margin-left: 15px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cookie-accept-button:hover {
  background-color: var(--accent-color);
  color: var(--light-color);

}

/* Animation for exit */
.cookie-notice.hide {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease-out;
}

/* Mobile Responsive Styles */
@media (max-width: 600px) {
    .cookie-notice {
      position: fixed;
     z-index: 9999;
     top: auto;
     bottom: 10px;
     background-color: var(--primary-color);
     color: var(--white);
     border-radius: 12px;
     left: 3px;
     width: 360px;
     height: 90px;
    }
    
    .cookie-notice.show {
        bottom: 10px;
    }
    
    .cookie-notice-container {
     position: relative;
    display: flex;
    overflow: hidden;
    padding: 8px 15px;
    align-items: center;
    pointer-events: auto;
}
.cookie-notice-text {
    margin-right: 10px;
    flex: 1;
    min-width: 200px;
}

.cookie-accept-button {
    background-color: #00d2ff;
    color: #333;
  border: none;
  padding: 8px 15px;
  margin-left: 15px;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
    border: none;
    padding: 8px 20px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}
.cookie-accept-button:hover {
  background-color: var(--accent-color);
} 
 
}

/* Animation Keyframes */
@keyframes slideInUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideOutDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(20px);
        opacity: 0;
    }
}
/* Base Social Icons CSS */
.social-icons-wrapper {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.social-icons-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 15px;
    flex-wrap: wrap;
}

.social-icon a {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* Icon Styles */
.social-icons-wrapper.style-minimal .social-icon a {
    background: transparent;
    width: auto;
    height: auto;
}

.social-icons-wrapper.style-rounded .social-icon a {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-color: rgba(0,0,0,0.1);
}

.social-icons-wrapper.style-square .social-icon a {
    border-radius: 4px;
    width: 40px;
    height: 40px;
    background-color: rgba(0,0,0,0.1);
}

/* Color Schemes */
.social-icons-wrapper.color-brand .social-icon a {
    color: inherit;
}

.social-icons-wrapper.color-brand .social-icon.facebook a:hover {
  color: #3b5998;
  text-decoration: none;
}
.social-icons-wrapper.color-brand .social-icon.twitter a:hover {
  color: #1da1f2;
  text-decoration: none;
}
.social-icons-wrapper.color-brand .social-icon.instagram a:hover {
  color: #e1306c;
  text-decoration: none;
}
.social-icons-wrapper.color-brand .social-icon.linkedin a:hover {
  color: #0077b5;
  text-decoration: none;
}
.social-icons-wrapper.color-brand .social-icon.youtube a:hover {
  color: #ff0000;
  text-decoration: none;
}
.social-icons-wrapper.color-brand .social-icon.pinterest a:hover {
  color: #bd081c;
  text-decoration: none;
}
.social-icons-wrapper.color-brand .social-icon.tiktok a:hover {
  color: #010101;
  text-decoration: none;
}
.social-icons-wrapper.color-brand .social-icon.whatsapp a:hover {
  color: #25d366;
  text-decoration: none;
}
.social-icons-wrapper.color-brand .social-icon.telegram a:hover {
  color: #0088cc;
  text-decoration: none;
}
.social-icons-wrapper.color-brand .social-icon.vimeo a:hover {
  color: #1ab7ea;
  text-decoration: none;
}
.social-icons-wrapper.color-brand .social-icon.reddit a:hover {
  color: #ff4500;
  text-decoration: none;
}
.social-icons-wrapper.color-brand .social-icon.discord a:hover {
  color: #7289da;
  text-decoration: none;
}


.social-icons-wrapper.color-inherit .social-icon a {
    color: inherit;
}
/* Social Sharing Base Styles */
.social-sharing {
    display: flex;
    align-items: center;
    margin: 20px 0;
     padding: 0;
    font-size: 14px;
    flex-wrap: nowrap;
}
.share-label {
    margin-right: 15px;
    font-weight: 500;
    color: var(--text-color);
}
.share-label i{
    margin-right: 10px;
}
.social-sharing-buttons {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 12px;
    flex-wrap: wrap;
}
@media (max-width: 768px) {
  .social-sharing-buttons {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4px;
    flex-wrap: wrap;
}
}
.social-sharing-buttons li {
    margin: 0;
    padding: 0;
}

.social-sharing-buttons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--text-color);
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-sharing-buttons i {
    font-size: 22px;
}
.social-sharing-buttons .tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
   color: var(--text-color);
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    margin-bottom: 5px;
}

.social-sharing-buttons .tooltip:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.social-sharing-buttons a:hover .tooltip {
    opacity: 1;
    visibility: visible;
}
.social-sharing-buttons a:hover {
    color: var(--primary-color);
    transform: translateY(-2px);
}

/* Horizontal Layout (default) */
.social-sharing-horizontal {
    flex-direction: row;
}

/* Floating Layout */
.social-sharing-floating {
    position: fixed;
    left: 20px;
    top: 70%;
    transform: translateY(-50%);
    flex-direction: column;
    z-index: 999;
   background-color: var(--card-bg);
    padding: 10px;
    border-radius: 20px;
    margin: 0;
}

.social-sharing-floating .share-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin: 10px 0;
}

.social-sharing-floating .social-sharing-buttons {
    flex-direction: column;
}

/* Top/Bottom Layout */
.social-sharing-top {
    margin-top: 0;
    margin-bottom: 30px;
}

.social-sharing-bottom {
    margin-top: 30px;
    margin-bottom: 0;
}

/* Responsive Adjustments */
@media (max-width: 767px) {
    .social-sharing-floating {
        left: 10px;
        padding: 10px 5px;
    }
    
    .social-sharing {
        --button-size: 36px;
        --icon-size: 16px;
    }
}
/* =============================================
   404 Page Strict Width Control
   ============================================= */
.page404-wrap {
    display: flex;
    align-items: center;
    background-color: var(--background-color);
    justify-content: center;
    min-height: calc(100vh - 200px);
    padding: 40px 20px;
    text-align: center;
    width: 100%;
    max-width: 100vw; /* Strict viewport limitation */
    overflow: hidden; /* Prevent any potential overflow */
    box-sizing: border-box;
}

.notfound {
    max-width: 100%; /* Changed from 600px to 100% */
    width: calc(100% - 40px); /* Accounts for padding */
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Strict containment for all child elements */
.notfound > * {
    max-width: 100%;
    overflow: hidden;
}

.error-image-404 {
    margin-bottom: 20px;
    max-width: 100%;
}

.error-image img {
    max-width: 100%; /* Changed from 200px to 100% */
    height: auto;
    margin: 0 auto;
    display: block;
}

.notfound-404 {
    position: relative;
    margin-bottom: 10px;
    max-width: 100%;
}
.notfound .notfound-404 h1>span {
  color: #00b7ff;
}
.notfound-404 h1 {
    font-size: clamp(80px, 20vw, 150px); /* Responsive font size */
    font-weight: 900;
    line-height: 1;
    margin: 0;
    color: var(--text-color);
    word-break: break-all; /* Prevent number overflow */
}

.error-title-404 {
    font-size: clamp(24px, 5vw, 32px); /* Responsive font size */
    margin-bottom: 20px;
    color: var(--heading-color);
    padding: 0 10px; /* Ensure text doesn't touch edges */
}

.error-description-404 {
    font-size: clamp(16px, 4vw, 18px); /* Responsive font size */
    color: var(--text-color);
    margin-bottom: 30px;
    padding: 0 10px; /* Ensure text doesn't touch edges */
}
.search-form-404 {
    margin: 20px auto; /* Centers horizontally with margin top/bottom */
    color: var(--heading-color);
    padding-left: 250px;
    padding-right: 250px;

}
.home-button-404 {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--primary-color);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    max-width: 100%;
    box-sizing: border-box;
}
/* Hover state */
a.home-button-404:hover {
    color: #fff;
	 text-decoration: none;
  transform: translateY(-2px);
}
/* =============================================
   Mobile-Specific Overrides
   ============================================= */
@media (max-width: 767px) {
    .page404-wrap {
        padding: 40px 15px;
        min-height: calc(100vh - var(--header-height) - var(--footer-height));
    }
    
    .notfound {
        width: calc(100% - 30px);
        padding: 0 15px;
    }
    
    .notfound-404 h1 {
        font-size: clamp(60px, 25vw, 100px);
    }
    .search-form-404 {
    padding-left: 0;
    padding-right: 0;

}
    .home-button {
        width: 100%;
        max-width: 300px;
    }
}

/* =============================================
   Strict Overflow Prevention
   ============================================= */
#page404 * {
    box-sizing: border-box;
    max-width: 100%;
}

#page404 {
    overflow-x: hidden;
    position: relative;
}

/* =============================================
   Page Main Structure
   ============================================= */
.site-main * {
    box-sizing: border-box;
    max-width: 100%;
}

.site-main {
    overflow-x: hidden;
    position: relative;
}
/* =============================================
   Page Layout with Breadcrumb and Sidebar
   ============================================= */

.site-main {
  width: 100%;
  padding: 20px 0;
  position: relative;
}

/* Main content container */
.page-content-container {
  width: 100%;
  padding: 0 var(--container-padding);
  display: flex;
  flex-direction: column;
}

.page-content-wrapper {
  width: 100%;
  padding: 10px;
	background-color: var(--background-alt);
  border-radius: var(--border-radius);
}

/* Entry content box */
.entry-page-box {
  background-color: var(--background-alt);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 30px;
  margin-bottom: 30px;
}

/* Page header styles */
.entry-page-header {
  margin-left: 10px;
  margin-right: 10px;
  padding-top: 10px;
}

.entry-page-header.header-style-left-heading {
  text-align: left;
  
}

.entry-page-header.header-style-center-heading {
  text-align: center;
}

.entry-page-header.header-style-right-heading {
  text-align: right;
}

.entry-page-title {
  margin: 0;
  color: var(--heading-color);
  font-size: var(--h1-font-size);
}

/* Page content styles */
.entry-page-content {
  line-height: 1.8;
}

.entry-page-content p {
  margin-bottom: 1.5em;
}

.post-thumbnail {
  margin-bottom: 30px;
}

.post-thumbnail img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
}

/* Footer edit link */
.entry-page-footer {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

/* Sidebar styles */
#secondary-sidebar {
  width: 100%;
  padding: 0;
}

#secondary-sidebar .widget {
  background-color: var(--background-alt);
  border-radius: var(--border-radius);
  margin-bottom: 25px;
}
.widget_block {
  background-color: var(--background-alt);
  border-radius: var(--border-radius);
  padding: 20px;
}
.widget {
  margin-bottom:20px;
}
/* Layout variations */
/* No sidebar - full width content */
.page-layout-no .page-content-wrapper {
  width: 100%;
}

/* With sidebar - responsive column layout */
@media (min-width: 992px) {
  .page-content-container {
    flex-direction: row;
    gap: 20px;
  }
  
  /* Right sidebar layout */
  .page-layout-right .page-content-wrapper {
    width: 70%;
    order: 1;
  }
  
  .page-layout-right #secondary-sidebar {
    width: 30%;
    order: 2;
  }
  
  /* Left sidebar layout */
  .page-layout-left .page-content-wrapper {
    width: 70%;
    order: 2;
  }
  
  .page-layout-left #secondary-sidebar {
    width: 30%;
    order: 1;
  }
}

/* Tablet responsive */
@media (max-width: 991px) and (min-width: 768px) {
  .page-content-container {
    gap: 20px;
  }
  
  .page-layout-right .page-content-wrapper,
  .page-layout-left .page-content-wrapper {
    width: 100%;
  }
  
  .page-layout-right #secondary-sidebar,
  .page-layout-left #secondary-sidebar {
    width: 35%;
  }
}

/* Mobile responsive */
@media (max-width: 767px) {
  .page-content-container {
    flex-direction: column;
    gap: 0;
  }
  
  .page-layout-right .page-content-wrapper,
  .page-layout-left .page-content-wrapper,
  .page-layout-right #secondary-sidebar,
  .page-layout-left #secondary-sidebar {
    width: 100%;
  }
  
  #secondary-sidebar {
    margin-top: 30px;
  }
  
  .entry-page-box {
    padding: 20px;
  }
}

/* Widget area styles */
.widget-area .widget {
  margin-bottom: 30px;
}

.widget-title {
  font-size: 1.25rem;
  margin-bottom: 0px;
    margin-left: 20px;
  margin-right: 10px;
  padding-bottom: 10px;
    padding-top: 10px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 480px) {
  .breadcrumb-container,
  .page-content-container {
    padding: 0 15px;
  }
  
  .entry-page-box {
    padding: 15px;
  }
  
  .entry-page-header {
    margin-bottom: 20px;
  }
  
  .entry-page-title {
    font-size: 1.8rem;
  }
}
/* =============================================
   Breadcrumb Styles 
   ============================================= */

.breadcrumb-container {
  width: 100%;
  padding: 0 var(--container-padding);
  margin: 0 0 1.5rem 0;
}

.yomooh-breadcrumbs {
  width: 100%;
  font-family: var(--menu-font-family);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-color);
  border-radius: 12px;
  display: flex;
  padding-left: 30px;
  justify-content: center; /* Default center */
}

/* Position variations */
.yomooh-breadcrumbs[data-position="left"] {
  justify-content: flex-start;
}

.yomooh-breadcrumbs[data-position="center"] {
  justify-content: center;
}

.yomooh-breadcrumbs[data-position="right"] {
  justify-content: flex-end;
}

.breadcrumb-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  width: auto;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  color: var(--text-color);
  font-weight: 500;
}

.breadcrumb-item a {
  color: var(--link-color);
  text-decoration: none;
  transition: var(--transition);
}

.breadcrumb-item a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: var(--heading-color);
  font-weight: 600;
}

.breadcrumb-separator {
  margin: 0 0.5rem;
  color: var(--border-color);
  font-weight: 400;
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .yomooh-breadcrumbs {
    padding: 0.1rem;
  }
  
  .breadcrumb-list {
    justify-content: center !important;
  }
  
  .breadcrumb-separator {
    margin: 0 0.3rem;
  }
}
/* =============================================
   Search Results Page Layout
   ============================================= */

/* Main container */
.search-layout-no .page-content-wrapper {
  width: 100%;
}

.search-results-container {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
}

/* Search result item */
.search-result {
  background-color: var(--background-alt);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 2rem;
  transition: var(--transition);
}

.search-result:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Entry header */
.entry-header {
  margin-bottom: 1rem;
}

.entry-title {
  font-size: 1.5rem;
  margin: 0;
}

.entry-title a {
  color: var(--heading-color);
  text-decoration: none;
}

.entry-title a:hover {
  color: var(--primary-color);
}

/* Entry summary */
.entry-summary {
  color: var(--text-color);
  line-height: 1.7;
}

/* Highlight search terms */
.search-highlight {
  background-color: rgba(255, 255, 0, 0.3);
  padding: 0 2px;
  font-weight: bold;
}

/* Read more link */
.read-more {
  display: inline-block;
  margin-top: 1rem;
  color: var(--primary-color);
  font-weight: 500;
  text-decoration: none;
}

.read-more:hover {
  text-decoration: underline;
}

/* Pagination */
.pagination {
  margin: 3rem 0 1rem;
  display: flex;
  justify-content: center;
}

.page-numbers {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
}

.page-numbers li a,
.page-numbers li span {
  display: block;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  text-decoration: none;
}

.page-numbers li a:hover {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.page-numbers li span.current {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

/* With sidebar - responsive column layout */
@media (min-width: 992px) {
  .page-content-container {
    display: flex;
  }
  
  /* Right sidebar layout */
  .search-layout-right .page-content-wrapper {
    width: 70%;
  }
  
  .search-layout-right #secondary-sidebar {
    width: 30%;
  }
  
  /* Left sidebar layout */
  .search-layout-left .page-content-wrapper {
    width: 70%;
    order: 2;
  }
  
  .search-layout-left #secondary-sidebar {
    width: 30%;
    order: 1;
  }
}

/* Tablet responsive */
@media (max-width: 991px) and (min-width: 768px) {
  .page-content-container {
    gap: 2rem;
  }
  
  .search-layout-right .page-content-wrapper,
  .search-layout-left .page-content-wrapper {
    width: 65%;
  }
  
  .search-layout-right #secondary-sidebar,
  .search-layout-left #secondary-sidebar {
    width: 35%;
  }
}
@media (max-width: 768px) {
  .single-layout-standard {
    padding: 6px;
  }
}
/* Mobile responsive */
@media (max-width: 767px) {
  .page-content-container {
    flex-direction: column;
    gap: 0;
  }
  
  .search-layout-right .page-content-wrapper,
  .search-layout-left .page-content-wrapper,
  .search-layout-right #secondary-sidebar,
  .search-layout-left #secondary-sidebar {
    width: 100%;
  }
  
  #secondary-sidebar {
    margin-top: 3rem;
  }
  
  .search-result {
    padding: 1.5rem;
  }
}

/* Page header */
.page-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.page-title {
  font-size: 2rem;
  margin: 0;
  color: var(--heading-color);
}

.page-title span {
  color: var(--primary-color);
}
/* Search Results Page */
.search-meta {
    margin-top: 10px;
    font-size: 0.9em;
    color: var(--text-color);
    opacity: 0.8;
}

.search-post-types {
    display: flex;
    padding: 3px 8px;
    background-color: var(--background-alt);
    border-radius: var(--border-radius);
    flex-direction: row;
    flex-wrap: nowrap;
}

.search-results-container {
    display: grid;
    gap: 2rem;
    margin: 2rem 0;
}

/* Pagination Styles */
.search-pagination {
    margin: 3rem 0;
    text-align: center;
}

.nav-links {
    display: inline-flex;
    gap: 5px;
}

.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 15px;
    border-radius: var(--border-radius);
    background-color: var(--background-alt);
    color: var(--text-color);
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
}

.page-numbers.current {
    background-color: var(--primary-color);
    color: #fff;
    font-weight: 600;
}

.page-numbers:hover:not(.current) {
    background-color: var(--border-color);
    text-decoration: none;
    color: var(--heading-color);
}

.pagination-arrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: var(--transition);
}

a.page-numbers:hover .pagination-arrow {
    transform: translateX(-3px);
}

a.next.page-numbers:hover .pagination-arrow {
    transform: translateX(3px);
}

/* Search Highlight */
.search-highlight {
    background-color: rgba(255, 235, 59, 0.3);
    padding: 0 2px;
    border-radius: 2px;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 767px) {
    .page-numbers {
        min-width: 35px;
        height: 35px;
        padding: 0 10px;
        font-size: 0.9em;
    }
    
    .search-meta {
        font-size: 0.85em;
    }
}
/* =============================================
   Single Post Styles
   ============================================= */

/* Layout */
/* Base container styles */
.page-content-container {
    width: 100%;
    padding: 0 var(--container-padding);
    margin: 0 auto;
    box-sizing: border-box;
}

/* Fullwidth layout (no sidebar) */
.single-no .single-content-wrapper,
.single-layout-fullwidth .single-content-wrapper {
    width: 100%;
    max-width: 100%;
}

/* Modern layout base */
.single-layout-modern .single-content-wrapper {
    margin: 0 auto;
}

/* Standard layout with sidebar - MOBILE FIRST (stacked) */
.single-content-wrapper {
    width: 100%;
    order: 2; /* Content comes first in mobile */
}

#secondary-sidebar {
    width: 100%;
    order: 1; /* Sidebar comes after content in mobile */
    margin-bottom: 30px;
}

/* Desktop styles (min-width: 992px) */
@media (min-width: 992px) {
    /* Standard layout container */
    .single-layout-standard .page-content-container {
        display: flex;
        gap: 40px;
    }
    
    /* Right sidebar layout */
    .single-layout-standard.single-right .single-content-wrapper {
        width: 70%;
        order: 1;
    }
    
    .single-layout-standard.single-right #secondary-sidebar {
        width: 30%;
        order: 2;
    }
    
    /* Left sidebar layout */
    .single-layout-standard.single-left .single-content-wrapper {
        width: 70%;
        order: 2;
    }
    
    .single-layout-standard.single-left #secondary-sidebar {
        width: 30%;
        order: 1;
    }
    
    /* Modern layout adjustments */
    .single-layout-modern.single-left .page-content-container,
    .single-layout-modern.single-right .page-content-container {
        display: flex;
        gap: 40px;
    }
    
    .single-layout-modern.single-right .single-content-wrapper {
        width: 70%;
        order: 1;
    }
    
    .single-layout-modern.single-right #secondary-sidebar {
        width: 30%;
        order: 2;
    }
    
    .single-layout-modern.single-left .single-content-wrapper {
        width: 70%;
        order: 2;
    }
    
    .single-layout-modern.single-left #secondary-sidebar {
        width: 30%;
        order: 1;
    }
}

/* Mobile adjustments (max-width: 991px) */
@media (max-width: 991px) {
    /* Ensure all layouts stack vertically on mobile */
    .single-layout-standard .page-content-container,
    .single-layout-modern .page-content-container {
        display: block;
    }
    
    .single-content-wrapper,
    #secondary-sidebar {
        width: 100% !important;
    }
    
    /* Reset any desktop-specific ordering */
    .single-content-wrapper,
    #secondary-sidebar {
        order: initial !important;
    }
}

/* Modern layout fullwidth specific styles */
.single-layout-modern.single-no .single-content-wrapper,
.single-layout-modern.single-layout-fullwidth .single-content-wrapper {
    max-width: 100%;
    padding: 0;
}
/* Post content */
.single-post {
    background-color: var(--background-alt);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: var(--container-padding);
}

.single-post-thumbnail {
    margin-bottom: 1.3rem;
    position: relative;
}
.single-box-thumbnail {
    display: inline-block; /* Makes container wrap content */
    position: relative;
    line-height: 0; /* Removes extra space below image */
}
.single-post-thumbnail img {
    display: block;
    width: 100%;
    height: auto;
    margin-top: -10px;
    border-radius: var(--border-radius);
}

.wp-caption-text {
    margin-top: 0.5rem;
    font-size: 0.9em;
    color: var(--text-color);
    opacity: 0.8;
    text-align: center;
}

.single-entry-header {
    margin-bottom: 2rem;
}

.single-entry-title {
    font-size: 2.2rem;
    margin-bottom: 1rem;
    color: var(--heading-color);
}

/* Single Post Meta Styles */
.single-entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    font-size: 0.9rem;
    color: var(--text-color);
    margin-bottom: 2rem;
}

.post-author-metas {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: 15px;
}

.post-author-metas img {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.post-single-author-info {
    display: flex;
    flex-direction: column;
}

.post-single-author-name {
    font-weight: 600;
    margin-top: 5px;
    color: var(--heading-color);
}
/* Author link styles */
.post-author-metas a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.post-author-metas a:hover {
    opacity: 0.8;
}
.post-date {
    font-size: 0.8em;
    color: var(--meta-color);
    opacity: 0.8;
}

.cat-links a {
    display: inline-block;
    background: var(--card-bg);
    padding: 5px 16px 5px 16px;
    border-radius: 20px;
    margin-right: 5px;
    margin-bottom: 5px;
    color: var(--link-color);
    text-decoration: none;
    font-size: 0.8em;
    transition: all 0.3s ease;
}

.cat-links a:hover {
    background: var(--link-hover-color);
    color: #fff;
}

.single-reading-time,
.single-comments-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--meta-color);
}
.post-single-meta-row {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
    }
/* Responsive Styles */
@media (max-width: 768px) {
    .single-entry-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .post-author-metas {
        margin-bottom: 0px;
        width: 100%;
    }
    
    .cat-links {
        order: 2;
        margin-left: -10px;
        width: 100%;
    }
    
    .post-single-meta-row {
        order: 1;
        display: flex;
        gap: 25px;
        margin-bottom: 0px;
        margin-left: 60px;
        justify-content: center;
        align-items: center;
    }
    
    .single-reading-time,
    .single-comments-link {
        display: inline-flex;
        margin: 0;
    }
    
    .social-sharing {
        order: 4;
    }
}

/* Entry Footer Styles */
.single-entry-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.single-tags-links {
    display: block;
    font-size: 0.9rem;
    color: var(--meta-color);
}

.single-tags-links a {
   display: inline-block;
    background: var(--card-bg);
    padding: 5px 16px 5px 16px;
    border-radius: 12px;
    margin-right: 5px;
    margin-bottom: 5px;
    color: var(--link-color);
    text-decoration: none;
    font-size: 0.8em;
    transition: all 0.3s ease;
}

.single-tags-links a:hover {
    text-decoration: none;
    background: var(--link-hover-color);
    color: #fff;
}

.single-entry-content {
    line-height: 1.8;
    margin-bottom: 2rem;
}

.single-entry-content p {
    margin-bottom: 1.5em;
}

.single-entry-footer {
    margin-top: 2rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border-color);
}

.single-tags-links {
    display: inline-block;
    font-size: 0.9rem;
}
.wp-playlist-light {
    background: var(--background-alt)!important;
    color:var(--heading-color)!important; 
    border: none!important; 
}
.wp-playlist-current-item span{
    overflow: hidden;
    color:var(--heading-color)!important;
    margin-bottom: 10px;
    height: 60px
}
.mejs-container .mejs-controls {
    background: steelblue!important;
    border-radius: 10px
}
/* Hide everything except .wp-playlist-item-title */
.wp-playlist-light .wp-playlist-playing .wp-playlist-caption > *:not(.wp-playlist-item-title),
.wp-playlist-light .wp-playlist-playing .wp-playlist-item-length {
    display: none !important;
    background: steelblue!important;

}
.wp-playlist-light .wp-playlist-playing * {
    display: none !important;
}
/* Show the title span */
.wp-playlist-light .wp-playlist-playing .wp-playlist-item-title {
    display: inline !important;
    color:var(--heading-color)!important;
    font-size: 16px !important;
    font-weight: 600;
}
.wp-playlist-light .wp-playlist-playing {
    background: var(--background-alt)!important;
}
.mejs-container.mejs-audio {
  margin-top: -40px !important; /* Or whatever value you prefer */
}
.mejs-container.mejs-audio {
  max-width: 700px !important;
  margin-left: 60px !important;
 border: none!important;
   background: var(--background-alt)!important;

}
@media (max-width: 768px) {
  .mejs-container.mejs-audio {
    margin-top: -40px !important; /* Less negative margin on mobile */
    margin-left: 10 !important;    /* Reset left margin for mobile */
    width: 85% !important;   /* Full width on mobile */
    background: var(--background-alt) !important;
    border: none !important;
  }
    .wp-playlist {
    border: 1px solid #ccc;
    padding: 0px!important;
    margin-bottom: 40px!important;
    font-size: 14px;
    line-height: 1.5
}
}

.mejs-container.mejs-video {
 border-radius: 10px!important;
}
.mejs-video .mejs-controls {
    background: steelblue!important;
    border-radius: 0px
}
p iframe {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  border: none;
  margin: 1.5rem auto;
}
/* General Gallery Container */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  padding-bottom: 20px;
}

/* Each Gallery Item - Desktop (3 columns) */
.gallery-item {
  flex: 0 0 calc(33.333% - 10px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.3s ease;
}

/* Image Style */
.gallery-icon img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Hover effect */
.gallery-item:hover {
  transform: scale(1.05);
}

/* ===== MOBILE STYLES ===== */
@media (max-width: 768px) {
  .gallery {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    position: relative;
    margin-bottom: 20px;
  }

  .gallery-item {
    flex: 0 0 auto;
    width: 90%;
    gap: 10px;
    margin-bottom: 0px;
    scroll-snap-align: start;
  }
}

/* Author box */
.author-boxs {
    display: flex;
    gap: 20px;
    background-color: var(--background-alt);
    border-radius: var(--border-radius);
    margin-bottom: 2rem;
    /* border: 1px solid var(--border-color); */
}

.author-avatars img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
}
.author-infos {
    flex: 1;
}
.author-tops {
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.author-titles {
    margin: 0 0 0.5rem;
    font-size: 1.3rem;
}
.user-social-links {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.user-social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  transition: all 0.3s ease;
  text-decoration: none;
}

.user-social-links a svg {
  width: 24px;
  height: 24px;
  fill: var(--text-color);
  transition: fill 0.3s ease;
}

.user-social-links a:hover {
  background-color: #4a90e2;
  transform: translateY(-2px);
}

.user-social-links a:hover svg {
  fill: #fff;
}

/* Dark mode support */
[data-scheme="dark"] .user-social-links a {
  background-color: #1e1e1e;
}

[data-scheme="dark"] .user-social-links a svg {
  fill: #ddd;
}

[data-scheme="dark"] .user-social-links a:hover {
  background-color: #4a90e2;
}

[data-scheme="dark"] .user-social-links a:hover svg {
  fill: #fff;
}

.author-bios {
    margin-bottom: 1rem;
    line-height: 1.7;
}

.author-links {
    display: flex;
    gap: 15px;
    font-size: 0.9rem;
}

.author-links a {
    color: var(--primary-color);
    text-decoration: none;
}

.author-links a:hover {
    text-decoration: underline;
}

/* Related posts */
.related-posts {
    margin-bottom: 3rem;
}

.related-title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-color);
}

.related-posts-grid {
    display: grid;
    gap: 30px;
}

.columns-2 .related-posts-grid {
    grid-template-columns: repeat(2, 1fr);
}

.columns-3 .related-posts-grid {
    grid-template-columns: repeat(3, 1fr);
}

.columns-4 .related-posts-grid {
    grid-template-columns: repeat(4, 1fr);
}

.related-post {
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition);
}

.related-post:hover {
    transform: translateY(-5px);
}

.related-thumbnail {
    display: block;
    overflow: hidden;
	border-radius: var(--border-radius);

}

.related-thumbnail img {
    display: block;
    width: 100%;
	 object-fit: cover;
	 border-radius: var(--border-radius);
     object-position: var(--feat-position,center);
    transition: transform 0.3s ease;
}

.related-post:hover .related-thumbnail img {
    transform: scale(1.05);
}

.related-header {
   padding-top: 0.7rem;
}

.related-post-title {
    font-size: 1.1rem;
    margin: 0 0 0.5rem;
}

.related-post-title a {
    color: var(--heading-color);
    text-decoration: none;
}

.related-post-title a:hover {
    color: var(--primary-color);
}

.related-meta {
    font-size: 0.85rem;
    color: var(--text-color);
    opacity: 0.8;
}

.post-navigation {
    display: flex;
    justify-content: space-between;
    margin: 3rem 0;
    padding: 0;
    border: none;
    background: transparent;
}

.post-navigation div {
    flex: 1;
    padding: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
}

.post-navigation a {
    display: block;
    padding: 1rem;
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s ease;
    background: transparent;
    border: none;
    border-radius: 0;
}

.post-navigation a:hover {
    color: var(--primary-color);
    background: transparent;
}

.nav-subtitle {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-color-light);
}

.nav-title {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 0.5rem;
    color: var(--heading-color);
}
.nav-title:hover {
    color: var(--primary-color);
}
.nav-previous {
    text-align: left;
    padding-right: 1rem;
}

.nav-next {
    text-align: right;
    padding-left: 1rem;
}

.nav-subtitle i {
    margin-right: 0.5rem;
}

.nav-next .nav-subtitle i {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* Comments */
.comments-area {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}


/* Responsive */
@media (max-width: 991px) {
    .columns-3 .related-posts-grid,
    .columns-4 .related-posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .user-social-links {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
    .author-box {
        display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
    }
    
    .author-links {
        justify-content: start;
    }
}

@media (max-width: 767px) {
    .single-entry-title {
        font-size: 1.8rem;
    }
    
    .related-posts-grid {
        grid-template-columns: 1fr !important;
    }
    
    .post-navigation a {
        max-width: 100%;
        margin-bottom: 15px;
    }
    
    .post-navigation {
        flex-direction: column;
    }
    
    
}
/* =============================================
   Comments Header Row Styles
   ============================================= */

.comment-header-row {
    display: flex;
    /* border-bottom: 1px solid var(--border-color); */
    justify-content: space-between;
}



.comment-count-toggle:hover {
    transform: translateY(-2px);
}

.comment-count-toggle i {
    margin-right: 0.55rem;
    font-size: 1.2rem;
    color: var(--primary-color);
}

.comments-title {
    font-size: 1.25rem;
    margin-top: -0.15rem;
    color: var(--heading-color);
}

.comment-form-toggle {
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 1.3rem;
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: var(--border-radius);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.comment-form-toggle:hover {
    background-color: var(--link-hover-color);
    transform: translateY(-2px);
}

.comment-form-toggle:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    background-color: var(--primary-color);
}

.comment-form-toggle i {
    margin-right: 0.5rem;
}

.comment-list-container {
    margin-bottom: 2rem;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .comment-header-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .comment-count-toggle {
        margin-bottom: 1rem;
        margin-left: 4px;
    }
    .comment-form-toggle {
        width: 100%;
        justify-content: center;
    }
}

.comments-area {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.comments-title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--heading-color);
}

/* Comment list */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

.comment-list ol.children {
    list-style: none;
    padding-left: 2rem;
    margin-left: 1rem;
    border-left: 2px solid var(--border-color);
}

@media (min-width: 768px) {
}

/* Individual comment */
.comment-body {
    padding: 1.2rem;
    margin-bottom: 1.5rem;
    background-color: var(--background-alt);
    border-radius: 14px;
    box-shadow: var(--box-shadow);
}

.comment-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.comment-author {
    display: flex;
    align-items: center;
    margin-right: 1rem;
    margin-bottom: 0.5rem;
}

.comment-author .avatar {
    border-radius: 50%;
    margin-right: 1rem;
    width: 50px;
    height: 50px;
}

.comment-author .fn {
    font-weight: 600;
    font-style: normal;
    color: var(--heading-color);
}

.comment-metadata {
    display: flex;
    align-items: center;
    color: var(--text-color);
    opacity: 0.8;
}

.comment-metadata a {
    color: inherit;
    text-decoration: none;
}

.comment-metadata a:hover {
    color: var(--primary-color);
}

.comment-metadata .edit-link {
    margin-left: 1rem;
     margin-right: 1rem;
    padding: 0.3rem 0.8rem;
    background-color: var(--background-alt);
    border-radius: var(--border-radius);
    color: var(--text-color);
    font-size: 1.1rem;
    font-weight: 900;
    text-decoration: none;
    transition: var(--transition);
}
.comment-metadata .edit-link:hover {
    background-color: var(--primary-color);
    color: #fff;
}
.comment-metadata .edit-link a:hover {
    color: #fff;
  text-decoration: none;
}
.comment-content {
    line-height: 1.7;
    color: var(--text-color);
    margin-bottom: 1rem;
}

.comment-content p {
    margin-bottom: 1em;
}

.comment-awaiting-moderation {
    color: var(--warning-color);
    font-size: 0.9rem;
    margin: 0.5rem 0;
}

.reply-link {
    padding: 0.3rem 0.8rem;
    background-color: var(--background-alt);
    border-radius: var(--border-radius);
    color: var(--text-color);
    font-size: 1.1rem;
    text-decoration: none;
    transition: var(--transition);
}
.reply-link a:hover {
    color: #fff;
  text-decoration: none;
}
.reply-link:hover {
    background-color: var(--primary-color);
    color: #fff;
}

/* Comment navigation */
.comment-navigation {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

.comment-navigation a {
    color: var(--text-color);
    text-decoration: none;
    transition: var(--transition);
}

.comment-navigation a:hover {
    color: var(--primary-color);
}

/* Comment form toggle */
.comment-form-toggle {
    display: inline-flex;
    align-items: center;
    padding: 0.8rem 1.5rem;
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: var(--border-radius);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    margin-bottom: 1.5rem;
}

.comment-form-toggle:hover {
    background-color: var(--link-hover-color);
    transform: translateY(-2px);
}

.comment-form-toggle i {
    margin-right: 0.5rem;
}

.comment-form-container {
    display: none;
    padding: 1.5rem;
    background-color: var(--background-alt);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: 2rem;
}

.comment-form-container.active {
    display: block;
}

/* Comment form */
.comment-respond {
    margin-top: 0;
}

.comment-reply-title {
    font-size: 0.9rem;
   color: var(--text-color);
    margin-bottom: 1rem;
}

.comment-reply-title small {
    font-size: 1.0em;
    
}

.comment-reply-title small a {
    color: var(--heading-color);
    text-decoration: none;
    margin-left: 0.7rem;
}

.comment-reply-title small a:hover {
    color: var(--primary-color);
}

.comment-form {
    display: grid;
    gap: 1.5rem;
}

.comment-notes,
.logged-in-as,
.must-log-in {
    font-size: 0.9rem;
    color: var(--text-color);
    opacity: 0.8;
    margin-bottom: 1rem;
}

.comment-form-comment,
.comment-form-author,
.comment-form-email,
.comment-form-url {
    display: flex;
    flex-direction: column;
}

.comment-form-comment label,
.comment-form-author label,
.comment-form-email label,
.comment-form-url label {
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--background-color);
    color: var(--text-color);
    transition: var(--transition);
}
/* Comment Cookies Consent Checkbox */
.comment-form-cookies-consent {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    font-size: 0.9rem;
    color: var(--text-color);
    line-height: 1.5;
}

.comment-form-cookies-consent input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0 0.75rem 0 0;
    cursor: pointer;
    accent-color: var(--primary-color);
    flex-shrink: 0;
}

.comment-form-cookies-consent label {
    cursor: pointer;
    user-select: none;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.comment-form-cookies-consent label:hover {
    opacity: 1;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .comment-form-cookies-consent {
        font-size: 0.85rem;
    }
    
    .comment-form-cookies-consent input[type="checkbox"] {
        width: 16px;
        height: 16px;
    }
}
.comment-form textarea {
    min-height: 150px;
    resize: vertical;
}

.comment-form textarea:focus,
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.1);
}

.form-submit {
    margin-top: 1rem;
}

.comment-form .submit {
    display: inline-block;
    padding: 0.8rem 1.8rem;
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: var(--border-radius);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.comment-form .submit:hover {
    background-color: var(--link-hover-color);
    transform: translateY(-2px);
}

/* No comments */
.no-comments {
    padding: 1rem;
    background-color: var(--background-alt);
    border-radius: var(--border-radius);
    text-align: center;
    color: var(--text-color);
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .comment-list ol.children {
        padding-left: 1.5rem;
        margin-left: 0.5rem;
    }
    
    .comment-body {
        padding: 1rem;
    }
    
    .comment-author .avatar {
        width: 40px;
        height: 40px;
    }
    
    .comment-form {
        gap: 1rem;
    }
}

/* Floating comment button (mobile) */
@media (max-width: 480px) {
    .comment-count-toggle {
    display: flex;
    cursor: pointer;
    transition: var(--transition);
    border-radius: var(--border-radius);
}
    .comment-header-row {
    display: flex;
    flex-direction: row;
}
   .comment-form-toggle {
      width: 160px;
     padding: 10px 0px 10px 0px;
      display: flex;
      margin-right: 0px;
      /* box-shadow: 0 4px 12px rgba(0,0,0,0.15); */
    }
    
    .comment-form-toggle.active {
        position: static;
        margin-bottom: 1rem;
        box-shadow: none;
    }
    
    .comment-form-toggle.active span {
        display: inline;
    }
    
    .comment-form-toggle.active i {
        margin-right: 0.5rem;
    }
}
/* =============================================
   Blog Layout Structure
   ============================================= */

.blog-content-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.blog-content-wrapper {
    flex: 1;
    min-width: 0;
    width: 100%; /* Ensure full width when sidebar is present */
}


/* =============================================
   Blog Posts Container - Smart Grid System
   ============================================= */

.blog-posts-container {
    display: grid;
    gap: 2rem;
    margin-bottom: 4rem;
}
/* Mobile-first: single column by default */
.blog-posts-container.grid-layout {
  grid-template-columns: repeat(1, 1fr);
}

/* 2 Columns - Tablet and Desktop */
@media (min-width: 768px) {
  .blog-posts-container.grid-layout.columns-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 3 Columns - Desktop only */
@media (min-width: 992px) {
  .blog-posts-container.grid-layout.columns-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Special case for columns-4 with page-layout-no */
  .page-content-container.page-layout-no .blog-posts-container.grid-layout.columns-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 4 Columns - Desktop only (unless page-layout-no) */
@media (min-width: 1200px) {
  .blog-posts-container.grid-layout.columns-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* Override for page-layout-no */
  .page-content-container:not(.page-layout-no) .blog-posts-container.grid-layout.columns-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Optional: Add these if you need even more responsive control */
@media (max-width: 767px) {
  /* Force single column on mobile */
  .blog-posts-container.grid-layout[class*="columns-"] {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}
/* Standard Layout (Always 1 column) */
.standard-layout {
    grid-template-columns: 1fr;
}

/* List Layout (Always 1 column) */
.list-layout {
    grid-template-columns: 1fr;
}


@media (max-width: 992px) {
    /* Stack sidebar below content */
    .blog-content-container {
        flex-direction: column;
        gap: 2rem;
    }
    
}

@media (max-width: 768px) {
    /* All layouts become single column on mobile */
    .blog-posts-container {
        grid-template-columns: 1fr !important;
    }
    
}

/* =============================================
   Pagination Styles (Unchanged)
   ============================================= */

.pagination-container {
    width: 100%;
    margin: 3rem 0;
    text-align: center;
}

.standard-pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.standard-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--background-alt);
    color: var(--text-color);
    font-weight: 500;
    transition: var(--transition);
}

.standard-pagination .page-numbers.current,
.standard-pagination .page-numbers:hover {
    background: var(--primary-color);
    color: #fff;
    transform: translateY(-2px);
}

.standard-pagination .prev,
.standard-pagination .next {
    width: auto;
    padding: 0 1.25rem;
}

.numeric-pagination {
    display: inline-flex;
    gap: 0.5rem;
}

.numeric-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 0.75rem;
    border-radius: var(--border-radius);
    background: var(--background-alt);
    color: var(--text-color);
    font-weight: 500;
    transition: var(--transition);
}

.numeric-pagination .page-numbers.current,
.numeric-pagination .page-numbers:hover {
    background: var(--primary-color);
    color: #fff;
    transform: translateY(-2px);
}

.loadmore-button {
    padding: 0.875rem 2.25rem;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.loadmore-button:hover {
    background: var(--link-hover-color);
    transform: translateY(-3px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.loadmore-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    margin: 1.5rem auto;
    border: 4px solid rgba(var(--primary-color-rgb), 0.2);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.infinite-pagination {
    position: relative;
    height: 80px;
}

/* =============================================
   Mobile Responsiveness
   ============================================= */

@media (max-width: 480px) {
    .numeric-pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .standard-pagination .nav-links {
        gap: 0.5rem;
    }
    
    .standard-pagination .page-numbers,
    .numeric-pagination .page-numbers {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }
}

/* Author Header Layout */
.author-header {
    display: flex;
    gap: 25px;
    align-items: flex-start;
    padding: 30px;
    background: var(--card-bg);
    border-radius: var(--border-radius);
    margin-bottom: 40px;
}

/* Avatar Container with Stats */
.author-avatar-container {
    position: relative;
    flex-shrink: 0;
}

.author-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary-color);
    display: block;
}

/* Stats Positioned Top Right of Avatar */
.author-stats {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--primary-color);
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    border: 3px solid var(--card-bg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Author Info */
.author-info-container {
    flex: 1;
    min-width: 0;
}

.author-name {
    font-size: 28px;
    margin: 0 0 10px 0;
    color: var(--heading-color);
    line-height: 1.2;
}

.author-social {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
}

.author-bio {
    color: var(--text-color);
    line-height: 1.6;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .author-header {
        padding: 25px;
        gap: 20px;
		margin-bottom: 0px;
    }
    
    .author-avatar {
        width: 80px;
        height: 80px;
    }
    
    .author-stats {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }
    
    .author-name {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .author-header {
        padding: 20px;
		margin-bottom: 0px;

    }
    
    .author-avatar {
        width: 70px;
        height: 70px;
    }
    
    .author-stats {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
    
    .author-name {
        font-size: 22px;
        margin-bottom: 8px;
    }
    
    .author-social {
        margin-bottom: 12px;
    }
}
/* Category Header Styles */
.category-header {
    padding: 0px 0;
    text-align: center;
    margin-bottom: 40px;
    border-radius: var(--border-radius);
}
.archive-header {
    padding: 0px 0;
    text-align: center;
    margin-bottom: 40px;
    border-radius: var(--border-radius);
}
.category-header .cat-title {
    font-size: 2.5rem;
    margin: 0;
    color: var(--heading-color);
    line-height: 1.2;
    font-weight: 700;
}
.category-archive .archive-title {
    font-size: 2.5rem;
    margin: 0;
    color: var(--heading-color);
    line-height: 1.2;
    font-weight: 700;
}
.archive-description {
    max-width: 800px;
    margin: 20px auto 0;
    color: var(--text-color);
    line-height: 1.6;
    font-size: 1.1rem;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .category-header {
    padding: 0px 0;
    text-align: center;
    margin-bottom: 40px;
    border-radius: var(--border-radius);
}
	.archive-header {
    padding: 0px 0;
    text-align: center;
    margin-bottom: 40px;
    border-radius: var(--border-radius);
}
.category-header .cat-title {
        font-size: 2rem;
    }
    .archive-header .archive-title {
        font-size: 2rem;
    }
    .archive-description {
        font-size: 1rem;
        padding: 0 20px;
    }
}


/*--------------------------------------------------------------
# scroll top
--------------------------------------------------------------*/
.scroll-top {
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0px 5px 20px 0px rgba(var(--color-box-shadow-rgb), 0.15);
    color: var(--color-primary);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    cursor: pointer;
}

@media (min-width: 992px) {
    .scroll-top {
        bottom: 2rem;
        right: 2rem;
    }
}

.scroll-top:before {
    content: unset;
}

.scroll-top:after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: -1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--layout-background);
    transition: 0.25s;
}

.scroll-top.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Progress circle styles */
.scroll-top-border, 
.scroll-top-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
}

.scroll-top-border svg,
.scroll-top-progress svg {
    transform: rotate(-70deg);
    width: 100%;
    height: 100%;
}

.scroll-top-border path, 
.scroll-top-progress path {
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 141.37;
    stroke-dashoffset: 141.37;
    transition: stroke-dashoffset 0.1s linear;
}

.scroll-top-border path {
    stroke: var(--layout-background);
}

.scroll-top-progress path {
    stroke:#70c486;
}

/* Icon styles */
.scroll-top i {
    font-size: 1.5rem;
    transition: 0.25s;
    position: relative;
    z-index: 2;
}

/* Hover states */
.scroll-top:hover {
    background: inherit;
    color: var(--primary-color);
}

.scroll-top:hover i {
    opacity: 0.8;
}

.scroll-top:focus {
    background: inherit;
    color: var(--primary-color);
    outline: none;
}

/* Animation for progress fill */
@keyframes fillProgress {
    from { stroke-dashoffset: 141.37; }
    to { stroke-dashoffset: 0; }
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .scroll-top {
        width: 42px;
        height: 42px;
        bottom: 1rem;
        right: 1rem;
    }
    
    .scroll-top:after {
        width: 38px;
        height: 38px;
    }
    
    .scroll-top-border,
    .scroll-top-progress {
        width: 42px;
        height: 42px;
    }
    
    .scroll-top i {
        font-size: 1.25rem;
    }
}

/* =============================================
   List Blog Post Layout
   ============================================= */

.blog-post.list-post {
    display: flex;
    flex-direction: column;
    padding-bottom: 2rem;
}

.post-thumbnail {
    position: relative;
    margin-bottom: 1.5rem;
    overflow: hidden;
    border-radius: var(--border-radius);
    width: 100%; /* Ensure full width on mobile */
}

.post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.post-thumbnail .reading-time {
    position: absolute;
    padding: 0.15rem 0.35rem;
    background: rgba(41,41,75,.15);
    backdrop-filter: blur(10px);
   overflow: hidden;
    color: var(--accent-color);
    font-size: 0.75rem;
    border-radius: 2rem;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 2;
}

/* Desktop Styles (default) */
.post-thumbnail .reading-time {
    right: 15px;
}

.post-thumbnail:hover .reading-time {
    opacity: 1;
}
.reading-time i{
   margin-right: 5px;
}
/* Mobile Styles */
@media (max-width: 767px) {
    .post-thumbnail .reading-time {
        top: 10px;
        left: 10px;
        right: auto;
        bottom: auto;
        opacity: 1; /* Always visible on mobile */
    }
}

/* Hover Effects (desktop only) */
@media (hover: hover) and (min-width: 768px) {
	.post-thumbnail .reading-time {
        top: 7px;
        right: 7px;
        bottom: auto;
        opacity: 1; /* Always visible on mobile */
    }
	.post-thumbnail {
    position: relative;
    margin-bottom: 1.5rem;
    overflow: hidden;
    width: auto;
    border-radius: var(--border-radius);
}
    .post-thumbnail:hover .reading-time {
    opacity: 1;
}
    .post-thumbnail:hover:after {
        opacity: 1;
    }
    
    .post-thumbnail:hover img {
        border-radius: var(--border-radius);
        transform: scale(1.03);
    }
}


.list-content-wrapper {
    width: 100%;
}

.list-entry-header {
    margin-bottom: 1rem;
}

.list-entry-title {
    font-size: 1.5rem;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.list-entry-title a {
    color: var(--heading-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.list-entry-title a:hover {
    color: var(--primary-color);
}

.list-entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-light);
    margin-bottom: 0.75rem;
}

.list-entry-meta > span {
    display: inline-flex;
     gap: 4px;
    align-items: center;
}

.list-entry-meta > span:not(:last-child):after {
    content: "·";
    margin-left: 0.75rem;
    color: var(--border-color);
}

.meta-author a,
.list-meta-date,
.meta-comments a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.2s ease;
}

.meta-author a:hover,
.meta-comments a:hover {
    color: var(--primary-color);
}

.list-entry-content {
    margin-bottom: 1.25rem;
    color: var(--text-color);
    line-height: 1.6;
}

.list-entry-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
}

.list-entry-taxonomies {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

.list-entry-taxonomies a {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: var(--background-alt);
    color: var(--text-color);
    text-decoration: none;
    border-radius: 2rem;
    transition: all 0.2s ease;
}

.list-entry-taxonomies a:hover {
    background-color: var(--primary-color);
    color: #fff;
}

.read-more-link {
    display: inline-block;
    padding: 0.2rem 1.25rem;
    background-color: var(--primary-color);
    color: #fff;
    text-decoration: none;
    border-radius: 2rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.read-more-link:hover {
    transform: translateY(-1px);
     color: #fff;
     text-decoration: none;

}

/* Responsive Layout */
@media (min-width: 768px) {
    .blog-post.list-post {
        flex-direction: row;
        gap: 2rem;
    }
    
    .list-content-wrapper {
        flex: 1;
    }
}

@media (min-width: 992px) {
    .blog-post.list-post {
        gap: 3rem;
    }
    
}

/* =============================================
   Standard Blog Post Layout - Responsive
   ============================================= */

.blog-post.standard-post {
    width: 100%;
}

.standard-post-thumbnail {
    position: relative;
    margin-bottom: 1.5rem;
    overflow: hidden;
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
}

.standard-post-thumbnail a {
    display: block;
    line-height: 0;
}

.standard-post-thumbnail img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Meta reading time - positioned like list posts */
.standard-post-thumbnail .reading-time {
    position: absolute;
    bottom: 10px;
    right: 10px;
    padding: 0.25rem 0.75rem;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.75rem;
    border-radius: 2rem;
    z-index: 2;
}

.standard-content-wrapper {
    width: 100%;
}

.standard-entry-header {
    margin-bottom: 1.25rem;
}

.standard-entry-title {
    font-size: 1.75rem;
    line-height: 1.3;
    margin: 0 0 0.75rem;
    font-weight: 600;
}

.standard-entry-title a {
    color: var(--heading-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.standard-entry-title a:hover {
    color: var(--primary-color);
}

.standard-entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-light);
    margin-bottom: 1rem;
}

.standard-entry-meta > span {
    display: inline-flex;
	gap: 4px;
    align-items: center;
    line-height: 1;
}

.standard-entry-meta > span:not(:last-child):after {
    content: "·";
    margin-left: 0.75rem;
    color: var(--border-color);
}

.standard-meta-author a,
.standard-meta-date,
.standard-meta-comments a,
.standard-meta-categories a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.2s ease;
}

.standard-meta-author a:hover,
.standard-meta-comments a:hover,
.standard-meta-categories a:hover {
    color: var(--primary-color);
}

.standard-entry-content {
    margin-bottom: 1.5rem;
    color: var(--text-color);
    line-height: 1.7;
}

.standard-entry-content p {
    margin-bottom: 1.25rem;
}


.standard-entry-footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}


/* Responsive Adjustments */
@media (max-width: 767px) {
    .standard-entry-title {
        font-size: 1.5rem;
    }
    
    .standard-entry-meta {
        gap: 0.5rem;
        font-size: 0.8125rem;
    }
    
    .standard-entry-meta > span:not(:last-child):after {
        margin-left: 0.5rem;
    }
    
    .standard-entry-content {
        font-size: 0.9375rem;
    }
    
    .standard-post-thumbnail img {
        height: 220px; /* Fixed height for mobile */
    }
}

/* Desktop - Larger Screens */
@media (min-width: 992px) {
    .standard-post-thumbnail img {
        height: 400px; /* Taller images on desktop */
    }
}

/* Hover Effects */
@media (hover: hover) {
    .standard-post-thumbnail:hover img {
        transform: scale(1.03);
    }
    
    .standard-post-thumbnail:hover {
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
}
/* Individual Post Card - Natural Height */
.grid-post {
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Thumbnail - Only if exists */
.grid-post-thumbnail {
  position: relative;
  overflow: hidden;
}

.grid-post-thumbnail a {
  display: block;
  line-height: 0;
}

.grid-post-thumbnail img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Content Wrapper - Natural flow */
.grid-content-wrapper {
  padding: 1.5rem;
  display: flex;
	border-radius: 16px;
  overflow: hidden;
  background: var(--background-alt);
  transition: all 0.3s ease;
  flex-direction: column;
}
.grid-content-wrapper {
  box-shadow: 0 8px 20px rgba(var(--color-box-shadow-rgb), 0.15);
}

/* Header */
.grid-entry-header {
  margin-bottom: 0.75rem;
}

.grid-entry-title {
  font-size: 1.25rem;
  line-height: 1.4;
  margin: 0 0 0.5rem;
}

.grid-entry-title a {
  color: var(--heading-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

.grid-entry-title a:hover {
  color: var(--primary-color);
}

/* Content - Natural height */
.grid-entry-content {
  margin-bottom: 1rem;
  color: var(--text-color);
  line-height: 1.6;
}

/* Meta Information */
.grid-entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  color: var(--text-light);
  margin-bottom: 1rem;
}

.grid-entry-meta > span {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.grid-entry-meta > span:not(:last-child):after {
  content: "·";
  margin-left: 0.75rem;
  color: var(--border-color);
}

.meta-author a,
.meta-date,
.meta-comments a,
.reading-time {
  color: var(--text-light);
  text-decoration: none;
  transition: color 0.2s ease;
}

.meta-author a:hover,
.meta-comments a:hover {
  color: var(--primary-color);
}

.reading-time i {
  margin-right: 0.25rem;
}

/* Footer - Sticks to bottom of card content */
.grid-entry-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

/* Responsive Adjustments */
@media (min-width: 576px) {
  .grid-post-thumbnail img {
    height: 220px;
  }
}

@media (min-width: 768px) {
  .grid-post-thumbnail img {
    height: 200px;
  }
  
  .grid-entry-title {
    font-size: 1.1rem;
  }
}

@media (min-width: 992px) {
  .grid-post-thumbnail img {
    height: 220px;
  }
  
  .grid-entry-title {
    font-size: 1.25rem;
  }
}

/* Hover Effects */
@media (hover: hover) {
  .grid-post-thumbnail:hover img {
    transform: scale(1.05);
  }
}

/* Mobile-specific styles */
@media (max-width: 767px) {
  .blog-posts-container.grid-layout[class*="columns-"] {
    grid-template-columns: repeat(1, 1fr) !important;
  }
  
  .read-more-link {
    margin-top: 0.5rem;
  }
  
  .grid-entry-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}
/* Newsletter Popup Styles */
.newsletter-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.newsletter-popup.active {
    display: block;
    opacity: 1;
}

.ns-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);
}

.ns-popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width:460px;
    background-color: var(--background-alt);
    padding: 20px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.ns-popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--light-text);
    cursor: pointer;
    transition: color 0.2s ease;
    padding: 5px;
    line-height: 1;
}

.ns-popup-close:hover {
    color: var(--accent-color);
}
.ns-popup-title {
    font-size: 28px;
    margin: 0 0 15px;
}
.ns-popup-newsletter-icon {
  position: absolute;
 top: 10px;
  left: 5px;
 pointer-events: none;
  opacity: .2
 }

 .ns-popup-newsletter-icon i {
  font-size: 50px;
 line-height: 1
  }
.ns-popup-description {
    font-size: 16px;
    margin-bottom: 25px;
    line-height: 1.6;
}

.ns-popup-form {
    margin-top: 20px;
}



/* Responsive Styles */
@media (max-width: 767px) {
    .ns-popup-content {
        padding: 30px 20px;
    }
    
    .ns-popup-title {
        font-size: 24px;
    }
    
    .ns-popup-description {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .ns-popup-content {
        width: 95%;
        padding: 25px 15px;
    }
    
    .ns-popup-title {
        font-size: 22px;
    }
}
.mc4wp-form-fields input[type="email"],
.mc4wp-form-fields input[type="name"],
.mc4wp-form-fields input[type="phone"],
.mc4wp-form-fields input[type="username"],
.mc4wp-form-fields input[type="text"]
 {
    color: var(--input-text);
    background-color: var(--input-bg);
    border: 1px solid #f5aaaa;
    border-radius: 8px;
    font-size: 1rem;
}
.mc4wp-form-fields input[type="text"]:focus,
.mc4wp-form-fields input[type="email"]:focus,
.mc4wp-form-fields input[type="name"]:focus,
.mc4wp-form-fields input[type="username"]:focus,
.mc4wp-form-fields input[type="submit"]:focus {
    outline: 2px solid var(--input-focus);
    outline-offset: 2px;
}
.mc4wp-form-fields label {
    color: var(--text-color);
    font-size: 1.1rem;
    gap: 0.5rem;
}
.mc4wp-form-fields input[type="submit"] {
   display: inline-block;
    padding: 5px 10px 5px 10px;
   background-color: var(--primary-color);
   color: #fff;
   border-radius: 14px;
   font-weight: 500;
   text-decoration: none;
	margin-bottom: 10px;
	margin-top: 8px;
   transition: var(--transition);
   border: 2px solid var(--primary-color);
}
.mc4wp-form-fields input[type="submit"]:hover {
     color: #fff;
    background: var(--link-hover-color);
    transform: translateY(-3px);

}
.mc4wp-form-fields input[type="email"],
.mc4wp-form-fields input[type="phone"],
	.mc4wp-form-fields input[type="name"],
.mc4wp-form-fields input[type="username"],
.mc4wp-form-fields input[type="text"]
 {
}
.mc4wp-form-fields p {
   margin-bottom: 5px;
}

@media (max-width: 767px) {
    .mc4wp-form-fields input[type="submit"] {
       padding: 10px 20px 10px 20px; 
        width: 80%;
		margin-bottom: 10px;
        margin-left: 30px;
   
}
    .mc4wp-form-fields input[type="email"],
.mc4wp-form-fields input[type="phone"],
	.mc4wp-form-fields input[type="name"],
.mc4wp-form-fields input[type="username"],
.mc4wp-form-fields input[type="text"]
 {
     width: 90%;
     margin: 10px;
     margin-left: -10px;
}
    .mc4wp-form-fields label {
    color: var(--text-color);
    font-size: 1.1rem;
    gap: 0.5rem;
}
}
/* Contact Form Styles */
.wpcf7-form {
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.wpcf7-form p {
  margin: 0;
  grid-column: span 1;
}

.wpcf7-form p:nth-last-child(2),
.wpcf7-form p:nth-last-child(1) {
  grid-column: span 2;
}

.wpcf7-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.wpcf7-form-control {
  width: 100%;
  padding: 0.75rem;
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  background-color: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  transition: all 0.2s ease;
}

.wpcf7-form-control:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.wpcf7-textarea {
  min-height: 150px;
  resize: vertical;
}

  .wpcf7-form-control.wpcf7-submit {
  display: block;
   width: 50%;
  margin: 0px auto;
  background-color: #2563eb;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.wpcf7-submit:hover {
  background-color: #1d4ed8;
}

/* Error Styles */
.wpcf7-not-valid-tip {
  color: #dc2626;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: block;
}

.wpcf7-not-valid {
  border-color: #dc2626;
}
.wpcf7-form p:has(textarea) {
    grid-column: span 2 !important;
}
.wpcf7-response-output {
  padding: 1rem;
  margin: 1rem 0 0 0;
  border-radius: var(--border-radius);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .wpcf7-form {
      width: 100%;
      display: block;
      gap: 1.5rem;
    }
    .wpcf7-form-control.wpcf7-submit {
  display: block;
  width: 50%;
  margin: 0px auto;
  background-color: #2563eb;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
  .wpcf7-form p,
  .wpcf7-form p:nth-last-child(2),
  .wpcf7-form p:nth-last-child(1) {
    grid-column: span 1;
  }
  
}

@media (max-width: 480px) {
  .wpcf7-form-control {
    padding: 0.5rem;
  }
}
:root :where(.wp-element-button, .wp-block-button__link) {
  background-color: #32373c;
    border-width: 0;
  color: #fff;
     margin-left: 20px;
  border-radius: 20px;
     font-family: inherit;
    font-size: inherit;
     line-height: inherit;
      padding-top: 8px; 
   padding-right: 20px; padding-left: 20px; padding-bottom: 8px; 
     text-decoration: none;
}
.wp-block-categories-list,
.wp-block-archives-list,
.wp-block-latest-posts__list {
list-style: none;     
    padding: 08px; 
}
.header3-menu-icon {
    display: none; /* Hidden by default */
    font-size: 0.9rem;
    cursor: pointer;
}

/* Header */
header3-header {
    display: flex;
    width: 100%;
    z-index: 1000; /* Ensure header stays above other content */
    justify-content: center;
    align-items: center;
    padding: 2px;
    background-color: transparent;
    gap: 2rem;
    width: 100%; /* Ensure header spans full width */
}

/* Logo */
.header3-logo .logo-text {
    font-size: 1.5rem;
    font-weight: bold;
}

.header3-logo .logo-text a {
    text-decoration: none;
    color: var(--heading-color);
    text-decoration: none;
    background: linear-gradient(to right, var(--accent-color), var(--primary-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    outline: 0;
}

.header3-logo .logo-text .red-s {
  color: red; /* You can also use var(--accent-color) or any other color */
  -webkit-text-fill-color: initial; /* Override the transparent gradient */
  background: none;
  -webkit-background-clip: initial;
}


/* ===== Radio Navigation Menu ===== */
.header3-nav-container {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0;
}

.header3-radio-inputs {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    border-radius: 0.9rem;
    background-color: #70c489;
    padding: 0.5rem;
    gap: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    list-style: none;
    margin: 0;
    padding: 2px;
}

.header3-radio-inputs .radio {
    margin: 0;
    position: relative;
    list-style: none;
}

.header3-radio-inputs .radio input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.header3-radio-inputs .radio a {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    padding: 0.6rem 1.2rem;
    transition: all 0.3s ease;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

/* Hover State */
.header3-radio-inputs .radio a:hover {
    color: #3d21f3;
    transform: translateY(-2px);
}

/* Active/Checked State */
.header3-radio-inputs .radio input:checked ~ a,
.header3-radio-inputs .current-menu-item a,
.header3-radio-inputs .current-menu-parent a {
    background-color: #ffffff;
    color: #2d3748;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Active State Indicators */
.header3-radio-inputs .radio input:checked ~ a::before,
.header3-radio-inputs .radio input:checked ~ a::after,
.header3-radio-inputs .current-menu-item a::before,
.header3-radio-inputs .current-menu-item a::after,
.header3-radio-inputs .current-menu-parent a::before,
.header3-radio-inputs .current-menu-parent a::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #70c489;
    bottom: -6px;
    z-index: -1;
}

.header3-radio-inputs .radio input:checked ~ a::before,
.header3-radio-inputs .current-menu-item a::before,
.header3-radio-inputs .current-menu-parent a::before {
    left: -6px;
    border-bottom-right-radius: 12px;
    box-shadow: 3px 3px 0 3px #ffffff;
}

.header3-radio-inputs .radio input:checked ~ a::after,
.header3-radio-inputs .current-menu-item a::after,
.header3-radio-inputs .current-menu-parent a::after {
    right: -6px;
    border-bottom-left-radius: 12px;
    box-shadow: -3px 3px 0 3px #ffffff;
}

/* Mobile Menu Toggle */
#header3-menu-icon input:checked ~ .nav-container {
    display: flex;
}

/* Basic button styling */
.header3-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgb(20, 20, 20);
    border: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 0px 4px rgba(180, 160, 255, 0.253);
    cursor: pointer;
    transition-duration: 0.3s;
    overflow: hidden;
    position: fixed;
    bottom: 20px;  /* Position it at the bottom */
    right: 20px;   /* Position it at the right */
    z-index: 1000;  /* Make sure it's above other content */
    display: none;  /* Initially hidden */
  }
  
  /* Button SVG icon styling */
  .svgIcon {
    width: 12px;
    transition-duration: 0.3s;
  }
  
  .svgIcon path {
    fill: white;
  }

/* Progress Reader */
.header3-progress-reader {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    background-color: #70c489;
    width: 0;
    z-index: 1000;
    transition: width 0.2s ease;
}
.themes {
        order: 3;
    }
/* Responsive Layout */
@media (max-width: 768px) {
     /* Mobile layout */
     header3-header {
        margin-top: 0;
        padding: 0;
        flex-wrap: wrap;
    }

    .header3-menu-icon {
        display: block;
    }

    .header3-logo {
        flex: 1;
        text-align: center;
    }

    .header3-nav-container {
        flex-direction: column;
       margin-top: -11%;
        width: 100%;
        border-radius: 12px;
        overflow-x: auto; /* Allow horizontal scrolling if needed */
        padding: 10px 0;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        z-index: 10;
    }

    .header3-nav-container.active {
        display: flex;
    }
    .themes {
        order: 0;
    }
.header3-radio-inputs {
    gap: 0rem;
}
   
}

.header3-hamburger input {
    display: none;
}

.header3-hamburger svg {
    height: 3em;
    transition: transform 600ms ease;
}

.line {
    fill: none;
    stroke: black;
    stroke-linecap: round;
    stroke-width: 3;
    transition: stroke-dasharray 600ms ease, stroke-dashoffset 600ms ease;
}

.line-top-bottom {
    stroke-dasharray: 12 63;
}

.header3-hamburger input:checked + svg {
    transform: rotate(-45deg);
}

.header3-hamburger input:checked + svg .line-top-bottom {
    stroke-dasharray: 20 300;
    stroke-dashoffset: -32.42;
}
.demos-quick-view {
    position: fixed;
    z-index: 9999;
    left: 20px;
    bottom: 5%;
    display: flex;
    flex-flow: column nowrap
}

.quick-view-link {
    display: flex;
    height: 58px;
    width: 58px;
    align-content: center;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,.12);
    -webkit-box-shadow: 0 4px 20px rgba(0,0,0,.12);
    border-radius: 9px;
    -webkit-border-radius: 9px;
    transition: all .3s;
    --webkit-transition: all .3s
}

.quick-view-link svg {
    width: 40px;
    height: auto
}

.quick-view-buy svg {
    width: 42px;
    height: auto
}

.quick-view-buy {
    margin-top: 10px;
    color: #5772ff
}

.quick-view-buy:hover {
    color: #fff;
    background-color: #5772ff
}

.quick-view-demos {
    color: #333
}

.quick-view-link {
    overflow: hidden
}

.quick-view-demos:hover {
    color: #5772ff
}

@media (max-width: 1024px) {
    .single-post .demos-quick-view {
        bottom:65px
    }

    .demos-quick-view {
        flex-flow: row nowrap;
        bottom: 20px;
        top: auto;
        left: 15%;
        right: auto;
        margin-left: -55px
    }

    .quick-view-buy {
        margin-left: 10px;
        margin-top: 0
    }

    .rtl .quick-view-buy {
        margin-left: 0;
        margin-top: 0;
        margin-right: 10px
    }

    .quick-view-link {
        width: 50px;
        height: 50px;
        border-radius: 7px
    }

    .quick-view-link svg {
        width: 34px
    }
}

@media print {
    .demos-quick-view {
        display: none !important
    }
}
/*--------------------------------------------------------------
# Icons
--------------------------------------------------------------*/
@font-face {
    font-family: "wp-icons";
    src: url("../icon-fonts/icons.ttf") format("truetype"), 
         url("../icon-fonts/icons.woff") format("woff"), 
         url("../icon-fonts/icons.svg#icons") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

[class^="wp-icon-"],
[class*=" wp-icon-"] {
    font-family: "wp-icons" !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.wp-icon-search:before {
    content: "\e911";
}


.wp-icon-new-window:before {
	content: "\e932";
}

.wp-icon-not-found:before {
	content: "\e930";
}

.wp-icon-location-fill:before {
	content: "\e931";
}

.wp-icon-location:before {
	content: "\e92f";
}

.wp-icon-linkedIn:before {
	content: "\e92e";
}

.wp-icon-facebook:before {
	content: "\e91d";
}

.wp-icon-instagram:before {
	content: "\e91e";
}

.wp-icon-link:before {
	content: "\e920";
}

.wp-icon-pinterest:before {
	content: "\e921";
}

.wp-icon-snapchat:before {
	content: "\e923";
}

.wp-icon-tiktok:before {
	content: "\e924";
}

.wp-icon-tumblr:before {
	content: "\e925";
}

.wp-icon-vimeo:before {
	content: "\e926";
}

.wp-icon-youtube .path1:before {
	content: "\e928";
	color: rgb(68, 68, 68);
}

.wp-icon-youtube .path2:before {
	content: "\e929";
	margin-left: -1em;
	color: rgb(255, 255, 255);
}

.wp-icon-comment-o:before {
	content: "\f0e5";
}

.wp-icon-comments-o:before {
	content: "\f0e6";
}

.wp-icon-mail-reply:before {
	content: "\f112";
}

.wp-icon-reply1:before {
	content: "\f112";
}

.wp-icon-menu1:before {
	content: "\e91f";
}

.wp-icon-filter:before {
	content: "\e915";
}

.wp-icon-arrow-down:before {
	content: "\e914";
}

.wp-icon-arrow-short-left:before {
	content: "\e916";
}

.wp-icon-arrow-short-right:before {
	content: "\e919";
}

.wp-icon-alert:before {
	content: "\e901";
}

.wp-icon-cart:before {
	content: "\e902";
}

.wp-icon-dark-mode:before {
	content: "\e903";
}

.wp-icon-download:before {
	content: "\e905";
}

.wp-icon-info:before {
	content: "\e907";
}

.wp-icon-light-mode:before {
	content: "\e908";
}

.wp-icon-menu:before {
	content: "\e909";
}

.wp-icon-reference:before {
	content: "\e90b";
}

.wp-icon-reply-2:before {
	content: "\e910";
}

.wp-icon-success:before {
	content: "\e912";
}

.wp-icon-twitter-x:before {
	content: "\e913";
}

.wp-icon-x:before {
	content: "\e92b";
}

.wp-icon-byuser:before {
	content: "\e942";
}

.wp-icon-reply:before {
	content: "\e940";
}

.wp-icon-arrow-long-left:before {
	content: "\e917";
}

.wp-icon-arrow-long-right:before {
	content: "\e92c";
}

.wp-icon-comments:before {
	content: "\e92d";
}

.wp-icon-timer:before {
	content: "\e91a";
}

.wp-icon-image:before {
	content: "\e92a";
}

.wp-icon-activity:before {
	content: "\e900";
}

.wp-icon-arrow-left:before {
	content: "\e904";
}

.wp-icon-arrow-right:before {
	content: "\e906";
}

.wp-icon-award:before {
	content: "\e90a";
}

.wp-icon-chevron-down:before {
	content: "\e90c";
}

.wp-icon-chevron-left:before {
	content: "\e90d";
}

.wp-icon-chevron-right:before {
	content: "\e90e";
}

.wp-icon-chevron-up:before {
	content: "\e90f";
}

.wp-icon-message-square:before {
	content: "\e918";
}

.wp-icon-music:before {
	content: "\e91b";
}

.wp-icon-play:before {
	content: "\e91c";
}

.wp-icon-watch:before {
	content: "\e922";
}

.wp-icon-zap:before {
	content: "\e927";
}

.wp-icon-eye:before {
	content: "\e9ce";
}
/* User & Account Icons */
.wp-icon-user:before {
    content: "\e950";
}

.wp-icon-user-circle:before {
    content: "\e951";
}

.wp-icon-user-plus:before {
    content: "\e952";
}

.wp-icon-user-minus:before {
    content: "\e953";
}

.wp-icon-user-check:before {
    content: "\e954";
}

.wp-icon-users:before {
    content: "\e955";
}

/* Social Media */
.wp-icon-whatsapp:before {
    content: "\e956";
}

.wp-icon-telegram:before {
    content: "\e957";
}

.wp-icon-discord:before {
    content: "\e958";
}

.wp-icon-reddit:before {
    content: "\e959";
}

.wp-icon-twitch:before {
    content: "\e95a";
}

/* E-commerce */
.wp-icon-shopping-bag:before {
    content: "\e95b";
}

.wp-icon-heart:before {
    content: "\e95c";
}

.wp-icon-heart-filled:before {
    content: "\e95d";
}

.wp-icon-star:before {
    content: "\e95e";
}

.wp-icon-star-filled:before {
    content: "\e95f";
}

/* Navigation */
.wp-icon-home:before {
    content: "\e960";
}

.wp-icon-settings:before {
    content: "\e961";
}

.wp-icon-cog:before {
    content: "\e962";
}

.wp-icon-bell:before {
    content: "\e963";
}

.wp-icon-bell-filled:before {
    content: "\e964";
}

/* File & Document */
.wp-icon-file:before {
    content: "\e965";
}

.wp-icon-file-text:before {
    content: "\e966";
}

.wp-icon-folder:before {
    content: "\e967";
}

.wp-icon-folder-open:before {
    content: "\e968";
}

.wp-icon-paperclip:before {
    content: "\e969";
}

/* Media Controls */
.wp-icon-play-circle:before {
    content: "\e96a";
}

.wp-icon-pause:before {
    content: "\e96b";
}

.wp-icon-stop:before {
    content: "\e96c";
}

.wp-icon-volume:before {
    content: "\e96d";
}

.wp-icon-volume-off:before {
    content: "\e96e";
}

/* Communication */
.wp-icon-mail:before {
    content: "\e96f";
}

.wp-icon-mail-filled:before {
    content: "\e970";
}

.wp-icon-send:before {
    content: "\e971";
}

.wp-icon-phone:before {
    content: "\e972";
}

.wp-icon-video-camera:before {
    content: "\e973";
}

/* Editing */
.wp-icon-edit:before {
    content: "\e974";
}

.wp-icon-trash:before {
    content: "\e975";
}

.wp-icon-copy:before {
    content: "\e976";
}

.wp-icon-cut:before {
    content: "\e977";
}

.wp-icon-save:before {
    content: "\e978";
}

/* Payment & Finance */
.wp-icon-credit-card:before {
    content: "\e979";
}

.wp-icon-wallet:before {
    content: "\e97a";
}

.wp-icon-calculator:before {
    content: "\e97b";
}

.wp-icon-cash:before {
    content: "\e97c";
}

.wp-icon-bitcoin:before {
    content: "\e97d";
}

/* Date & Time */
.wp-icon-calendar:before {
    content: "\e97e";
}

.wp-icon-clock:before {
    content: "\e97f";
}

.wp-icon-hourglass:before {
    content: "\e980";
}

/* Business */
.wp-icon-briefcase:before {
    content: "\e981";
}

.wp-icon-building:before {
    content: "\e982";
}

.wp-icon-shop:before {
    content: "\e983";
}

.wp-icon-chart:before {
    content: "\e984";
}

.wp-icon-graph:before {
    content: "\e985";
}

/* Health */
.wp-icon-heartbeat:before {
    content: "\e986";
}

.wp-icon-medkit:before {
    content: "\e987";
}

.wp-icon-hospital:before {
    content: "\e988";
}

/* Weather */
.wp-icon-sun:before {
    content: "\e989";
}

.wp-icon-moon:before {
    content: "\e98a";
}

.wp-icon-cloud:before {
    content: "\e98b";
}

.wp-icon-umbrella:before {
    content: "\e98c";
}

/* Transportation */
.wp-icon-car:before {
    content: "\e98d";
}

.wp-icon-bus:before {
    content: "\e98e";
}

.wp-icon-train:before {
    content: "\e98f";
}

.wp-icon-plane:before {
    content: "\e990";
}

.wp-icon-bike:before {
    content: "\e991";
}

/* Food */
.wp-icon-coffee:before {
    content: "\e992";
}

.wp-icon-utensils:before {
    content: "\e993";
}

.wp-icon-pizza:before {
    content: "\e994";
}

/* Science */
.wp-icon-flask:before {
    content: "\e995";
}

.wp-icon-atom:before {
    content: "\e996";
}

.wp-icon-microscope:before {
    content: "\e997";
}

/* Security */
.wp-icon-lock:before {
    content: "\e998";
}

.wp-icon-unlock:before {
    content: "\e999";
}

.wp-icon-shield:before {
    content: "\e99a";
}

/* Miscellaneous */
.wp-icon-gift:before {
    content: "\e99b";
}

.wp-icon-tag:before {
    content: "\e99c";
}

.wp-icon-bookmark:before {
    content: "\e99d";
}

.wp-icon-camera:before {
    content: "\e99e";
}

.wp-icon-headphones:before {
    content: "\e99f";
}
/*
-----------------
3 - Font Icons
-----------------
*/
@font-face {
    font-family: 'wpi-icon';
    font-display: swap;
    src: url('../../assets/fonts/icons.woff2?ver=2.5.0') format('woff2');
    font-weight: normal;
    font-style: normal;
}
.wpi, [class^='wpi-'], [class='wpi-'] {
    font-family: 'wpi-icon' !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.rtl .wpi:before {
    /*rtl:ignore*/
    display: inline-block;
    /*rtl:ignore*/
    -webkit-transform: scale(-1, 1);
    /*rtl:ignore*/
    transform: scale(-1, 1);
    /*rtl:ignore*/
}

.wpi-version:before {
    content: '\e972';
}
.wpi-plane:before {
    content: '\e98e';
}
.wpi-copy:before {
    content: '\e965';
}

.wpi-pin:before {
    content: '\e962';
}

.wpi-notification:before {
    content: '\e95a';
}

.wpi-information:before {
    content: '\e95c';
}

.wpi-shield:before {
    content: '\e95e';
}

.wpi-right:before, .wpi-next:before {
    content: '\e958';
}

.wpi-left:before, .wpi-prev:before {
    content: '\e959';
}

.wpi-resize:before {
    content: '\e961';
}

.wpi-help:before {
    content: '\e95b';
}

.wpi-minus-o:before {
    content: '\e95d';
}

.wpi-cancel:before {
    content: '\e95f';
}

.wpi-check:before {
    content: '\e960';
}

.wpi-gallery:before {
    content: '\e955';
}

.wpi-audio:before {
    content: '\e956';
}

.wpi-video:before {
    content: '\e957';
}

.wpi-darrow-top:before {
    content: '\e94a';
}

.wpi-search:before {
    content: '\e946';
}

.wpi-watch:before {
    content: '\e93a';
}

.rbicolorose:before {
    content: '\e949';
}

.wpi-home:before {
    content: '\e952';
}

.wpi-portfolio:before {
    content: '\e901';
}

.wpi-menu:before {
    content: '\e953';
}

.wpi-chart:before {
    content: '\e929';
}

.wpi-suitcase:before {
    content: '\e94d';
}

.wpi-clock:before {
    content: '\e947';
}

.wpi-time:before {
    content: '\e948';
}

.wpi-comment:before {
    content: '\e945';
}

.wpi-email:before {
    content: '\e908';
}

.wpi-share:before {
    content: '\e94e';
}

.wpi-load:before {
    content: '\e942';
}

.wpi-read:before {
    content: '\e94c';
}

.wpi-archive:before {
    content: '\e944';
}

.wpi-tag:before {
    content: '\e94b';
}

.wpi-print:before {
    content: '\e909';
}

.wpi-500px:before {
    content: '\e90a';
}

.wpi-amazon:before {
    content: '\e90b';
}

.wpi-store:before {
    content: '\e90c';
}

.wpi-behance:before {
    content: '\e90d';
}

.wpi-blogger:before {
    content: '\e90f';
}

.wpi-chromecast:before {
    content: '\e911';
}

.wpi-digg:before {
    content: '\e912';
}

.wpi-dribbble:before {
    content: '\e913';
}

.wpi-dropbox:before {
    content: '\e914';
}

.wpi-ebay:before {
    content: '\e93f';
}

.wpi-etsy:before {
    content: '\e940';
}

.wpi-facebook:before {
    content: '\e915';
}

.wpi-messenger:before {
    content: '\e916';
}

.wpi-flickr:before {
    content: '\e917';
}

.wpi-flipboard:before {
    content: '\e918';
}

.wpi-github:before {
    content: '\e919';
}

.wpi-google:before {
    content: '\e91a';
}

.wpi-drive:before {
    content: '\e91b';
}

.wpi-chplay:before {
    content: '\e91c';
}

.wpi-wallet:before {
    content: '\e91d';
}

.wpi-instagram:before {
    content: '\e91e';
}

.wpi-linkedin:before {
    content: '\e91f';
}

.wpi-mailchimp:before {
    content: '\e920';
}

.wpi-close:before {
    content: '\e949';
}

.wpi-medium:before {
    content: '\e921';
}

.wpi-paypal:before {
    content: '\e922';
}

.wpi-pinterest:before {
    content: '\e923';
}

.wpi-quora:before {
    content: '\e941';
}

.wpi-reddit:before {
    content: '\e928';
}

.wpi-skype:before {
    content: '\e92a';
}

.wpi-snapchat:before {
    content: '\e92b';
}

.wpi-soundcloud:before {
    content: '\e92c';
}

.wpi-spotify:before {
    content: '\e92d';
}

.wpi-stripe:before {
    content: '\e92e';
}

.wpi-stumbleupon:before {
    content: '\e92f';
}

.wpi-telegram:before {
    content: '\e930';
}

.wpi-tiktok:before {
    content: '\e943';
}

.wpi-tripadvisor:before {
    content: '\e931';
}

.wpi-tumblr:before {
    content: '\e932';
}

.wpi-twitch:before {
    content: '\e933';
}

.wpi-twitter:before {
    content: '\e934';
}

.wpi-viber:before {
    content: '\e936';
}

.wpi-vimeo:before {
    content: '\e937';
}

.wpi-vk:before {
    content: '\e938';
}

.wpi-waze:before {
    content: '\e939';
}

.wpi-whatsapp:before {
    content: '\e93b';
}

.wpi-wordpress:before {
    content: '\e93c';
}

.wpi-yelp:before {
    content: '\e93d';
}

.wpi-youtube:before {
    content: '\e93e';
}

.wpi-bookmark-fill:before {
    content: '\e906';
}

.wpi-bookmark:before {
    content: '\e907';
}

.wpi-plus:before {
    content: '\e900';
}

.wpi-cright:before {
    content: '\e902';
}

.wpi-cleft:before {
    content: '\e903';
}

.wpi-cdown:before {
    content: '\e904';
}

.wpi-cup:before {
    content: '\e905';
}

.wpi-thumbs-up:before {
    content: '\e86d';
}

.wpi-minus:before {
    content: '\e90e';
}

.wpi-myspace:before {
    content: '\30';
}

.wpi-heart:before {
    content: '\6c';
}

.wpi-rss:before {
    content: '\42';
}

.wpi-angle-down:before {
    content: '\e924';
}

.wpi-angle-left:before {
    content: '\e925';
}

.wpi-angle-right:before {
    content: '\e926';
}

.wpi-angle-up:before {
    content: '\e927';
}

.wpi-cart:before {
    content: '\e963';
}

.wpi-trash:before {
    content: '\e964';
}

.wpi-via:before {
    content: '\e935';
}

.wpi-trending:before {
    content: '\e954';
}

.wpi-bitcoin:before {
    content: '\e910';
}

.wpi-star-half:before {
    content: '\e950';
}

.wpi-star-o:before {
    content: '\e94f';
}

.wpi-star:before {
    content: '\e951';
}

.wpi-link-o:before {
    content: '\e9cb';
}

.wpi-portfolio-o:before {
    content: '\e96a';
}

.wpi-home-o:before {
    content: '\e968';
}

.wpi-external:before {
    content: '\e969';
}

.wpi-clone:before {
    content: '\e96b';
}

.wpi-link:before {
    content: '\e967';
}

.wpi-rdoc:before {
    content: '\e96c';
}

.wpi-mic:before {
    content: '\e96d';
}

.wpi-frequency:before {
    content: '\e96e';
}

.wpi-stitcher:before {
    content: '\e970';
}

.wpi-googlepodcast:before {
    content: '\e96f';
}

.wpi-applepodcast:before {
    content: '\f2ce';
}

.wpi-pause:before {
    content: '\e973';
}

.wpi-volume:before {
    content: '\e979';
}

.wpi-volume-off:before {
    content: '\e97a';
}

.wpi-reload:before {
    content: '\e97b';
}

.wpi-play:before {
    content: '\e971';
}

.wpi-skip-back:before {
    content: '\e974';
}

.wpi-loading:before {
    content: '\e975';
}

.wpi-jump-next:before {
    content: '\e976';
}

.wpi-cookie:before {
    content: '\e972';
}

.wpi-dislike-fill:before {
    content: '\e977';
}

.wpi-like-fill:before {
    content: '\e978';
}

.wpi-like:before {
    content: '\e97c';
}

.wpi-dislike:before {
    content: '\e97d';
}

.wpi-secure:before {
    content: '\e97e';
}

.wpi-hide:before {
    content: '\e97f';
}

.wpi-show:before {
    content: '\e980';
}

.wpi-idea:before {
    content: '\e982';
}

.wpi-warning:before {
    content: '\e981';
}

.wpi-not-allow:before {
    content: '\e985';
}

.wpi-flash:before {
    content: '\e986';
}

.wpi-checked:before {
    content: '\ea54';
}

.wpi-unchecked:before {
    content: '\ea56';
}

.wpi-check-v:before {
    content: '\e984';
}

.wpi-more:before {
    content: '\e987';
}
.wpi-discord:before {
    content: '\e998';
}