/* Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Urbanist', sans-serif;
  line-height: 1.6;
  background-color: #f9f9f9;
  color: #333;
  padding-bottom: 100px; /* for long mobile scrolls */
}

/* Header */
/* === Header Base === */
.site-header {
  background-color: #fff;
  border-bottom: 1px solid #eaeaea;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  position: sticky;
  top: 0;
  z-index: 999;
}

.site-header .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* === Logo === */
.logo img {
  max-height: 70px;
  display: block;
}
.logo a {
  font-size: 1.6em;
  font-weight: bold;
  text-decoration: none;
  color: #007bff;
  transition: color 0.3s ease;
}

.logo a:hover {
  color: #0056b3;
}

/* === Navigation === */
.main-nav ul {
  list-style: none;
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
}

.main-nav ul li a {
  text-decoration: none;
  font-weight: 500;
  color: #333;
  padding: 6px 10px;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.main-nav ul li a:hover {
  color: #683ce4;
  background-color: #d0c4f2;
  border-radius: 4px;
}

/* === Mobile Menu Toggle Button === */
.menu-toggle {
  display: none;
  font-size: 1.6em;
  background: none;
  border: none;
  cursor: pointer;
  color: #007bff;
}

/* === Responsive (Mobile ≤768px) === */
@media screen and (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .main-nav {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background-color: #fff;
    border-top: 1px solid #ddd;
    display: none;
    flex-direction: column;
    gap: 0;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
  }

  .main-nav.open {
    display: flex;
  }

  .main-nav ul {
    flex-direction: column;
    gap: 0;
  }

  .main-nav ul li {
    text-align: center;
    border-bottom: 1px solid #eee;
  }

  .main-nav ul li a {
    display: block;
    padding: 12px 0;
  }
}

/* Main Content */
main {
  padding: 1rem;
  max-width: 900px;
  margin: auto;
}

/* Blog Articles */
article {
  background: #fff;
  padding: 1rem;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

article h3 a {
  color: #222;
  text-decoration: none;
}

article h3 a:hover {
  color: #00bfff;
}

article small {
  color: #666;
  font-size: 0.9rem;
}

/* Footer */
footer {
  background-color: #111;
  color: #fff;
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
}
footer p {
    color: #fff;
}

/* ============================= */
/* 📱 Responsive (Mobile First) */
/* ============================= */

@media (min-width: 768px) {
  header h1 a {
    font-size: 2rem;
  }

  nav ul {
    justify-content: center;
  }

  article {
    display: block;
  }
}
/* =============================
   Typography - Headings & Text
============================= */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  color: #222;
  line-height: 1.3;
  margin: 0 0 15px;
}

h1 {
  font-size: 2.2em;
  letter-spacing: -0.5px;
  padding-left: 12px;
}

h2 {
  font-size: 1.9em;
  color: #333;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 6px;
}

h3 {
  font-size: 1.6em;
  color: #444;
}

h4 {
  font-size: 1.4em;
  color: #555;
}

h5 {
  font-size: 1.2em;
  color: #666;
}

h6 {
  font-size: 1em;
  color: #777;
}

/* =============================
   Paragraphs & Body Text
============================= */

p {
  font-size: 1em;
  color: #444;
  line-height: 1.7;
  margin-bottom: 15px;
  font-family: 'Urbanist', sans-serif;
}

/* Optional: subtle paragraph animation */
p.fade-in {
  animation: fadeIn 0.5s ease-in;
}

/* =============================
   Anchors & Links
============================= */

a {
  color: #683ce4;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

a:hover {
  color: #0056b3;
  text-decoration: none;
}

/* =============================
   Images
============================= */

img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
  margin-bottom: 20px;
}

/* =============================
   Global Container & Section
============================= */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 15px;
}

section {
  margin-bottom: 60px;
}

hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 40px 0;
}

/* =============================
   Responsive Typography
============================= */

@media screen and (max-width: 768px) {
  h1 { font-size: 1.8em; }
  h2 { font-size: 1.6em; }
  h3 { font-size: 1.4em; }
  h4 { font-size: 1.2em; }
  h5, h6 { font-size: 1em; }
  p { font-size: 0.95em; }
  ul, ol { margin-left: 18px; }
}

/* =============================
   Animation (Optional)
============================= */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Container to wrap the video and set aspect ratio */
.yt-vid {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* This creates the 16:9 aspect ratio (9 / 16 = 0.5625) */
}

/* Style the iframe itself to fill the container */
.yt-vid iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 4px;
}


/*************************************************************************************************/
/*************************INDEX HOMEPAFE CSS SET START********************************************/
/*************************************************************************************************/
/* ==== GENERAL RESET ==== */
.IndexPageSection * {
  box-sizing: border-box;
}

.IndexPageSection-Container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: 'Urbanist', sans-serif;
}

/* ==== HERO ==== */
.IndexPageSection-Hero {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  margin-bottom: 60px;
}
.IndexPageSection-HeroText {
  flex: 1 1 50%;
}
.IndexPageSection-HeroText h1 {
  font-size: 2.8em;
  margin-bottom: 20px;
  color: #683ce4;
  padding-left: 0;
}
.IndexPageSection-HeroText p {
  font-size: 1.1em;
  line-height: 1.7;
}
/* === CTA Button Styling (Hero, Surprise, etc.) === */
.IndexPageSection-CTA,
.IndexPageSection-SurpriseBtn {
  display: inline-block;
  background-color: #683ce4;
  color: #fff;
  padding: 12px 24px;
  font-size: 1em;
  font-weight: 600;
  border-radius: 6px;
  margin-top: 20px;
  transition: transform 0.25s ease, background-color 0.25s ease;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
  position: relative;
  top: 0;
}

.IndexPageSection-CTA:hover,
.IndexPageSection-SurpriseBtn:hover {
  background-color: #3d228a;
  transform: translateY(-3px); /* Button moves slightly up */
  text-decoration: none;
  color: white;
}
.IndexPageSection-HeroImage {
  flex: 1 1 40%;
}

.IndexPageSection-HeroImage img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

/* ==== HIGHLIGHTS ==== */
.IndexPageSection-Highlights {
  margin-bottom: 60px;
}
.IndexPageSection-Highlights h2 {
  font-size: 1.8em;
  margin-bottom: 20px;
}
.IndexPageSection-Highlights h2 span {
    color: #683ce4;
}
.IndexPageSection-HighlightList {
  list-style: none;
  padding: 0;
  margin: 0;
}
.IndexPageSection-HighlightList li {
  margin-bottom: 10px;
  font-size: 1.05em;
}

/* ==== SURPRISE TEASER ==== */
.IndexPageSection-SurpriseTeaser {
  background: #f0f8ff;
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  margin-bottom: 60px;
}
.IndexPageSection-SurpriseBtn {
  margin-top: 15px;
  display: inline-block;
  padding: 10px 20px;
  background: #28a745;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
}

/* ==== CATEGORY CARDS ==== */
.IndexPageSection-Categories {
  margin-bottom: 60px;
}
.IndexPageSection-Grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}
.IndexPageSection-Card {
  background: white;
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  border: 1px solid #eee;
  transition: all 0.3s ease;
}
.IndexPageSection-Card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  text-decoration: none;
}
.IndexPageSection-Card img {
  height: auto;
  width: 100%;
  object-fit: contain;
  margin-bottom: 15px;
}
.IndexPageSection-Card h3 {
  font-size: 1.2em;
  color: #683ce4;
}
.IndexPageSection-Card p {
    text-align: left;
    padding: 10px;
}
/* ==== NEWSLETTER ==== */
.IndexPageSection-CTABox {
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.IndexPageSection-Form {
  margin-top: 15px;
}
.IndexPageSection-Form input {
  padding: 10px;
  width: 250px;
  max-width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.IndexPageSection-Form button {
  padding: 10px 18px;
  background: #683ce4;
  border: none;
  color: #fff;
  margin-left: 8px;
  border-radius: 4px;
}

/* ==== MOBILE STYLES (≤768px) ==== */
@media screen and (max-width: 768px) {
  .IndexPageSection-Hero {
    flex-direction: column;
    text-align: center;
  }
  .IndexPageSection-HeroText h1 {
    font-size: 2em;
  }
  .IndexPageSection-Card img {
    height: auto;
  }
}
/***********************************INDEX ARTICLES PREVIEW****************************************/
.IndexPageSection-Articles {
  margin-top: 60px;
}

.IndexPageSection-Articles h2 {
  font-size: 1.8em;
  margin-bottom: 25px;
  color: #222;
  text-align: center;
}

.IndexPageSection-ArticleGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}
.IndexPageSection-ArticleCard {
    background: white;
    border-radius: 10px;
    text-align: left;
    text-decoration: none;
    color: inherit;
    border: 1px solid #eee;
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

.IndexPageSection-ArticleCard:hover {
  transform: translateY(-5px);
}

.IndexPageSection-ArticleImage {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.IndexPageSection-ArticleTitle {
    font-size: 1.2em;
    color: #683ce4;
    padding-top: 15px;
    padding-left: 15px;
    font-weight: 600;
}

.IndexPageSection-ArticleDate {
  font-size: 0.85em;
  color: #666;
  padding: 5px 15px 15px;
}
@media (max-width: 768px) {
  .IndexPageSection-ArticleImage {
    height: 160px;
  }

  .IndexPageSection-ArticleTitle {
    font-size: 0.95em;
  }
}
/*************************************************************************************************/
/*************************INDEX HOMEPAFE CSS SET END**********************************************/
/*************************************************************************************************/


/*************************************************************************************************/
/*************************Mobiles Directory CSS SET START*****************************************/
/*************************************************************************************************/
.MobFeaSection {
  padding: 40px 0;
  background-color: #f9f9f9;
  font-family: 'Urbanist', sans-serif;
}

.MobFeaSection-Container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
}

.MobFeaSection-Title {
  font-size: 32px;
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.MobFeaSection-Grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}

.MobFeaSection-Card {
  width: 300px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  overflow: hidden;
  transition: transform 0.3s;
}

.MobFeaSection-Card:hover {
  transform: translateY(-5px);
}

.MobFeaSection-Image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.MobFeaSection-Content {
  padding: 16px;
}

.MobFeaSection-CardTitle {
  font-size: 20px;
  color: #111;
  margin-bottom: 10px;
}

.MobFeaSection-CardDesc {
  font-size: 14px;
  color: #555;
  margin-bottom: 15px;
}

.MobFeaSection-Button {
  display: inline-block;
  padding: 8px 16px;
  background-color: #683ce4;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-size: 14px;
  transition: background-color 0.2s;
}

.MobFeaSection-Button:hover {
  background-color: #3d228a;
  color: #ffffff;
  text-decoration: none;
}

.MobFeaSection-Empty {
  text-align: center;
  color: #888;
  font-size: 18px;
  padding: 40px 0;
}
@media (max-width: 768px) {
  .MobFeaSection-Grid {
    flex-direction: column;
    align-items: center;
  }

  .MobFeaSection-Card {
    width: 100%;
    max-width: 95%;
  }

  .MobFeaSection-Title {
    font-size: 26px;
  }
}
/* ===== Detail Page Styling with MobFeaMainSection prefix ===== */
/* --- Global Page Layout & Responsiveness --- */
/* This wrapper is crucial for enabling the side-by-side layout for main content and sidebar */
.PageContentWrapper {
    display: flex; /* Enables Flexbox for arranging children (main content, sidebar) */
    gap: 20px; /* Provides space between the main content and the sidebar */
    margin: 20px auto; /* Centers the content wrapper horizontally on the page */
    padding: 0; /* Adds internal padding on the sides for better spacing on small screens */
    align-items: flex-start; /* Aligns content to the top within the wrapper */
}

/* --- Main Product Detail Section Styles (Existing with new flex property) --- */
.MobFeaMainSection {
    flex: 3; /* The main content takes up 3 parts of the available flex space */
    min-width: 0; /* Allows this section to shrink properly on smaller screens */
    /* Add any other general styling for the MobFeaMainSection container itself if needed,
       e.g., background, padding, box-shadow for a card-like effect */
    background-color: #fff; /* Example: White background for main content area */
    padding: 15px; /* Example: Internal padding for the main content area */
    border-radius: 8px; /* Example: Rounded corners */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Example: Subtle shadow */
    margin-bottom: 0;
}
/* ---Tables --- */
/* --- Professional & Modern Table CSS --- */

/* General Table Styles */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-size: 1rem;
  color: #683ce4;
  background-color: #f2f2f2;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  overflow: hidden; /* Ensures border-radius is respected by child elements */
}

/* Table Header Styles */
thead tr {
  background-color: #683ce4; /* Dark, professional blue-charcoal */
  color: #ffffff;
  text-align: left;
}

th {
  padding: 18px 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Table Body Styles */
tbody tr {
  border-bottom: 1px solid #ecf0f1; /* Light gray line between rows */
  transition: background-color 0.2s ease-in-out;
}

tbody tr:last-of-type {
  border-bottom: none; /* Remove border from the last row */
}

tbody tr:hover {
  background-color: #f8f9fa; /* Subtle hover effect */
}

td {
  padding: 18px 20px;
}

td strong {
  color: #2c3e50; /* Makes the key text slightly more prominent */
}

/* --- Mobile Responsive CSS --- */
/* On screens smaller than 768px, transform table into cards */

@media screen and (max-width: 768px) {
  table {
    box-shadow: none; /* Remove shadow for a flatter mobile look */
    border-radius: 0;
  }

  /* Hide the original table header */
  thead {
    display: none;
  }

  /* Transform table, rows, and cells into block elements */
  table, tbody, tr, td {
    display: block;
    width: 100%;
  }

  /* Style each row as a card */
  tr {
    margin-bottom: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
    overflow: hidden;
  }
  
  tr:last-of-type {
    margin-bottom: 0;
  }

  /* Style each cell */
  td {
    text-align: right; /* Align cell content to the right */
    padding-left: 50%; /* Make space for the label on the left */
    position: relative;
    border-bottom: 1px solid #ecf0f1;
  }
  
  td:last-child {
    border-bottom: none;
  }

  /* Add the label before the cell content using the data-label attribute */
  td::before {
    content: attr(data-label);
    position: absolute;
    left: 15px;
    width: calc(50% - 30px); /* Adjust width considering padding */
    text-align: left;
    font-weight: 600;
    color: #2c3e50;
    white-space: nowrap;
  }
}
/* ---Tables --- */
/* Your existing .MobFeaMainSection-DetailMain and its children styles */
.MobFeaMainSection-DetailMain {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 25px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.MobFeaMainSection-DetailImage {
    width: auto;
    max-width: 100%;
    border-radius: 6px;
    border: 1px solid #ddd;
    object-fit: cover;
    transition: opacity 0.3s ease;
    cursor: pointer; /* Added for lightbox functionality */
}

.MobFeaMainSection-TextContent {
    flex: 1;
    min-width: 250px;
}

.MobFeaMainSection-Title {
    font-size: 1.8em;
    margin: 0 0 15px;
    color: #222;
    line-height: 1.3;
    padding-left: 0;
}

.MobFeaMainSection-ShortDesc {
    font-size: 1em;
    color: #444;
    line-height: 1.6;
}

.MobFeaMainSection-Gallery {
    margin-top: 10px;
}

.MobFeaMainSection-GalleryTitle {
    font-size: 1.3em;
    margin-bottom: 15px;
    color: #222;
}

.MobFeaMainSection-GalleryWrap {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.MobFeaMainSection-GalleryImage {
    width: 166px;
    height: 166px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s;
}

.MobFeaMainSection-GalleryImage:hover {
    transform: scale(1.05);
    border-color: #683ce4;
}

.MobFeaMainSection-FullDesc {
    margin-top: 30px;
    font-size: 1em;
    color: #333;
    line-height: 1.8;
}

/* Surprise Feature Box (assuming these classes exist elsewhere in your HTML) */
.MobFeaMainSection-SurpriseBox {
    margin-top: 15px; /* Add some space above this box */
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f0f8ff; /* Light blue background */
    border: 1px solid #cceeff;
    border-radius: 6px;
}

.SurpriseToggleBtn {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
    display: block; /* Make button take full width if desired */
    width: 100%;
    text-align: left;
}

.SurpriseToggleBtn:hover {
    background-color: #0056b3;
}

.SurpriseContent {
    padding-top: 15px;
    border-top: 1px dashed #e0e0e0;
    margin-top: 15px;
    color: #555;
    line-height: 1.6;
}

/* Key Features Box */
.MobFeaMainSection-SpecBox {
    margin-top: 30px;
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 6px;
    border: 1px solid #eee;
}

.MobFeaMainSection-SpecBox h3 {
    margin-top: 0;
    font-size: 1.2em;
    color: #333;
    margin-bottom: 15px;
}

.MobFeaMainSection-SpecBox ul {
    list-style: disc; /* Or 'none' if you want custom styling */
    padding-left: 20px;
    margin: 0;
}

.MobFeaMainSection-SpecBox ul li {
    margin-bottom: 8px;
    color: #555;
}


/* --- Sidebar Specific Styles --- */
.Sidebar {
    flex: 1; /* Allows the sidebar to take up 1 part of the available flex space */
    min-width: 250px; /* Ensures the sidebar doesn't get too narrow on larger screens */
    background-color: #ffffff; /* A light, soft background for the sidebar */
    padding: 20px; /* Inner spacing around the content */
    border-radius: 8px; /* Slightly rounded corners for a modern feel */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

.Sidebar h3 {
    margin-top: 0; /* Remove default top margin */
    color: #333; /* Dark gray for the heading text */
    font-size: 1.4em; /* Larger font size for prominence */
    border-bottom: 1px solid #eee; /* A thin line to separate the heading */
    padding-bottom: 10px; /* Space between text and the line */
    margin-bottom: 20px; /* Space below the heading */
    text-align: center; /* Center the heading text */
}

.SidebarProductList {
    list-style: none; /* Removes default bullet points from the list */
    padding: 0; /* Removes default left padding from the list */
    margin: 0; /* Removes default top/bottom margins */
}

.SidebarProductList li {
    margin-bottom: 15px; /* Space between each product item in the list */
}

.SidebarProductList li:last-child {
    margin-bottom: 0; /* No bottom margin on the very last item */
}

.SidebarProductList li a {
    display: flex; /* Use flexbox to align the image and text horizontally */
    align-items: center; /* Vertically centers the image and text */
    text-decoration: none; /* Removes the default underline from links */
    color: #333; /* Default text color for the product name */
    font-weight: 500; /* Makes the product name slightly bolder */
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; /* Smooth transition for hover effects */
    padding: 8px 10px; /* Padding inside the clickable link area */
    border-radius: 4px; /* Slight rounding for the hover background */
}

.SidebarProductList li a:hover {
    color: #683ce4; /* Changes text color to a primary blue on hover */
    background-color: #e4dcfa; /* Adds a very light blue background on hover */
}

.SidebarProductImage {
    width: 50px; /* Fixed width for the product image */
    height: 50px; /* Fixed height for the product image */
    object-fit: cover; /* Ensures the image covers the area without distortion, cropping if necessary */
    border-radius: 8px; /* Slightly more rounded corners for the image itself */
    margin-right: 12px; /* Space between the image and the product name */
    border: 1px solid #ddd; /* A subtle border around the image */
    flex-shrink: 0; /* Prevents the image from shrinking on smaller screens */
}

/* Fallback/message for no products */
.SidebarProductList li.no-products-message { /* Added a class for specific styling */
    color: #777; /* Lighter color for informational text */
    font-style: italic; /* Italicize the "No products" message */
    text-align: center; /* Center align the message */
    padding: 10px 0;
}


/* --- Responsive Adjustments for Smaller Screens --- */
@media screen and (max-width: 768px) { /* Changed breakpoint from 768px for better tablet support */
    .PageContentWrapper {
        flex-direction: column; /* Stacks main content and sidebar vertically */
        gap: 20px; /* Reduces the gap when stacked */
    }

    .MobFeaMainSection,
    .Sidebar {
        flex: auto; /* Allows sections to take full width */
        width: 100%; /* Explicitly set to full width */
        min-width: unset; /* Removes min-width constraint when stacked */
    }

    .Sidebar {
        margin-top: 20px; /* Adds space above the sidebar when it's stacked below the main content */
    }

    /* Your existing mobile styles for main product detail remain */
    .MobFeaMainSection-DetailMain {
        flex-direction: column;
    }

    .MobFeaMainSection-DetailImage {
        width: 100%;
    }

    .MobFeaMainSection-TextContent {
        width: 100%;
    }

    .MobFeaMainSection-Title {
        font-size: 1.5em;
        margin-top: 15px;
    }

    .MobFeaMainSection-GalleryWrap {
        justify-content: center;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-behavior: smooth;
        padding-bottom: 10px;
    }

    .MobFeaMainSection-GalleryImage {
        width: 80px;
        height: 80px;
        flex-shrink: 0;
    }
}
/* =============================
   UL / OL Styling - MobFeaMainSection
============================= */

.MobFeaMainSection ul,
.MobFeaMainSection ol {
  margin: 0 0 20px 25px;
  padding: 0;
  color: #444;
  font-size: 1em;
  line-height: 1.7;
  list-style: none;
}

.MobFeaMainSection ul li,
.MobFeaMainSection ol li {
  margin-bottom: 10px;
  position: relative;
  padding-left: 1.5em;
  line-height: 1.7;
}

.MobFeaMainSection ul li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 6px;
  color: #683ce4;
  font-size: 0.95em;
  line-height: 1;
}

/* =============================
   📱 Mobile Styles (≤768px)
============================= */

@media screen and (max-width: 768px) {
  .MobFeaMainSection ul,
  .MobFeaMainSection ol {
    margin: 0 0 18px 18px;
    font-size: 0.95em;
  }

  .MobFeaMainSection ul li,
  .MobFeaMainSection ol li {
    margin-bottom: 8px;
    padding-left: 1.4em;
    line-height: 1.6;
  }

  .MobFeaMainSection ul li::before {
    font-size: 0.85em;
    top: 0.5em;
  }
}
/* === Spec Box (Desktop) === */
.MobFeaMainSection-SpecBox {
  background: #f8f9fa;
  padding: 15px 20px;
  border-radius: 6px;
  margin-top: 20px;
  font-size: 1em;
  line-height: 1.6;
}

.MobFeaMainSection-SpecBox h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 24px!important;
  color: #683ce4;
  font-weight: 600;
}

.MobFeaMainSection-SpecBox ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.MobFeaMainSection .MobFeaMainSection-SpecBox li {
  position: relative;
  padding-left: 50px; /* Wider spacing */
  margin-bottom: 10px;
  color: #333;
  font-size: 18px;
}

.MobFeaMainSection .MobFeaMainSection-SpecBox ul li::before {
  content: "👉";
  position: absolute;
  left: 0;
  top: 3px;
  font-size: 1.2em;
  width: 20px;
  text-align: left;
  display: inline-block;
}

/* ✅ Fallback if emoji not supported */
@supports not (font-family: "Apple Color Emoji") {
  .MobFeaMainSection .MobFeaMainSection-SpecBox ul li::before {
    content: "✅";
  }
}

/* === Mobile Styles (≤768px) === */
@media screen and (max-width: 768px) {
  .MobFeaMainSection-SpecBox {
    padding: 12px 15px;
    margin-top: 16px;
    font-size: 0.95em;
    border-left-width: 3px;
  }

  .MobFeaMainSection-SpecBox h3 {
    font-size: 1.1em;
    margin-bottom: 10px;
  }

  .MobFeaMainSection .MobFeaMainSection-SpecBox li {
    padding-left: 24px;
    margin-bottom: 8px;
  }

  .MobFeaMainSection .MobFeaMainSection-SpecBox ul li::before {
    font-size: 1em;
    top: 2px;
  }
}
/****************SURPRISEFEATURE*****************/
.MobFeaMainSection-SurpriseBox {
  margin-top: 25px;
  padding: 20px;
  background: #f9f9fc;
  border: 1px dashed #683ce4;
  border-radius: 8px;
  width: fit-content;
}

.SurpriseToggleBtn {
  background: #683ce4;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 1em;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 15px;
  transition: background 0.3s ease;
}

.SurpriseToggleBtn:hover {
  background: #3d228a;
}

.SurpriseContent {
  padding: 10px 0 0;
  font-size: 1em;
  color: #333;
  line-height: 1.6;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
@media screen and (max-width: 768px) {
  .MobFeaMainSection-SurpriseBox {
    margin-top: 20px;
    padding: 15px;
    border-radius: 6px;
  }

  .SurpriseToggleBtn {
    font-size: 0.95em;
    padding: 8px 16px;
    width: 100%;
    text-align: center;
  }

  .SurpriseContent {
    font-size: 0.95em;
    padding-top: 8px;
  }
}
/*************************************************************************************************/
/*************************Mobiles Directory CSS SET END*****************************************/
/*************************************************************************************************/

/*************************************************************************************************/
/*************************PRODUCTS INDEX CSS SET START********************************************/
/*************************************************************************************************/
/* ===== Category Cards for Product Directory ===== */
.ProIndxPgSection-Grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
}

.ProIndxPgSection-Card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  transition: transform 0.3s ease;
}

.ProIndxPgSection-Card:hover {
  transform: translateY(-5px);
}
.ProIndxPgSection-Card a {
    text-decoration: none;
}
.ProIndxPgSection-LinkWrap {
  text-decoration: none;
  color: none;
  display: block;
}

.ProIndxPgSection-Image {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.ProIndxPgSection-Content {
  padding: 15px;
}

.ProIndxPgSection-CardTitle {
  font-size: 1.3em;
  margin-bottom: 8px;
  color: #683ce4;
}

.ProIndxPgSection-CardDesc {
  font-size: 0.95em;
  color: #555;
}

/* ===== Mobile Styles (≤768px) ===== */
@media screen and (max-width: 768px) {
  .ProIndxPgSection-Grid {
    grid-template-columns: 1fr;
  }

  .ProIndxPgSection-Image {
    height: 160px;
  }

  .ProIndxPgSection-CardTitle {
    font-size: 1.1em;
  }
}
/*************************************************************************************************/
/*************************PRODUCTS INDEX CSS SET END********************************************/
/*************************************************************************************************/

/*************************************************************************************************/
/*************************Image LIGHTROOM CSS SET START*******************************************/
/*************************************************************************************************/
.Lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(15, 15, 15, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  flex-direction: column;
}

.Lightbox-Image {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0,0,0,0.8);
}

.Lightbox-Close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: white;
  cursor: pointer;
}

.Lightbox-Nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 60px;
  color: white;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  user-select: none;
}

.Lightbox-Prev {
  left: 20px;
}

.Lightbox-Next {
  right: 20px;
}
@media (max-width: 768px) {
  .Lightbox-Image {
    max-width: 95%;
    max-height: 75vh;
    border-radius: 8px;
  }

  .Lightbox-Close {
    font-size: 32px;
    top: 10px;
    right: 20px;
    z-index: 10000;
  }

  .Lightbox-Nav {
    font-size: 40px;
    padding: 8px;
  }

  .Lightbox-Prev,
  .Lightbox-Next {
    top: 0;
    bottom: 20px;
    transform: none;
    color: #000000;
  }

  .Lightbox-Prev {
    left: 20px;
  }

  .Lightbox-Next {
    right: 20px;
  }
}
/*************************************************************************************************/
/*************************Image LIGHTROOM CSS SET END*******************************************/
/*************************************************************************************************/

/*************************************************************************************************/
/*************************ARTICLES INDEX CSS SET START********************************************/
/*************************************************************************************************/
.ArtiIndxPgSection {
  padding: 40px 20px;
  background: #f8f8f8;
}

.ArtiIndxPgSection-Container {
  max-width: 1200px;
  margin: 0 auto;
}

.ArtiIndxPgSection-Title {
  font-size: 2em;
  margin-bottom: 30px;
  text-align: center;
  color: #222;
}

.ArtiIndxPgSection-ContentWrapper {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

/* Main Article Column */
.ArtiIndxPgSection-Main {
  flex: 1 1 70%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Article Card */
.ArtiIndxPgSection-Card {
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s;
}

.ArtiIndxPgSection-Card:hover {
  transform: translateY(-5px);
}
.ArtiIndxPgSection-Image {
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
  margin-bottom: 0;
}

.ArtiIndxPgSection-CardTitle {
  font-size: 1.3em;
  font-weight: 600;
  padding: 15px 20px 10px;
  color: #683ce4;
  margin: 0;
}

.ArtiIndxPgSection-Date {
  font-size: 0.9em;
  color: #777;
  padding: 5px 20px;
}

.ArtiIndxPgSection-ShortDesc {
  font-size: 1em;
  color: #444;
  padding: 10px 20px 20px;
  line-height: 1.6;
}

.ArtiIndxPgSection-Empty {
  text-align: center;
  font-size: 1.1em;
  color: #888;
}

/* Sidebar */
.ArtiIndxPgSection-Sidebar {
  width: 300px;
  flex-shrink: 0;
}

.ArtiIndxPgSection-SidebarTitle {
  font-size: 1.2em;
  margin-bottom: 15px;
  color: #222;
}

.ArtiIndxPgSection-SidebarList {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ArtiIndxPgSection-SidebarItem {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.ArtiIndxPgSection-SidebarLink {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #222;
}

.ArtiIndxPgSection-SidebarImage {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.ArtiIndxPgSection-SidebarLink span {
  font-size: 0.95em;
  font-weight: 500;
  line-height: 1.3;
}

.ArtiIndxPgSection-SidebarLink:hover span {
  text-decoration: underline;
}

/* Pagination */
.ArtiIndxPgSection-Pagination {
  margin-top: 40px;
  text-align: center;
}

.ArtiIndxPgSection-Pagination a {
  display: inline-block;
  margin: 0 6px;
  padding: 8px 14px;
  border: 1px solid #ccc;
  border-radius: 5px;
  color: #333;
  text-decoration: none;
}

.ArtiIndxPgSection-Pagination a.active {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
  .ArtiIndxPgSection-ContentWrapper {
    flex-direction: column;
  }

  .ArtiIndxPgSection-Main {
    width: 100%;
  }

  .ArtiIndxPgSection-Sidebar {
    width: 100%;
    margin-top: 40px;
  }

  .ArtiIndxPgSection-Image {
    height: 200px;
  }

  .ArtiIndxPgSection-SidebarImage {
    width: 50px;
    height: 50px;
  }
}
/***********************ARTICLES DETAIL PAGE CSS SET**********************************************/
.ArticleDetailsSection {
  padding: 40px 20px;
  background: #fff;
}

.ArticleDetailsContainer {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.ArticleDetailsContent {
  flex: 1 1 70%;
}

.ArticleDetailsTitle {
  font-size: 2em;
  margin-bottom: 10px;
  color: #683ce4;
  padding-left: 0;
}

.ArticleDetailsMeta {
  font-size: 0.95em;
  color: #777;
  margin-bottom: 20px;
}

.ArticleDetailsImage {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  margin-bottom: 25px;
  border-radius: 10px;
}

.ArticleDetailsBody {
  font-size: 1.05em;
  color: #333;
  line-height: 1.8;
}
.ArticleDetailsBody ul {
  margin: 1em 0;
  padding-left: 1.5em;
  list-style: none;
  font-family: 'Urbanist', sans-serif;
  font-size: 16px;
  color: #333;
}

.ArticleDetailsBody ul li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 24px;
  line-height: 1.6;
}

.ArticleDetailsBody ul li::before {
  content: "↠";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 16px;
  color: #683ce4;
  line-height: 1.6;
}
.ArticleSidebar {
  width: 300px;
  flex-shrink: 0;
}

.ArticleSidebarTitle {
  font-size: 1.2em;
  margin-bottom: 15px;
  color: #222;
}

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

.ArticleSidebarItem {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.ArticleSidebarLink {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #222;
}

.ArticleSidebarThumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.ArticleSidebarLink span {
  font-size: 0.95em;
  font-weight: 500;
  line-height: 1.3;
}

.ArticleSidebarLink:hover span {
  text-decoration: underline;
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
  .ArticleDetailsContainer {
    flex-direction: column;
  }

  .ArticleSidebar {
    width: 100%;
    margin-top: 40px;
  }

  .ArticleDetailsImage {
    height: auto;
  }

  .ArticleSidebarThumb {
    width: 50px;
    height: 50px;
  }
}
/**************************Breadcrumb CSS SET*****************************************************/
/* Breadcrumb wrapper for layout control */
.ArticleDetailsSection-BreadcrumbWrapper {
  margin: 20px 0;
  padding: 10px 0;
}

/* Breadcrumb structure */
.ArticleDetailsSection-Breadcrumb {
  font-size: 14px;
  color: #777;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ArticleDetailsSection-BreadcrumbLink {
  color: #683ce4;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 600;
}

.ArticleDetailsSection-BreadcrumbLink:hover {
  text-decoration: underline;
  color: #301480;
}

.ArticleDetailsSection-BreadcrumbCurrent {
  color: #333;
  font-weight: 400;
  white-space: nowrap;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .ArticleDetailsSection-Breadcrumb {
    font-size: 13px;
    flex-direction: column;
    gap: 3px;
    line-height: 1.4;
  }

  .ArticleDetailsSection-BreadcrumbLink,
  .ArticleDetailsSection-BreadcrumbCurrent {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ArticleDetailsSection-BreadcrumbWrapper {
    margin: 16px 0;
    padding: 8px 0;
  }
}

/*************************************************************************************************/
/*************************ARTICLES INDEX CSS SET END**********************************************/
/*************************************************************************************************/

/*************************************************************************************************/
/*************************BRANDS INDEX CSS SET START**********************************************/
/*************************************************************************************************/
/* ===== Brands Index Page Styles ===== */

.BrdsIndxPgSection {
  padding: 20px;
}

.BrdsIndxPgSection-Container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.BrdsIndxPgSection-Card {
  border: 1px solid #ddd;
  text-align: center;
  padding: 15px;
  width: 180px;
  text-decoration: none;
  color: #000;
}

.BrdsIndxPgSection-Card:hover {
  background-color: #f8f8f8;
  cursor: pointer;
}

.BrdsIndxPgSection-Logo {
  display: block;
  margin: 0 auto 20px;  /* space below logo to fix title position */
  max-height: 80px;
  height: 80px;          /* force fixed height */
  width: auto;
  object-fit: contain;   /* maintain aspect ratio without distortion */
}

.BrdsIndxPgSection-Title {
  font-size: 16px;
  font-weight: bold;
}

/* ===== Mobile: max-width 768px ===== */
@media (max-width: 768px) {
  .BrdsIndxPgSection-Container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* or center */
    gap: 10px; /* spacing between items */
  }

  .BrdsIndxPgSection-Card {
    flex: 0 0 calc(50% - 10px); /* two items per row */
    box-sizing: border-box;
  }

  .BrdsIndxPgSection-Title {
    font-size: 18px;
  }
}
/****************************Brands Categories Page CSS********************************/
.BrdCatPg {
  padding: 40px 20px;
  max-width: 1200px;
  margin: auto;
}

.BrdCatPg-Header {
  text-align: center;
  margin-bottom: 30px;
}

.BrdCatPg-Title {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #222;
}

.BrdCatPg-Description {
  font-size: 16px;
  color: #555;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

.BrdCatPg-CategoryList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.BrdCatPg-Card {
  flex: 0 0 calc(25% - 20px); /* 4 per row on desktop */
  background: #f9f9f9;
  border-radius: 12px;
  text-align: center;
  padding: 0;
  text-decoration: none;
  color: #333;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.BrdCatPg-Card:hover {
  transform: translateY(-5px);
  background: #eef;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.BrdCatPg-CardImage {
  max-width: 100%;
  height: 160px;
  object-fit: contain;
  margin-bottom: 0;
  border-radius: 8px;
  background: #fff;
  padding: 0;
}

.BrdCatPg-CardTitle {
  font-size: 18px;
  font-weight: 600;
  margin-top: 0;
  color: #222;
  background: #fff;
}

/* Mobile: 2 per row */
@media (max-width: 768px) {
  .BrdCatPg-Card {
    flex: 0 0 calc(50% - 10px);
  }
}
/****************************Brands Mobiles Page CSS********************************/
.BrdProdPg {
  padding: 40px 20px;
  max-width: 1200px;
  margin: auto;
}

.BrdProdPg-Header {
  text-align: center;
  margin-bottom: 30px;
}

.BrdProdPg-Title {
  font-size: 28px;
  font-weight: 600;
  color: #222;
}

.BrdProdPg-ProductList {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.BrdProdPg-Card {
  flex: 0 0 calc(25% - 20px);
  background: #f8f8f8;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  color: #333;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

.BrdProdPg-Card:hover {
  transform: translateY(-5px);
  background: #eef;
}

.BrdProdPg-Image {
  max-width: 100%;
  height: 180px;
  object-fit: contain;
  margin-bottom: 10px;
  border-radius: 8px;
  background: #fff;
}

.BrdProdPg-Name {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px;
}

.BrdProdPg-ShortDesc {
  font-size: 14px;
  color: #555;
}

/* Mobile: 2 per row */
@media (max-width: 768px) {
  .BrdProdPg-Card {
    flex: 0 0 calc(50% - 10px);
  }
}
/****************************Brands Mobiles-DETAILS Page CSS********************************/
.ProductDetailPage {
  max-width: 1200px;
  margin: auto;
  padding: 40px 20px;
}

.ProductDetail-Container {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.ProductDetail-ImageBlock {
  flex: 1 1 40%;
  text-align: center;
}

.ProductDetail-Image {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  background: #fff;
  padding: 10px;
}

.ProductDetail-InfoBlock {
  flex: 1 1 55%;
}

.ProductDetail-Title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}

.ProductDetail-ShortDesc {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
}

.ProductDetail-FullDesc {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .ProductDetail-Container {
    flex-direction: column;
  }
}
/*************************************************************************************************/
/*************************BRANDS INDEX CSS SET END************************************************/
/*************************************************************************************************/

/*************************************************************************************************/
/********************************LIST STYLE ONE START*********************************************/
/*************************************************************************************************/
ul.list-style-one {
  list-style: none;
  padding-left: 0;
  margin: 20px 0;
  font-family: 'Urbanist', sans-serif;
}

ul.list-style-one li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  font-size: 16px;
  color: #333;
  line-height: 1.5;
  font-weight: 600;
}

ul.list-style-one li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #683ce4; /* Customize the accent color */
  font-weight: bold;
  font-size: 16px;
  line-height: 1.5;
}
/*************************************************************************************************/
/********************************LIST STYLE ONE END***********************************************/
/*************************************************************************************************/

/*************************************************************************************************/
/********************************Articles Comments Section START**********************************/
/*************************************************************************************************/
/* ==== LIGHT & CLEAN COMMENT SECTION ==== */
.CommentSection, .CommentList {
    margin-top: 40px;
    background: #ffffff;
    padding: 24px;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    color: #333;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.CommentForm label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 14px;
    color: #555;
}

.CommentForm input[type="text"],
.CommentForm textarea {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 18px;
    background: #fafafa;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 15px;
    color: #333;
    transition: border-color 0.3s;
}
.CommentForm input[type="text"]:focus,
.CommentForm textarea:focus {
    border-color: #683ce4;
    outline: none;
    background: #fff;
}

.CommentForm button {
    background-color: #683ce4;
    color: #fff;
    padding: 10px 22px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    transition: background 0.3s ease;
}
.CommentForm button:hover {
    background-color: #562ccc;
}

.CommentSection h2,
.CommentList h2 {
    font-size: 20px;
    margin-bottom: 20px;
    color: #683ce4;
    border-bottom: 1px solid #eee;
    padding-bottom: 6px;
}

.CommentItem {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 14px;
}
.CommentItem p {
    margin: 4px 0;
    font-size: 15px;
}
.CommentItem small {
    color: #888;
    font-size: 12px;
}

.AdminReply {
    margin-top: 10px;
    padding: 10px 15px;
    background-color: #f5f3ff;
    border-left: 3px solid #683ce4;
    border-radius: 6px;
    color: #444;
    font-size: 14px;
}
.AdminReply strong {
    color: #683ce4;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

/* ==== MOBILE (≤768px) ==== */
@media screen and (max-width: 768px) {
    .CommentSection, .CommentList {
        padding: 16px;
    }
    .CommentForm input[type="text"],
    .CommentForm textarea {
        font-size: 14px;
    }
    .CommentForm button {
        width: 100%;
        font-size: 14px;
    }
}
/*************************************************************************************************/
/********************************Articles Comments Section END************************************/
/*************************************************************************************************/