/* --- RESET & VARIABLES --- */
:root {
  --bg-hero-start: #1b4d3e;
  --bg-hero-end: #0f2e26;
  --accent-lime: rgba(209, 255, 103, 1);
  --text-light: #ffffff;
  --text-gray: #b0c4de;
  --text-dark: #1a1a1a;
  --font-main: "Inter", sans-serif;
  --container-width: 1140px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-main);
  color: var(--text-dark);
  line-height: 1.6;
  overflow-x: hidden;
  font-size: 15px;
  /* Added base font size */
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: 0.3s;
}

ul {
  list-style: none;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* --- BUTTONS --- */
.btn {
  padding: 12px 28px;
  border-radius: 12px;
  font-weight: 700;
  display: inline-block;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.btn-primary {
  background-color: var(--accent-lime);
  color: #051a14;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(204, 255, 0, 0.4);
}

/* --- HEADER --- */
header {
  background-color: #0f2e26;
  padding: 20px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-light);
  letter-spacing: -0.5px;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 40px;
}

/* --- MENU & DROPDOWN CSS --- */
header nav>ul {
  display: flex;
  gap: 30px;
  /* Khoảng cách giữa các mục menu chính */
  margin: 0;
  padding: 0;
}

header nav ul li {
  position: relative;
  /* Để căn vị trí cho menu con absolute */
}

header nav ul li a {
  color: var(--text-gray);
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 0;
}

header nav ul li a:hover,
header nav ul li:hover>a {
  color: var(--text-light);
}

/* Mũi tên cho menu có cấp con */
.has-dropdown>a::after {
  content: "▼";
  font-size: 10px;
  margin-left: 2px;
  opacity: 0.7;
  transition: transform 0.3s;
}

/* --- HEADER INNER (Light Theme) --- */
header.header-inner {
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

header.header-inner nav ul li a {
  color: #6b7280;
  /* Gray text for links */
}

header.header-inner nav ul li a:hover,
header.header-inner nav ul li:hover>a {
  color: #0f2e26;
  /* Dark green on hover */
}

/* Button in Inner Header */
header.header-inner .btn-primary {
  border-color: #0f2e26;
  color: #0f2e26;
}

header.header-inner .btn-primary:hover {
  background-color: #0f2e26;
  color: #ffffff;
  border-color: #0f2e26;
}

/* Logo Text in Inner Header (if needed) */
header.header-inner .logo {
  color: #0f2e26;
}

/* Mobile Menu Toggle in Inner Header */
header.header-inner .mobile-menu-toggle span {
  background-color: #0f2e26;
}

@media (max-width: 900px) {
  .nav-right.open nav {
    width: 100%;
  }

  .header-container {
    /* Keep row on mobile to align logo and burger */
    flex-direction: row !important;
    justify-content: space-between;
  }

  /* Hide default nav items on mobile initially */
  .nav-right {
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100vh;
    background-color: #0f2e26;
    flex-direction: column;
    align-items: flex-start;
    padding: 80px 20px 20px;
    z-index: 2000;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
  }

  .nav-right.open {
    transform: translateX(0);
  }

  /* Override for 'header-inner' (Light Header) Mobile Menu */
  header.header-inner .nav-right {
    background-color: #ffffff;
  }

  header.header-inner nav ul li a {
    color: #1a1a1a;
    border-bottom-color: rgba(0, 0, 0, 0.1);
  }

  header.header-inner .dropdown-menu {
    background: rgba(0, 0, 0, 0.05);
    /* Slightly darker for contrast on white */
  }

  header.header-inner .dropdown-menu li a {
    color: #4b5563;
    border-bottom-color: rgba(0, 0, 0, 0.05);
  }

  header.header-inner .nav-right.open {
    transform: translateX(0);
  }

  header nav>ul {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 0;
  }

  header nav ul li {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  header nav ul li:last-child {
    border-bottom: none;
  }

  header nav ul li a {
    padding: 15px 0;
    width: 100%;
    justify-content: space-between;
  }

  .dropdown-menu {
    position: static;
    display: none;
    /* JS could toggle this, but hidden for simplicity now or keep hover if desired */
    background: rgba(0, 0, 0, 0.2);
    box-shadow: none;
    width: 100%;
    padding-left: 15px;
  }

  /* Mobile Dropdown Logic */
  .has-dropdown:hover .dropdown-menu {
    display: none;
    /* Disable hover on mobile */
  }

  .has-dropdown.active>.dropdown-menu {
    display: block;
    animation: fadeIn 0.3s ease;
  }

  .has-dropdown.active>a::after {
    transform: rotate(180deg);
  }

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

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

  /* Mobile Menu Toggle Button */
  .mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 2001;
    /* Above overlay */
  }

  .mobile-menu-toggle span {
    width: 100%;
    height: 3px;
    background-color: white;
    border-radius: 2px;
    transition: all 0.3s;
    transform-origin: center;
  }

  /* Transform to X when active */
  .mobile-menu-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .mobile-menu-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* Overlay */
  .mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    backdrop-filter: blur(2px);
  }

  .mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
  }
}

/* Desktop */
@media (min-width: 901px) {

  .mobile-menu-toggle,
  .mobile-menu-overlay {
    display: none;
  }
}

/* --- DESKTOP MENU EFFECTS (Wrapped to avoid Mobile Conflicts) --- */
@media (min-width: 901px) {

  /* Xoay mũi tên khi hover */
  .has-dropdown:hover>a::after {
    transform: rotate(180deg);
  }

  /* Dropdown Menu (Cấp 2) */
  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #0f2e26;
    min-width: 240px;
    padding: 10px 0;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1100;
    display: block;
    /* Ghi đè display flex của ul cha */
  }

  /* Hiển thị menu khi hover */
  header nav ul li:hover>.dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Item trong Dropdown */
  .dropdown-menu li {
    width: 100%;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
  }

  /* Kích hoạt animation khi hover vào parent li */
  header nav ul li:hover>.dropdown-menu li {
    opacity: 1;
    transform: translateX(0);
  }

  /* Staggered delay cho từng item */
  header nav ul li:hover>.dropdown-menu li:nth-child(1) {
    transition-delay: 0.05s;
  }

  header nav ul li:hover>.dropdown-menu li:nth-child(2) {
    transition-delay: 0.1s;
  }

  header nav ul li:hover>.dropdown-menu li:nth-child(3) {
    transition-delay: 0.15s;
  }

  header nav ul li:hover>.dropdown-menu li:nth-child(4) {
    transition-delay: 0.2s;
  }

  header nav ul li:hover>.dropdown-menu li:nth-child(5) {
    transition-delay: 0.25s;
  }
}

.dropdown-menu li a {
  padding: 10px 20px;
  color: #d1d5db;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  display: flex;
  justify-content: space-between;
  transition: all 0.3s ease;
  /* Ensure smooth transition for color/bg/transform */
}

.dropdown-menu li a:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--accent-lime);
  transform: translateX(5px);
  /* Smooth GPU animation */
  /* Remove padding-left change to avoid jitter */
}

.dropdown-menu li:last-child a {
  border-bottom: none;
}

/* Dropdown Cấp 3 (Cho phần Free Tools) - Desktop Only */
@media (min-width: 901px) {
  .submenu-right {
    top: 0;
    left: 100%;
    /* Đẩy sang bên phải */
    margin-left: 5px;
    /* Khoảng cách nhỏ */
  }

  /* Fix: Tạo cầu nối vô hình để chuột không bị mất hover khi chuyển từ menu mẹ sang con */
  .submenu-right::before {
    content: "";
    position: absolute;
    top: 0;
    left: -15px;
    /* Phủ kín khoảng cách margin */
    width: 20px;
    height: 100%;
    background: transparent;
  }

  /* Mũi tên cho cấp 3 */
  .has-submenu>a::after {
    content: "▶";
    font-size: 10px;
  }
}

/* --- HEADER INNER DROPDOWN OVERRIDES --- */
header.header-inner .dropdown-menu {
  background-color: #ffffff;
  border-color: #e5e7eb;
  /* Light border */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

header.header-inner .dropdown-menu li a {
  color: #4b5563;
  /* Dark gray for light bg */
  border-bottom-color: #f3f4f6;
}

header.header-inner .dropdown-menu li a:hover {
  background-color: #f9fafb;
  /* Very light gray hover */
  color: #0f2e26;
  /* Dark green accent */
}

/* Header Button Specifics */
header .btn-primary {
  background-color: transparent;
  border: 2px solid var(--accent-lime);
  color: var(--accent-lime);
  padding: 10px 26px;
  white-space: nowrap;
}

header .btn-primary:hover {
  background-color: var(--accent-lime);
  color: #051a14;
  border-color: var(--accent-lime);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(204, 255, 0, 0.4);
}

/* --- HERO SECTION --- */
.hero {
  padding-top: 88px;
  background: url("./images/bg_banner.png") center/cover no-repeat;
  color: var(--text-light);
  text-align: center;
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 800px;
  max-height: 600px;
  background: radial-gradient(closest-side,
      rgba(204, 255, 0, 0.15),
      transparent);
  pointer-events: none;
}

.hero-content h1 {
  font-size: 46px;
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.1;
}

.hero-content p {
  font-size: 16px;
  color: #d1d5db;
  margin-bottom: 35px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-images {
  position: relative;
  margin-top: 40px;
}

.mockup-placeholder {
  display: flex;
  justify-content: center;
}

/* --- REVIEW PAGE HERO --- */
.review-hero {
  padding: 116px 0 80px;
  overflow: hidden;
}

.review-hero-container {
  display: flex;
  align-items: center;
  gap: 60px;
  justify-content: space-between;
}

.review-hero-content {
  flex: 1;
  max-width: 600px;
}

.review-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  text-align: left;
}

.review-hero-badge img {
  height: 48px;
  /* Larger icon as per image */
  width: auto;
}

.review-hero-badge .badge-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
}

.badge-title {
  font-weight: 700;
  font-size: 15px;
  color: #1a1a1a;
}

.badge-subtitle {
  font-weight: 700;
  font-size: 15px;
  color: #1a1a1a;
}

.review-hero-content h1 {
  font-size: 48px;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.1;
  margin-bottom: 24px;
  letter-spacing: -1.5px;
}

.review-hero-content p {
  font-size: 16px;
  color: #6b7280;
  margin-bottom: 32px;
  line-height: 1.6;
}

.review-hero-image {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.review-hero-image img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  /* Optional, depending on image */
}

/* Dark Button Variant */
.btn-dark {
  background-color: #0f2e26;
  color: #ffffff;
  padding: 14px 32px;
}

.btn-dark:hover {
  background-color: #1b4d3e;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 46, 38, 0.2);
}

@media (max-width: 900px) {
  .review-hero-container {
    flex-direction: column;
    gap: 40px;
    text-align: center;
  }

  .review-hero-content {
    max-width: 100%;
  }

  .review-hero-badge {
    justify-content: center;
  }

  .review-hero-image {
    justify-content: center;
  }

  .review-hero-content h1 {
    font-size: 40px;
  }
}

/* --- STRATEGY SECTION --- */
.strategy-section {
  background: linear-gradient(107.73deg,
      #21524f -0.01%,
      #22534d 63.46%,
      #437022 108.2%);
  padding: 100px 0;
  color: #ffffff;
  text-align: center;
}

.strategy-header h2 {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 60px;
  line-height: 1.2;
  color: #ffffff;
}

.strategy-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.strategy-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 40px 30px;
  width: calc((100% - 60px) / 3);
  /* Ensure 3 cards fit perfectly with 30px gap */
  min-width: 300px;
  /* Prevent getting too squished */
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: all 0.3s ease;
  /* Smooth transition for all properties */
}

.strategy-card:hover {
  transform: translateY(-5px);
  background: var(--accent-lime);
  color: #0f2e26;
}

/* Removed static .card-accent block */

.card-icon {
  width: 56px;
  height: 56px;
  background: var(--accent-lime);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

.card-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  transition: all 0.3s ease;
}

/* Hover Accent Specifics */
.strategy-card:hover .card-icon {
  background: #0f2e26;
}

.strategy-card:hover .card-icon img {
  /* Reset filter to keep icon dark on lime background */
  filter: invert(86%) sepia(28%) saturate(931%) hue-rotate(39deg) brightness(105%) contrast(102%);
}

.strategy-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}

.strategy-card p {
  font-size: 15px;
  line-height: 1.6;
  opacity: 0.9;
  transition: color 0.3s ease;
}

.strategy-card:hover p {
  color: #0f2e26;
  font-weight: 500;
}

@media (max-width: 900px) {
  .strategy-card {
    width: 100%;
  }
}

/* --- REVIEW FEATURE SECTION --- */
.review-feature-section {
  padding: 80px 0;
  overflow: hidden;
}

.feature-container {
  display: flex;
  align-items: center;
  gap: 80px;
  justify-content: space-between;
}

.feature-container.feature-reverse {
  flex-direction: row-reverse;
}

.feature-image {
  flex: 1;
}

.feature-image img {
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.feature-content {
  flex: 1;
  max-width: 500px;
}

.feature-subtitle {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #9ca3af;
  /* Light gray */
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.feature-content h2 {
  font-size: 36px;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.15;
  margin-bottom: 24px;
  letter-spacing: -1px;
}

.feature-content p {
  font-size: 16px;
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 32px;
}

/* Button with Arrow (Outline) */
.btn-outline-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  color: #0f2e26;
  background: #ffffff;
  transition: all 0.3s ease;
}

.btn-outline-arrow:hover {
  border-color: #0f2e26;
  background-color: #f9fafb;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.btn-outline-arrow svg {
  transition: transform 0.3s;
}

.btn-outline-arrow:hover svg {
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .feature-container {
    flex-direction: column-reverse;
    /* Stack with image below or top depending on pref. Usually Image Top or Bottom. Let's keep consistent with design, maybe Image Top for features? Or Text top? Let's do Text First on mobile for features usually. But if image is decorative explanations... design usually puts content first. Here Image is big. Let's stack column. */
    /* If original was image left, flex-direction: column makes image top. flexible. */
    flex-direction: column;
    gap: 40px;
    text-align: center;
  }

  .feature-content {
    max-width: 100%;
  }

  /* --- TRUSTED BY MERCHANTS SECTION --- */
  .trusted-merchants-section {
    padding: 80px 0 120px;
    background-color: #ffffff;
    text-align: center;
    font-family: inherit;
    overflow: hidden;
  }

  .trusted-merchants-section h2 {
    font-size: 32px;
    font-weight: 700;
    color: #1a3d37;
    /* Dark green theme color */
    margin-bottom: 20px;
    line-height: 1.2;
  }

  .trusted-merchants-section p.section-sub {
    max-width: 600px;
    margin: 0 auto 60px;
    color: #4b5563;
    font-size: 16px;
    line-height: 1.6;
  }

  .testimonial-slider-wrapper {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .slider-nav {
    background: #fff;
    border: 1px solid #e5e7eb;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 40;
    /* Higher than cards */
    color: #6b7280;
    outline: none;
    flex-shrink: 0;
  }

  .slider-nav:hover {
    border-color: #1a3d37;
    color: #1a3d37;
    background: #f9fafb;
  }

  .slider-container {
    position: relative;
    width: 700px;
    height: 400px;
    margin: 0 30px;
    perspective: 1000px;
  }

  .testimonial-card {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 340px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
    padding: 40px 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* Animation Base State */
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    z-index: 10;
    pointer-events: none;
    /* Prevent clicking hidden cards */
    border: 1px solid #f3f4f6;
  }

  .testimonial-card.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    z-index: 30;
    pointer-events: auto;
  }

  /* Visual Stack Elements (Fixed background cards) */
  .stack-card {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    z-index: 1;
    border: 1px solid #f3f4f6;
    transition: all 0.3s;
  }

  .stack-card.s1 {
    top: 20px;
    width: 95%;
    height: 340px;
    z-index: 25;
    opacity: 0.8;
    background: #fdfdfd;
  }

  .stack-card.s2 {
    top: 40px;
    width: 90%;
    height: 340px;
    z-index: 20;
    opacity: 0.6;
    background: #fafafa;
  }

  .testimonial-card .avatar {
    margin-bottom: 15px;
  }

  .testimonial-card .avatar img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  .testimonial-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px;
  }

  .testimonial-card .role {
    font-size: 14px;
    color: #9ca3af;
    margin-bottom: 20px;
    font-weight: 500;
    display: block;
  }

  .testimonial-card .quote {
    font-size: 15px;
    line-height: 1.6;
    color: #6b7280;
    font-style: italic;
    margin: 0;
  }

  .slider-dots {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
  }

  .slider-dots .dot {
    width: 8px;
    height: 8px;
    background: #e5e7eb;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
  }

  .slider-dots .dot.active {
    background: #1a3d37;
    /* Theme color */
    transform: scale(1.2);
  }

  @media (max-width: 768px) {
    .slider-container {
      width: 100%;
      /* height: auto; */
      min-height: 380px;
      margin: 0;
    }

    .testimonial-card {
      position: relative;
      opacity: 0;
      height: 0;
      overflow: hidden;
      padding: 0;
      transform: none;
      transition: opacity 0.3s ease;
    }

    .testimonial-card.active {
      opacity: 1;
      height: auto;
      padding: 40px 20px;
      overflow: visible;
    }

    .stack-card {
      display: none;
    }

    .slider-nav {
      display: none;
    }

    .slider-dots {
      margin-top: 30px;
    }
  }
}

/* --- FLOATING UI FEATURE SECTION (New) --- */
.floating-ui-container {
  position: relative;
  /* Create a bit of space for the floating elements to hang out */
  padding: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-img-wrapper {
  position: relative;
  z-index: 1;
  border-radius: 20px;
  overflow: hidden;
  max-width: 480px;
  /* Constrain main image width */
}

.main-img-wrapper img {
  border-radius: 20px;
  display: block;
  width: 100%;
  height: auto;
}

/* Base Floating Card Style */
.floating-card {
  position: absolute;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  z-index: 5;
  animation: floatCard 6s ease-in-out infinite;
}

@keyframes floatCard {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

/* Location Review Card (Top Left) */
.loc-review-card {
  top: 0;
  left: -20px;
  width: 340px;
  padding: 20px;
  border: 3px solid var(--accent-lime);
  /* Lime border */
  background: #fff;
  z-index: 10;
}

.loc-list-item {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 15px;
  border-bottom: 1px solid #f3f4f6;
}

.loc-list-item:last-of-type {
  border-bottom: none;
  margin-bottom: 10px;
  padding-bottom: 0;
}

.loc-icon img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.loc-details {
  flex: 1;
  font-size: 12px;
  color: #6b7280;
}

.loc-name {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: #2563eb;
  /* Blue text */
  margin-bottom: 2px;
}

.loc-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.stars {
  color: #f59e0b;
  /* Amber */
  font-weight: 700;
}

.rating-link {
  color: #2563eb;
  font-weight: 500;
  text-decoration: none;
}

.rating-link:hover {
  text-decoration: underline;
}

.loc-addr {
  font-size: 11px;
  color: #374151;
}

.more-options {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}

.loc-action a {
  color: #2563eb;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  margin-top: 10px;
}

/* Product Review Card (Bottom Right) */
.product-review-card {
  bottom: -30px;
  right: -20px;
  width: 220px;
  background: #f9fafb;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  z-index: 10;
  animation-delay: 1s;
  /* Offset animation */
}

.prod-img {
  padding: 24px;
  background: #f9fafb;
  display: flex;
  justify-content: center;
  align-items: center;
}

.prod-img img {
  width: 140px;
  height: auto;
  filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.15));
  transition: transform 0.3s;
}

.product-review-card:hover .prod-img img {
  transform: scale(1.05) rotate(-5deg);
}

.prod-footer {
  background: #1f4d45;
  /* Dark Green theme */
  padding: 16px;
}

.mock-line {
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  margin-bottom: 6px;
  width: 100%;
}

.mock-line.short {
  width: 60%;
}

.prod-stars {
  color: #fbbf24;
  font-size: 18px;
  margin-top: 10px;
  letter-spacing: 2px;
}

/* Responsive adjustments for Floating UI */
@media (max-width: 1100px) {
  .floating-ui-container {
    transform: scale(0.9);
  }
}

@media (max-width: 900px) {
  .floating-ui-container {
    padding: 0;
    margin-top: 40px;
    transform: none;
    flex-direction: column;
    align-items: center;
  }

  .floating-card {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 20px 0;
    animation: none;
    width: 100%;
    max-width: 320px;
  }

  .main-img-wrapper {
    margin: 20px 0;
    max-width: 100%;
  }

  .product-review-card {
    margin-top: -40px;
    /* Overlap slightly on mobile vertically if desired, or separate */
    margin-bottom: 20px;
    z-index: 20;
  }

  .loc-review-card {
    margin-bottom: -40px;
    z-index: 20;
  }
}

@media (max-width: 1024px) {
  .header-container {
    flex-direction: column;
    gap: 20px;
  }

  .nav-right {
    flex-direction: column;
    gap: 20px;
  }

  header nav>ul {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Ẩn dropdown trên mobile đơn giản để tránh vỡ layout (cần JS cho mobile menu hoàn chỉnh) */
  .dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    padding-left: 20px;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    /* Tạm ẩn trên mobile layout đơn giản */
  }
}

/* --- TRUST & CONVERT SECTION --- */
.trust-convert {
  background-color: #ffffff;
  padding: 100px 0;
  color: var(--text-dark);
}

.trust-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 60px;
}

.trust-content {
  max-width: 600px;
}

.trust-content h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 24px;
  color: #1a1a1a;
  letter-spacing: -1px;
}

.trust-content p {
  font-size: 16px;
  color: #6b7280;
  line-height: 1.6;
}

.active-users {
  text-align: right;
  padding-top: 10px;
}

.active-users span {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #9ca3af;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.active-users strong {
  display: block;
  font-size: 80px;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1;
  letter-spacing: -2px;
}

.trust-image {
  width: 100%;
  border-radius: 32px;
  overflow: hidden;
  transform: translateZ(0);
}

.trust-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 32px;
}

@media (max-width: 768px) {
  .trust-header {
    flex-direction: column;
    gap: 40px;
  }

  .trust-content h2 {
    font-size: 36px;
  }

  .active-users {
    text-align: left;
  }
}

/* --- TRUSTED BY SLIDER --- */
.trusted-by {
  padding: 60px 0;
  background-color: #fff;
  text-align: center;
  border-bottom: 1px solid #f3f4f6;
}

.trusted-by h3 {
  font-size: 16px;
  font-weight: 600;
  color: #4b5563;
  margin-bottom: 40px;
  margin-top: 0;
}

.brand-slider {
  width: 100%;
  padding-bottom: 20px;
}

.brand-slider .swiper-slide {
  display: flex;
  justify-content: left;
  align-items: center;
  opacity: 0.5;
  transition: opacity 0.3s;
}

.brand-slider .swiper-slide:hover {
  opacity: 1;
}

.brand-slider .swiper-slide img {
  width: auto;
  filter: grayscale(100%);
  transition: all 0.3s;
}

.brand-slider .swiper-slide:hover img {
  filter: grayscale(0%);
}

.swiper-nav-center {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 30px;
  align-items: center;
}

.brand-slider .swiper-button-prev,
.brand-slider .swiper-button-next {
  position: static;
  width: 48px;
  height: 48px;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.brand-slider .swiper-button-prev::after,
.brand-slider .swiper-button-next::after {
  display: none;
}

.brand-slider .swiper-button-prev {
  background-image: url("./images/slider-home-1/arrow/arrow-right.svg");
  transform: rotate(180deg);
  opacity: 0.5;
}

.brand-slider .swiper-button-next {
  opacity: 0.5;
  background-image: url("./images/slider-home-1/arrow/arrow-right.svg");
}

.brand-slider .swiper-button-prev:hover,
.brand-slider .swiper-button-next:hover {
  background-color: #f3f4f6;
  opacity: 1;
}

/* --- OUR PLATFORMS SECTION --- */
.our-platforms {
  padding: 100px 0;
  background-color: #f9fafb;
}

.platforms-header {
  text-align: center;
  margin-bottom: 60px;
}

.platforms-header h2 {
  font-size: 42px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 16px;
  letter-spacing: -1px;
}

.platforms-header p {
  color: #6b7280;
  font-size: 18px;
}

.platforms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.platform-card {
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.platform-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px -1px rgba(0, 0, 0, 0.1);
}

/* Shopify Card (Full Width) */
.platform-card.card-large {
  grid-column: span 2;
  flex-direction: row;
  align-items: center;
  gap: 60px;
  padding: 0;
  padding-right: 60px;
}

.platform-card.card-large .card-image {
  width: 50%;
  height: 100%;
}

.platform-card.card-large .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.platform-card.card-large .card-content {
  width: 50%;
  padding: 40px 0;
}

/* Small Cards (Wix & Shopline) */
.platform-card.card-small {
  padding: 40px 40px 0 40px;
}

.platform-card.card-small .card-content {
  padding: 0;
  margin-bottom: 20px;
}

.platform-card.card-small .card-image {
  width: 100%;
  margin-top: auto;
}

.platform-card.card-small .card-image img {
  width: 100%;
  display: block;
  border-radius: 12px;
}

.card-content h3 {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 16px;
}

.card-content p {
  color: #6b7280;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 30px;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  color: #1f2937;
  background: white;
  transition: all 0.2s;
  text-decoration: none;
}

.btn-outline:hover {
  border-color: #d1d5db;
  background-color: #f9fafb;
}

.btn-outline svg {
  transition: transform 0.2s;
}

.btn-outline:hover svg {
  transform: translateX(4px);
}

/* Responsive */
@media (max-width: 900px) {
  .platforms-grid {
    grid-template-columns: 1fr;
  }

  .platform-card.card-large {
    grid-column: span 1;
    flex-direction: column-reverse;
    /* Image bottom */
    padding: 0;
  }

  .platform-card.card-large .card-image,
  .platform-card.card-large .card-content {
    width: 100%;
  }

  .platform-card.card-large .card-content {
    padding: 40px 40px 0 40px;
  }
}

/* --- SUPERCHARGE SECTION --- */
.supercharge {
  padding: 100px 0;
  background-color: #ffffff;
}

.supercharge-header {
  text-align: center;
  margin-bottom: 80px;
}

.supercharge-header h2 {
  font-size: 36px;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.2;
  margin-bottom: 20px;
}

.supercharge-header p {
  color: #6b7280;
  font-size: 16px;
}

.feature-row {
  display: flex;
  align-items: center;
  gap: 100px;
  margin-bottom: 150px;
}

.feature-row:last-child {
  margin-bottom: 0;
}

.feature-row.reverse {
  flex-direction: row-reverse;
}

.feature-content {
  flex: 1;
}

.feature-tag {
  font-size: 12px;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
  letter-spacing: 0.5px;
}

.feature-content h3 {
  font-size: 28px;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.2;
  margin-bottom: 20px;
}

.feature-content p {
  color: #4b5563;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 30px;
  max-width: 450px;
}

.feature-image {
  flex: 1;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

.feature-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 32px;
}

@media (max-width: 900px) {

  .feature-row,
  .feature-row.reverse {
    flex-direction: column-reverse;
    gap: 40px;
    margin-bottom: 100px;
    text-align: center;
  }

  .feature-content p {
    margin-left: auto;
    margin-right: auto;
  }

  .supercharge-header h2 {
    font-size: 32px;
  }
}

/* --- TRIAL SECTION --- */
.trial-section {
  padding: 80px 0;
  text-align: center;
  background-color: #fff;
  /* or any color */
}

.trial-content h2 {
  font-size: 48px;
  font-weight: 800;
  margin-bottom: 20px;
}

.trial-content p {
  font-size: 18px;
  color: #4b5563;
  margin-bottom: 40px;
}

.trial-content .btn-primary {
  padding: 16px 48px;
  font-size: 16px;
}

/* --- FOOTER --- */
footer {
  background-color: #f9fafb;
  background-image: url("./images/bg-footer.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  padding: 80px 0 40px 0;
  color: #4b5563;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 60px;
  margin-bottom: 60px;
}

.footer-branding {
  max-width: 300px;
}

.footer-branding h3 {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
}

.footer-branding p {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 24px;
  color: #fff;
}

.social-links {
  display: flex;
  gap: 16px;
}

.social-links a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4b5563;
  transition: all 0.2s;
  font-size: 18px;
  /* Font Awesome icon size */
  text-decoration: none;
}

.social-links a:hover {
  background: var(--accent-lime);
  color: #1a1a1a;
}

.footer-links-wrapper {
  flex: 1;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
}

.footer-column h4 {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 24px;
}

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

.footer-column ul li a {
  font-size: 14px;
  color: #fff;
  display: inline-block;
  transition: all 0.3s ease;
}

.footer-column ul li a:hover {
  color: var(--accent-lime);
  transform: translateX(5px);
}

.footer-bottom {
  border-top: 1px solid #e5e7eb;
  padding-top: 30px;
  text-align: center;
  font-size: 14px;
  color: #9ca3af;
}

@media (max-width: 768px) {
  .footer-top {
    flex-direction: column;
    gap: 40px;
  }

  .footer-links-wrapper {
    flex-direction: column;
    gap: 40px;
  }
}

/* --- TRUSTED BY MERCHANTS SECTION --- */
.trusted-merchants-section {
  padding: 80px 0 120px;
  background-color: #ffffff;
  text-align: center;
  font-family: inherit;
  overflow: hidden;
  border-top: 1px solid #f3f4f6;
}

.trusted-merchants-section h2 {
  font-size: 28px;
  font-weight: 700;
  color: #1a3d37;
  /* Dark green theme color */
  margin-bottom: 20px;
  line-height: 1.2;
}

.trusted-merchants-section p.section-sub {
  max-width: 600px;
  margin: 0 auto 60px;
  color: #4b5563;
  font-size: 16px;
  line-height: 1.6;
}

.testimonial-slider-wrapper {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-nav {
  background: #fff;
  border: 1px solid #e5e7eb;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 40;
  /* Higher than cards */
  color: #6b7280;
  outline: none;
  flex-shrink: 0;
}

.slider-nav:hover {
  border-color: #1a3d37;
  color: #1a3d37;
  background: #f9fafb;
}

.slider-container {
  position: relative;
  width: 700px;
  height: 400px;
  margin: 0 30px;
  perspective: 1000px;
}

.testimonial-card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 340px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
  padding: 40px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* Animation Base State */
  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  z-index: 10;
  pointer-events: none;
  /* Prevent clicking hidden cards */
  border: 1px solid #f3f4f6;
}

.testimonial-card.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  z-index: 30;
  pointer-events: auto;
}

/* Visual Stack Elements (Fixed background cards) */
.stack-card {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  z-index: 1;
  border: 1px solid #f3f4f6;
  transition: all 0.3s;
}

.stack-card.s1 {
  top: 20px;
  width: 95%;
  height: 340px;
  z-index: 25;
  opacity: 0.8;
  background: #fdfdfd;
}

.stack-card.s2 {
  top: 40px;
  width: 90%;
  height: 340px;
  z-index: 20;
  opacity: 0.6;
  background: #fafafa;
}

.testimonial-card .avatar {
  margin-bottom: 15px;
}

.testimonial-card .avatar img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.testimonial-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 4px;
}

.testimonial-card .role {
  font-size: 14px;
  color: #9ca3af;
  margin-bottom: 20px;
  font-weight: 500;
  display: block;
}

.testimonial-card .quote {
  font-size: 15px;
  line-height: 1.6;
  color: #6b7280;
  font-style: italic;
  margin: 0;
}

.slider-dots {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.slider-dots .dot {
  width: 8px;
  height: 8px;
  background: #e5e7eb;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
}

.slider-dots .dot.active {
  background: #1a3d37;
  /* Theme color */
  transform: scale(1.2);
}

@media (max-width: 768px) {
  .slider-container {
    width: 100%;
    min-height: 380px;
    margin: 0;
  }

  .testimonial-card {
    position: relative;
    opacity: 0;
    height: 0;
    overflow: hidden;
    padding: 0;
    transform: none;
    transition: opacity 0.3s ease;
  }

  .testimonial-card.active {
    opacity: 1;
    height: auto;
    padding: 40px 20px;
    overflow: visible;
  }

  .stack-card {
    display: none;
  }

  .slider-nav {
    display: none;
  }

  .slider-dots {
    margin-top: 30px;
  }
}

/* --- MERCHANT REVIEWS SECTION --- */
.merchant-reviews {
  padding: 100px 0;
  background: linear-gradient(107.73deg,
      #21524f -0.01%,
      #22534d 63.46%,
      #437022 108.2%);
  color: #fff;
  overflow: hidden;
}

.reviews-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 60px;
}

.reviews-header h2 {
  font-size: 36px;
  font-weight: 800;
  max-width: 500px;
  line-height: 1.1;
}

.reviews-rating {
  display: flex;
  align-items: center;
  text-align: right;
}

.rating-number {
  font-size: 56px;
  font-weight: 600;
  color: var(--accent-lime);
  line-height: 1;
  display: inline-block;
  margin-right: 10px;
}

.rating-stars {
  color: #fff;
  font-size: 28px;
  line-height: 0px;
  display: inline-block;
}

.rating-text {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  text-align: left;
}

.reviews-slider {
  width: 145%;
  padding-bottom: 60px;
}

.review-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 24px;
  padding: 40px;
  height: 100%;
  min-height: 357px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.review-card.highlight {
  background: var(--accent-lime);
  color: #051a14;
  border: none;
}

.review-text {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 30px;
  opacity: 0.9;
}

.review-card.highlight .review-text {
  color: #051a14;
  font-weight: 500;
}

.reviewer-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.reviewer-avatar {
  width: 48px;
  height: 48px;
  background-color: #fff;
  border-radius: 50%;
}

.review-card.highlight .reviewer-avatar {
  background-color: #0f2e26;
}

.reviewer-details h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 2px;
}

.reviewer-details span {
  font-size: 14px;
  opacity: 0.7;
}

/* Custom nav for reviews */
.merchant-reviews .swiper-nav-center {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
  align-items: center;
  transform: translateX(-15%);
}

.merchant-reviews .swiper-button-prev,
.merchant-reviews .swiper-button-next {
  position: static;
  width: 32px;
  height: 32px;
  margin: 0;
  background-color: transparent;
  border-radius: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  opacity: 0.6;
  transition: opacity 0.3s;
}

.merchant-reviews .swiper-button-prev::after,
.merchant-reviews .swiper-button-next::after {
  display: none;
}

.merchant-reviews .swiper-button-prev {
  background-image: url("./images/slider-home-1/arrow/arrow-left.svg");
  filter: brightness(0) invert(1);
  /* White */
}

.merchant-reviews .swiper-button-next {
  background-image: url("./images/slider-home-1/arrow/arrow-right.svg");
  filter: brightness(0) invert(1);
  /* White */
}

.merchant-reviews .swiper-button-prev:hover,
.merchant-reviews .swiper-button-next:hover {
  background-color: transparent;
  opacity: 1;
  filter: brightness(0) invert(0.8) sepia(1) saturate(5) hue-rotate(60deg);
  /* Lime tint hover */
}

@media (max-width: 768px) {
  .reviews-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .reviews-rating {
    text-align: left;
  }

  .reviews-rating {
    text-align: left;
  }
}

/* --- BLOG SECTION --- */
.trustify-blog {
  padding: 100px 0;
  background-color: #fff;
}

.blog-header {
  text-align: center;
  margin-bottom: 60px;
}

.blog-header h2 {
  font-size: 36px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 20px;
  letter-spacing: -1px;
}

.blog-header p {
  color: #6b7280;
  font-size: 18px;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.blog-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
}

/* Common Card Styles */
.blog-thumb-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

.blog-thumb-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.blog-thumb-wrapper:hover img {
  transform: scale(1.05);
}

.img-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}

.overlay-tag {
  background: #fff;
  color: #1a1a1a;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 20px;
  margin-top: 10px;
  display: inline-block;
}

.overlay-title {
  color: #fff;
  /* Fallback if not using the gradient bar style */
  font-weight: 700;
  margin-bottom: 8px;
  /* Matches the green gradient look in design */
  background: linear-gradient(90deg, #4ade80 0%, rgba(74, 222, 128, 0) 100%);
  color: #00332a;
  padding: 8px 16px 8px 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  width: 90%;
  margin-bottom: 10px;
  line-height: 1.3;
}

.blog-meta {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 12px;
  font-weight: 500;
}

.blog-meta span {
  color: #1a1a1a;
  font-weight: 700;
}

/* Featured Post (Left) */
.featured-post .blog-thumb-wrapper {
  height: 350px;
  margin-bottom: 30px;
}

.featured-post h3 {
  font-size: 23px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 16px;
  line-height: 1.3;
}

.featured-post p {
  color: #4b5563;
  font-size: 16px;
  line-height: 1.6;
}

/* Small List (Right) */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.blog-card-small {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.blog-card-small .blog-thumb-wrapper {
  width: 180px;
  height: 120px;
  flex-shrink: 0;
  border-radius: 16px;
}

.blog-card-small .img-overlay .overlay-title {
  font-size: 12px;
  padding: 4px 8px;
  width: auto;
}

.blog-card-small h4 {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.4;
  margin-bottom: 10px;
}

.blog-card-small .overlay-tag {
  font-size: 9px;
  padding: 4px 8px;
  margin-top: 5px;
}

@media (max-width: 900px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .featured-post .blog-thumb-wrapper {
    height: 250px;
  }

  .blog-header h2 {
    font-size: 36px;
  }
}

@media (max-width: 768px) {

  /* General Mobile Fixes */
  .container {
    padding: 0 20px;
  }

  /* Hero */
  .hero-content h1 {
    font-size: 32px;
  }

  /* Trust Section */
  .trust-content h2 {
    font-size: 30px;
  }

  .active-users strong {
    font-size: 50px;
  }

  /* Supercharge */
  .supercharge-header h2 {
    font-size: 32px;
  }

  .feature-row {
    gap: 40px;
  }

  /* Blog */
  .blog-card-small {
    flex-direction: column;
  }

  .blog-card-small .blog-thumb-wrapper {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }

  .blog-card-small img {
    height: 100%;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-branding,
  .footer-links-wrapper {
    width: 100%;
  }

  .footer-links-wrapper {
    flex-direction: column;
    gap: 40px;
  }
}

.blog-list a.blog-card-small {
  display: flex;
}

/* Make blog cards clickable links */
a.featured-post,
a.blog-card-small {
  text-decoration: none;
  color: inherit;
  display: block;
  /* Ensure they behave like block elements */
}

a.featured-post:hover h3,
a.blog-card-small:hover h4 {
  color: #0077b5;
  /* Optional hover effect color */
}

/* --- PLATFORMS INTEGRATION SECTION --- */
.platforms-section {
  padding: 100px 0;
  background-color: #ffffff;
  overflow: hidden;
}

.platforms-container {
  display: flex;
  align-items: center;
  gap: 80px;
}

.platforms-image-wrapper {
  flex: 1.1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Main Image */
.main-platform-image {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 550px;
  border-radius: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.main-platform-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
}

/* Floating Cards */
.floating-ui-card {
  position: absolute;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  z-index: 5;
}

/* Location Card (Top Left) */
.location-card {
  top: 40px;
  left: -40px;
  width: 300px;
  padding: 16px;
  border: 1px solid #f3f4f6;
  animation: floatUp 6s ease-in-out infinite;
}

.loc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f9fafb;
}

.loc-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.loc-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #e5e7eb;
  background-size: cover;
  background-position: center;
}

.loc-avatar.av-1 {
  background-image: url("https://placehold.co/40x40/2563eb/fff?text=T");
}

.loc-avatar.av-2 {
  background-image: url("https://placehold.co/40x40/ea580c/fff?text=N");
}

.loc-info {
  display: flex;
  flex-direction: column;
}

.loc-name {
  font-size: 13px;
  font-weight: 700;
  color: #2563eb;
  line-height: 1.2;
}

.loc-meta {
  font-size: 10px;
  color: #6b7280;
  font-weight: 500;
  margin-top: 2px;
}

/* Product Card (Bottom Right) */
.product-card {
  bottom: -30px;
  right: -20px;
  width: 180px;
  padding: 0;
  overflow: hidden;
  animation: floatDown 7s ease-in-out infinite;
}

.prod-thumb {
  background: #f9fafb;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.prod-thumb img {
  width: 100px;
  height: auto;
  transform: rotate(-12deg);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
  transition: transform 0.3s;
}

.product-card:hover .prod-thumb img {
  transform: rotate(0deg) scale(1.1);
}

.prod-rating-ui {
  background: #153830;
  padding: 12px;
  text-align: left;
}

.star-row {
  color: #fbbf24;
  letter-spacing: 2px;
  font-size: 14px;
  display: block;
  margin-bottom: 6px;
}

.mock-lines {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  margin-bottom: 4px;
}

.mock-lines.short {
  width: 60%;
}

@keyframes floatUp {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

@keyframes floatDown {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(12px);
  }
}

/* Content Side */
.platforms-content {
  flex: 1;
  max-width: 550px;
}

.platforms-content h2 {
  font-size: 36px;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.15;
  margin-bottom: 24px;
  letter-spacing: -1px;
}

.platforms-content p {
  font-size: 16px;
  color: #4b5563;
  line-height: 1.6;
  margin-bottom: 40px;
}

/* Platform List */
.platform-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.platform-item {
  display: flex;
  gap: 24px;
  align-items: center;
  background-color: #f3f4f6;
  /* Gray background for the card */
  padding: 14px 12px;
  border-radius: 20px;
  transition: transform 0.3s ease;
}

.platform-item:hover {
  transform: translateY(-2px);
  background-color: #e5e7eb;
}

.plat-icon-box {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Removed background colors from here */
}

/* Icons can be larger now as per design */
.plat-icon-box img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

/* Remove old specific backgrounds if they exist, or just leave them blank here */
.bg-shopify,
.bg-wix,
.bg-shopline {
  background-color: transparent;
}

.plat-details {
  flex: 1;
}

.plat-details h3 {
  font-size: 19px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 6px;
  line-height: 1.2;
}

.plat-details p {
  font-size: 15px;
  color: #4b5563;
  line-height: 1.5;
  margin-bottom: 0;
  font-weight: 500;
}

@media (max-width: 900px) {
  .platforms-section {
    padding: 60px 0;
  }

  .platforms-container {
    flex-direction: column;
    gap: 60px;
  }

  .platforms-image-wrapper {
    margin-right: 0;
    width: 100%;
    max-width: 400px;
  }

  /* On mobile, maybe hide or simplify floating elements if space is tight */
  .location-card {
    width: 200px;
    left: -10px;
    top: -20px;
  }

  .product-card {
    right: -10px;
    bottom: -20px;
    width: 140px;
  }

  .loc-name {
    font-size: 11px;
  }

  .loc-meta {
    font-size: 9px;
  }

  .platforms-content h2 {
    font-size: 32px;
  }

  .platform-item {
    padding: 20px;
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 16px;
  }
}

/* --- CTA GRADIENT SECTION --- */
.cta-gradient-section {
  position: relative;
  padding: 90px 0 176px;
  overflow: hidden;
  /* Mesh Gradient Approximation */
  background: #1a4d2e;
  /* Fallback */
  background: linear-gradient(135deg, #1b4332 0%, #1a4d2e 40%, #a05c1c 100%);
  color: #ffffff;
}

.cta-gradient-section .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  max-width: 1200px;
  position: relative;
  padding-left: 20px;
  padding-right: 20px;
}

.cta-image-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
}

.cta-image-wrapper img {
  max-width: 100%;
  height: auto;
  /* filter: drop-shadow(0 20px 40px rgba(0,0,0,0.2)); */
}

.cta-content-wrapper {
  flex: 1;
  max-width: 550px;
}

.cta-content-wrapper h2 {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 24px;
  color: #ffffff;
}

.cta-content-wrapper p {
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 32px;
  color: rgba(255, 255, 255, 0.9);
}

.cta-content-wrapper .btn-white {
  background-color: #ffffff;
  color: #1a4d2e;
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  font-size: 14px;
}

.cta-content-wrapper .btn-white:hover {
  background-color: #f0fdf4;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Responsive */
@media (max-width: 991px) {
  .cta-gradient-section .container {
    flex-direction: column;
    text-align: center;
    padding-top: 40px;
    padding-bottom: 40px;
    gap: 40px;
  }

  .cta-image-wrapper {
    width: 100%;
    max-width: 500px;
  }

  .cta-content-wrapper h2 {
    font-size: 32px;
  }
}

/* --- MOBILE RESPONSIVE (max-width: 768px) --- */
@media (max-width: 768px) {

  /* 1. Global Spacing Adjustments */
  .review-hero,
  .strategy-section,
  .review-feature-section,
  .platforms-section,
  .trusted-merchants-section,
  .cta-gradient-section {
    padding: 60px 0;
  }

  /* 2. Hero Section */
  .review-hero-content h1 {
    font-size: 36px;
    /* Smaller heading */
    margin-bottom: 16px;
  }

  .review-hero-content p {
    font-size: 16px;
    margin-bottom: 24px;
  }

  .review-hero-badge {
    justify-content: center;
    margin-bottom: 20px;
  }

  /* 3. Strategy Section */
  .strategy-section .container {
    padding: 0 20px;
  }

  .strategy-header h2 {
    font-size: 28px;
    margin-bottom: 40px;
  }

  .strategy-grid {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .strategy-card {
    width: 100%;
    max-width: 100%;
    /* Full width cards */
    min-width: 0;
  }

  /* 4. Feature Section */
  .feature-container,
  .feature-container.feature-reverse {
    flex-direction: column-reverse;
    /* Stack content, image on top/bottom as needed. Usually Image Top.*/
    gap: 30px;
    text-align: center;
  }

  .feature-content h2 {
    font-size: 28px;
  }

  /* 5. Platforms Section */
  .platforms-content h2 {
    font-size: 28px;
  }

  .platform-item {
    flex-direction: row;
    /* Keep icon side-by-side with text */
    text-align: left;
    padding: 16px;
    align-items: flex-start;
  }

  .plat-icon-box {
    width: 50px;
    height: 50px;
  }

  .plat-icon-box img {
    width: 32px;
    height: 32px;
  }

  .plat-details h3 {
    font-size: 18px;
  }

  .plat-details p {
    font-size: 14px;
  }

  /* 6. Testimonials */
  .testimonial-card {
    padding: 30px 20px;
    height: auto;
    min-height: 300px;
  }

  .slider-nav {
    display: none;
    /* Hide arrows on mobile */
  }

  /* 7. CTA Section */
  .cta-gradient-section {
    padding: 60px 0 100px;
    /* Slight bottom padding */
  }

  .cta-content-wrapper h2 {
    font-size: 30px;
  }

  .cta-content-wrapper p {
    font-size: 15px;
  }

  .cta-content-wrapper .btn-white {
    width: 100%;
    justify-content: center;
  }
}

/* --- SHOPIFY MVL PAGE STYLES --- */
:root {
  --color-lime: #d2f54c;
  --color-dark-green: #254f3f;
  --color-darker-green: #1f3d33;
}

/* HERO SECTION */
.shopify-hero {
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.shopify-hero-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.shopify-hero-content {
  flex: 1;
  max-width: 550px;
}

.shopify-hero-branding {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.shopify-hero-logo-img {
  /* height: 32px; */
  width: auto;
}

.shopify-hero-platform-name {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  color: #000;
}

.shopify-hero-content h1 {
  font-size: 48px;
  line-height: 1.2;
  margin-bottom: 20px;
  font-weight: 800;
  color: #111;
}

.mvl-box-filter {
  display: flex;
  justify-content: space-between;
  margin-bottom: 44px;
}

.shopify-hero-content p {
  font-size: 18px;
  line-height: 1.6;
  color: #555;
  margin-bottom: 30px;
}

.shopify-hero-image {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.shopify-hero-image img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); */
}

/* APP SHOWCASE SECTION */
.shopify-app-showcase-section {
  padding: 80px 0;
  background-color: #fafafa;
  text-align: center;
}

.shopify-app-showcase-header {
  max-width: 700px;
  margin: 0 auto 50px;
}

.shopify-app-showcase-header h2 {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 15px;
  color: #111;
}

.shopify-app-showcase-header p {
  color: #666;
}

/* New Grid Layout for Apps */
.shopify-apps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}

.shopify-app-card {
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
  text-align: left;
  position: relative;
  border: 1px solid #f0f0f0;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
  display: flex;
  flex-direction: column;
}

.shopify-app-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.shopify-app-card-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}

.shopify-app-card-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
}

.shopify-app-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shopify-app-card-meta {
  flex: 1;
}

.shopify-app-card-meta h3 {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 5px;
  color: #111;
  line-height: 1.3;
}

.shopify-price-row {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  gap: 15px;
}

.shopify-price-free {
  color: #888;
}

.shopify-app-rating-row {
  font-size: 13px;
  color: #111;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}

.shopify-star-icon {
  color: #ffc107;
  font-size: 14px;
}

.shopify-shop-icon-small {
  width: 14px;
  height: 14px;
  margin-left: 5px;
  vertical-align: middle;
}

.shopify-app-card-desc {
  font-size: 15px;
  line-height: 1.6;
  color: #555;
  margin-bottom: 30px;
  flex-grow: 1;
}

.shopify-btn-full-width {
  width: 100%;
  display: block;
  text-align: center;
  background-color: #254f3f;
  color: rgba(209, 255, 103, 1);
  padding: 15px;
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.3s;
  font-size: 14px;
}

.shopify-btn-full-width:hover {
  background-color: #1a3a2e;
  color: #fff;
}

@media (max-width: 768px) {
  .shopify-apps-grid {
    grid-template-columns: 1fr;
  }

  .shopify-hero-container {
    flex-direction: column;
  }
}

/* STRATEGY GRID */
.shopify-strategy-section {
  padding: 100px 0;
  background: linear-gradient(107.73deg,
      #21524f -0.01%,
      #22534d 63.46%,
      #437022 108.2%);
  color: #fff;
  text-align: center;
}

.shopify-strategy-title {
  font-size: 32px;
  margin-bottom: 60px;
  font-weight: 700;
}

.shopify-strategy-grid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.shopify-strat-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 30px;
  width: calc(33.333% - 24px);
  text-align: left;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: transform 0.3s;
}

.shopify-strat-card:hover {
  transform: translateY(-5px);
}

/* Highlighted (Lime) Card */
.shopify-strat-card.highlighted {
  background: var(--color-lime);
  color: #111;
  border: none;
}

.shopify-strat-card.highlighted h3,
.shopify-strat-card.highlighted p {
  color: #111;
}

.shopify-strat-card .s-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.shopify-strat-card.highlighted .s-icon {
  background: #111;
  color: #fff;
}

.shopify-strat-card.highlighted .s-icon img {
  filter: invert(1);
}

.shopify-strat-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #fff;
}

.shopify-strat-card p {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

@media (max-width: 900px) {
  .shopify-strat-card {
    width: calc(50% - 24px);
  }
}

@media (max-width: 600px) {
  .shopify-strat-card {
    width: 100%;
  }

  .shopify-hero-container {
    flex-direction: column;
    text-align: left;
  }

  .shopify-hero-container {
    text-align: center;
  }
}

/* NEWSLETTER */
.shopify-newsletter-section {
  padding: 100px 0;
  background: #fff;
}

.shopify-newsletter-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 60px;
}

.shopify-news-text {
  flex: 1;
  min-width: 300px;
}

.shopify-news-text h3 {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 15px;
  color: #111;
  letter-spacing: -1px;
}

.shopify-news-text p {
  color: #666;
  font-size: 15px;
  line-height: 1.6;
  max-width: 500px;
}

.shopify-news-form {
  display: flex;
  background: #fafcf5;
  border: 1px solid #254f3f;
  border-radius: 12px;
  width: 100%;
  max-width: 500px;
  overflow: hidden;
  height: 54px;
}

.shopify-news-form input {
  border: none;
  padding: 0 25px;
  width: 100%;
  height: 100%;
  outline: none;
  background: transparent;
  font-size: 16px;
  color: #333;
}

.shopify-news-form input::placeholder {
  color: #555;
  opacity: 0.8;
}

.shopify-news-form button {
  background: #254f3f;
  color: #fff;
  border: none;
  padding: 0 45px;
  border-radius: 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
  transition: background 0.3s;
}

.shopify-news-form button:hover {
  background: #1a3a2e;
}

/* CONTACT FORM */
.shopify-contact-section {
  padding: 100px 0;
  background: #fff;
  position: relative;
}

.shopify-contact-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 60px;
  position: relative;
}

.shopify-contact-header h2 {
  font-size: 48px;
  font-weight: 800;
  max-width: 600px;
  line-height: 1.1;
  color: #111;
  margin: 0;
  letter-spacing: -1.5px;
}

.shopify-contact-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 10px;
}

.shopify-circle-btn {
  width: 45px;
  height: 45px;
  border: 1px solid #e5e5e5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;
  transition: 0.3s;
  background: #fff;
}

.shopify-circle-btn:hover {
  background: #111;
  color: #fff;
  border-color: #111;
}

.shopify-custom-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.shopify-form-group {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.shopify-form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

.shopify-form-group input,
.shopify-form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
  background: #fff;
  color: #333;
}

.shopify-form-group textarea {
  min-height: 120px;
  resize: vertical;
}

.shopify-form-group input::placeholder,
.shopify-form-group textarea::placeholder {
  color: #aaa;
  font-weight: 400;
}

.shopify-form-group input:focus,
.shopify-form-group textarea:focus {
  border-color: #111;
}

.shopify-full-width {
  grid-column: span 3;
}

.shopify-submit-btn {
  background: #1f4236;
  color: #fff;
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-top: 10px;
}

@media (max-width: 900px) {
  .shopify-custom-form-grid {
    grid-template-columns: 1fr;
  }

  .shopify-full-width {
    grid-column: span 1;
  }

  .shopify-contact-header {
    flex-direction: column;
    gap: 30px;
  }

  .shopify-contact-actions {
    flex-direction: row;
  }
}

/* CUSTOM FOOTER LANDING */
.shopify-landing-footer {
  background: linear-gradient(110deg, #375e52 0%, #204033 50%, #b86e20 100%);
  padding: 80px 0 40px;
  color: #fff;
  font-size: 14px;
}

.shopify-landing-footer a {
  color: #fff;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.3s;
}

.shopify-landing-footer a:hover {
  opacity: 1;
}

.shopify-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
}

.shopify-f-brand h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #fff;
}

.shopify-f-brand p {
  opacity: 0.8;
  line-height: 1.6;
  max-width: 300px;
  margin-bottom: 20px;
}

.shopify-f-brand .shopify-f-socials {
  display: flex;
  gap: 15px;
}

.shopify-f-brand .shopify-f-socials a {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.shopify-f-brand .shopify-f-socials a:hover {
  background: rgba(255, 255, 255, 0.2);
}

.shopify-f-col h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #fff;
}

.shopify-f-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.shopify-f-col ul li {
  margin-bottom: 12px;
}

.shopify-footer-bottom-row {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 30px;
  font-size: 13px;
  opacity: 0.6;
}

@media (max-width: 900px) {
  .shopify-footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .shopify-f-brand {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .shopify-footer-grid {
    grid-template-columns: 1fr;
  }

  .shopify-f-brand {
    grid-column: span 1;
  }
}

/* --- SHOPIFY MVL PAGE MOBILE RESPONSIVE --- */
@media screen and (max-width: 768px) {

  /* General Section Padding */
  .shopify-hero,
  .shopify-app-showcase-section,
  .strategy-section,
  .shopify-newsletter-section,
  .shopify-contact-section {
    padding: 60px 0 !important;
  }

  /* HERO SECTION */
  .shopify-hero-container {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .shopify-hero-content {
    max-width: 100%;
    margin: 0 auto;
  }

  .shopify-hero-branding {
    justify-content: center;
    margin-bottom: 24px;
  }

  .shopify-hero-content h1 {
    font-size: 32px;
    line-height: 1.3;
    margin-bottom: 20px;
  }

  .shopify-hero-content p {
    font-size: 16px;
    margin-bottom: 24px;
  }

  .shopify-hero-image {
    justify-content: center;
    margin-top: 20px;
  }

  .shopify-hero-image img {
    width: 100%;
  }

  /* APP SHOWCASE SECTION */
  .shopify-app-showcase-header h2 {
    font-size: 28px;
  }

  .shopify-app-showcase-header p {
    font-size: 15px;
  }

  .shopify-apps-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .shopify-app-card {
    padding: 30px 24px;
  }

  .shopify-app-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .shopify-app-card-icon {
    width: 56px;
    height: 56px;
  }

  .shopify-app-card-meta h3 {
    font-size: 18px;
    margin-bottom: 8px;
  }

  /* STRATEGY SECTION */
  .strategy-grid {
    display: flex;
    /* Ensure flex behavior */
    flex-direction: column;
    gap: 20px;
  }

  .strategy-card {
    width: 100% !important;
    /* Override calc */
    min-height: auto;
    padding: 24px;
  }

  /* NEWSLETTER SECTION */
  .shopify-newsletter-box {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .shopify-news-text {
    min-width: 100%;
    text-align: center;
  }

  .shopify-news-text h3 {
    font-size: 26px;
    margin-bottom: 12px;
  }

  .shopify-news-text p {
    font-size: 15px;
    margin: 0 auto;
  }

  .shopify-news-form {
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    /* Stack input and button on very small screens if needed, otherwise row */
    height: auto;
    padding: 5px;
    background: transparent;
    border: none;
    gap: 10px;
  }

  .shopify-news-form input {
    height: 50px;
    border: 1px solid #254f3f;
    border-radius: 8px;
    background: #fafcf5;
    width: 100%;
  }

  .shopify-news-form button {
    width: 100%;
    height: 50px;
    border-radius: 8px;
    padding: 0;
  }

  /* CONTACT SECTION */
  .shopify-contact-header {
    flex-direction: column;
    text-align: center;
    gap: 24px;
    margin-bottom: 40px;
  }

  .shopify-contact-header h2 {
    font-size: 30px;
    max-width: 100%;
    margin-right: 0;
  }

  .shopify-contact-actions {
    flex-direction: row;
    justify-content: center;
    width: 100%;
    margin-top: 0;
  }

  .shopify-custom-form-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .shopify-full-width {
    grid-column: span 1;
  }

  .shopify-submit-btn {
    width: 100%;
    justify-content: center;
  }
}

/* --- SHOPIFY FORM ERROR/SUCCESS MSGS --- */
.shopify-msg-success {
  color: #155724;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 24px;
  font-weight: 600;
  font-size: 15px;
}

.shopify-msg-error {
  color: #721c24;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 24px;
  font-weight: 600;
  font-size: 15px;
}

/* One card centering in app grid */
.shopify-apps-grid .shopify-app-card:only-child {
  grid-column: 1 / -1;
  max-width: 600px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* --- BLOG PAGE MVL STYLES --- */
.mvl-blog-hero {
  padding: 80px 0;
  text-align: center;
  color: #fff;
  margin-bottom: 60px;
  background: url(./images/bg_banner.png) center / cover no-repeat;
}

.mvl-blog-hero h1 {
  font-size: 48px;
  font-weight: 800;
  margin: 0;
}

.mvl-latest-posts-section {
  padding-bottom: 100px;
}

.mvl-section-title {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 30px;
  color: #0e2431;
}

.mvl-blog-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  /* Featured gets more space */
  gap: 40px;
}

/* Featured Column */
.mvl-featured-column .mvl-featured-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mvl-feat-img-link {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
}

.mvl-feat-img-link img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s;
}

.mvl-feat-img-link:hover img {
  transform: scale(1.03);
}

.mvl-feat-content h3 {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 15px;
}

.mvl-feat-content h3 a {
  color: #0e2431;
  text-decoration: none;
  transition: color 0.3s;
}

.mvl-feat-content h3 a:hover {
  color: #1e4d3f;
}

.mvl-author-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #555;
  margin-top: 10px;
}

.mvl-author-meta img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.mvl-placeholder-img {
  background: #ccc;
  height: 400px;
  width: 100%;
  border-radius: 12px;
}

/* Side List Column */
.mvl-side-list-column {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.mvl-side-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.mvl-side-img-link {
  width: 140px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
}

.mvl-side-img-link img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  transition: transform 0.3s;
}

.mvl-side-img-link:hover img {
  transform: scale(1.05);
}

.mvl-side-content h4 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 8px;
}

.mvl-side-content h4 a {
  color: #0e2431;
  text-decoration: none;
}

.mvl-side-content h4 a:hover {
  color: #1e4d3f;
}

.mvl-meta-text {
  font-size: 13px;
  color: #888;
}

.mvl-placeholder-img-sm {
  background: #ddd;
  width: 100%;
  height: 90px;
}

/* Responsive */
@media (max-width: 768px) {
  .mvl-blog-grid {
    grid-template-columns: 1fr;
  }

  .mvl-blog-hero h1 {
    font-size: 32px;
  }

  .mvl-side-card {
    flex-direction: row;
    /* Keep side by side on mobile usually better, or stack if too small */
  }
}

/* --- AWARDS SECTION --- */
.mvl-awards-section {
  padding-bottom: 100px;
  background: #fafafa;
  /* Light background as per image */
  padding-top: 60px;
}

.mvl-filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 20px;
}

.mvl-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.mvl-filter-btn {
  background: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  color: #555;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.mvl-filter-btn:hover {
  background: #eee;
  color: #333;
}

.mvl-filter-btn.active {
  background: #0e2431;
  color: #fff;
}

.mvl-search-box {
  position: relative;
  width: 250px;
}

.mvl-search-box input {
  width: 100%;
  padding: 10px 15px 10px 40px;
  border: 1px solid #ddd;
  border-radius: 20px;
  outline: none;
  font-size: 14px;
  background: #fff;
}

.mvl-search-box .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #aaa;
}

/* Awards Grid */
.mvl-awards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.mvl-award-card {
  display: flex;
  flex-direction: column;
}

.mvl-award-img-link {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 15px;
}

.mvl-award-img-link img {
  width: 100%;
  height: 200px;
  /* Fixed height for consistency */
  object-fit: cover;
  display: block;
  border-radius: 12px;
  transition: transform 0.3s;
}

.mvl-award-img-link:hover img {
  transform: scale(1.05);
}

.mvl-award-content h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 8px;
}

.mvl-award-content h3 a {
  color: #0e2431;
  text-decoration: none;
  transition: color 0.3s;
}

.mvl-award-content h3 a:hover {
  color: #1e4d3f;
}

.mvl-placeholder-img-md {
  width: 100%;
  height: 200px;
  background: #e0e0e0;
  border-radius: 12px;
}

/* Responsive */
@media (max-width: 900px) {
  .mvl-awards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .mvl-awards-grid {
    grid-template-columns: 1fr;
  }

  .mvl-filter-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .mvl-search-box {
    width: 100%;
  }
}

/* General Blog Page Fixes */
.mvl-blog-page h1,
.mvl-blog-page h2,
.mvl-blog-page h3,
.mvl-blog-page h4 {
  font-family: inherit;
  /* Inherit form theme */
}

.mvl-blog-hero {
  /* Make background image if needed, for now gradient */
  margin-top: 0;
}

/* Featured Card Fixes */
.mvl-featured-card {
  height: 100%;
}

.mvl-feat-img-link img {
  height: 400px;
  object-fit: cover;
}

/* Filter Bar Fixes */
.mvl-filter-bar {
  border-bottom: 2px solid #eaeaea;
  padding-bottom: 20px;
  margin-bottom: 40px;
}

.mvl-filter-btn {
  font-weight: 600;
}

/* Awards Cards Details */
.mvl-award-card {
  background: transparent;
  border: none;
  box-shadow: none;
}

.mvl-award-card h3 {
  margin-top: 15px;
  font-size: 20px;
  margin-bottom: 10px;
}

.mvl-meta-text {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

/* Pagination Styles */
.mvl-pagination {
  margin-top: 40px;
}

.mvl-page-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #fff;
  color: #333;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.mvl-page-btn:hover {
  border-color: #0e2431;
  color: #0e2431;
  background: #f5f5f5;
}

.mvl-page-btn.active {
  background: #0e2431;
  color: #fff;
  border-color: #0e2431;
}

/* Wide prev/next buttons */
.mvl-page-btn[data-page]:not(.active):not(:hover) {
  /* Standard style */
}

/* Adjust width for prev/next text */
.mvl-page-btn {
  min-width: 40px;
  width: auto;
  padding: 0 15px;
}

/* --- MOBILE RESPONSIVE MVL BLOG --- */
@media screen and (max-width: 768px) {

  /* Hero Section */
  .mvl-blog-hero {
    padding: 60px 0;
    margin-bottom: 40px;
  }

  .mvl-blog-hero h1 {
    font-size: 32px;
    padding: 0 15px;
  }

  /* Latest Posts Grid */
  .mvl-blog-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .mvl-feat-img-link img {
    height: auto;
    /* Allow auto height on mobile */
    max-height: 300px;
  }

  .mvl-feat-content h3 {
    font-size: 22px;
  }

  .mvl-side-card {
    align-items: center;
    /* Vertically align */
  }

  .mvl-side-img-link {
    width: 100px;
    /* Smaller thumbnail */
  }

  .mvl-side-img-link img {
    height: 70px;
  }

  .mvl-side-content h4 {
    font-size: 15px;
  }
}

@media screen and (max-width: 600px) {

  /* Filter Bar */
  .mvl-box-filter {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
  }

  .mvl-filters {
    width: 100%;
    overflow-x: auto;
    /* Horizontal scroll for filters */
    white-space: nowrap;
    padding-bottom: 10px;
    /* Space for scrollbar */
    justify-content: flex-start;
  }

  .mvl-filter-btn {
    flex-shrink: 0;
  }

  .mvl-search-box {
    width: 100%;
  }

  /* Awards Grid */
  .mvl-awards-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .mvl-award-img-link img {
    height: auto;
    /* Aspect ratio */
    aspect-ratio: 16 / 9;
  }

  .mvl-award-content h3 {
    font-size: 18px;
  }

  /* Pagination */
  .mvl-pagination {
    gap: 5px;
    flex-wrap: wrap;
  }

  .mvl-page-btn {
    min-width: 36px;
    height: 36px;
    font-size: 13px;
    padding: 0 10px;
  }
}

/* --- SINGLE POST PAGE STYLES --- */

.mvl-single-content-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 80px;
}

.mvl-single-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 60px;
  align-items: start;
}

/* TOC Box */
.mvl-toc-box {
  border: 1px solid #ddd;
  padding: 30px;
  border-radius: 8px;
  margin-bottom: 40px;
}

.mvl-toc-box h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #111;
}

.mvl-toc-box ul {
  list-style: disc;
  /* Bullet points as seen in image */
  padding-left: 20px;
  margin: 0;
}

.mvl-toc-box ul li {
  margin-bottom: 10px;
  color: #333;
  font-size: 16px;
  line-height: 1.5;
}

/* Article Content */
.mvl-article-content {
  font-size: 18px;
  line-height: 1.8;
  color: #333;
}

.mvl-article-content p {
  margin-bottom: 24px;
}

.mvl-article-content h2,
.mvl-article-content h3 {
  color: #111;
  font-weight: 800;
  margin-top: 40px;
  margin-bottom: 20px;
}

.mvl-article-content a {
  color: #2e66ff;
  text-decoration: underline;
}

/* Sidebar */
.mvl-single-sidebar {
  position: sticky;
  top: 40px;
}

.mvl-sidebar-widget {
  background: #fafafa;
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 30px;
}

.mvl-sidebar-widget h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #111;
}

/* Search Widget */
.mvl-search-form {
  position: relative;
}

.mvl-search-form .search-field {
  width: 100%;
  padding: 12px 20px;
  padding-right: 45px;
  border: 1px solid #ddd;
  border-radius: 25px;
  outline: none;
  font-size: 15px;
}

.mvl-search-form .search-submit {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #333;
  padding: 0;
  display: flex;
  align-items: center;
}

/* Recent Posts Widget */
.mvl-recent-item {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  align-items: flex-start;
}

.mvl-recent-thumb {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #ddd;
}

.mvl-recent-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mvl-recent-info h4 {
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 5px;
  font-weight: 600;
}

.mvl-recent-info h4 a {
  color: #333;
  text-decoration: none;
}

.mvl-recent-info h4 a:hover {
  color: #2e66ff;
}

.mvl-recent-date {
  font-size: 13px;
  color: #777;
  font-weight: 400;
}

.mvl-placeholder-thumb {
  width: 100%;
  height: 100%;
  background: #ccc;
}

/* Responsive Single Post */
@media (max-width: 900px) {
  .mvl-single-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .mvl-single-sidebar {
    position: static;
  }
}

/* Share Section */
.mvl-share-section {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
  padding-top: 20px;
}

.mvl-share-label {
  font-weight: 700;
  font-size: 16px;
  color: #111;
}

.mvl-share-icons {
  display: flex;
  gap: 15px;
}

.mvl-share-icon {
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
}

.mvl-share-icon:hover {
  opacity: 0.7;
}

/* Post Navigation */
.mvl-post-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
  gap: 40px;
}

.mvl-nav-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}

.mvl-nav-prev {
  align-items: flex-start;
  text-align: left;
}

.mvl-nav-next {
  align-items: flex-end;
  text-align: right;
}

.mvl-nav-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}

.mvl-nav-title a {
  color: #111;
  text-decoration: none;
  transition: color 0.3s;
}

.mvl-nav-title a:hover {
  color: #2e66ff;
}

.mvl-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 25px;
  border: 1px solid #eaeaea;
  border-radius: 50px;
  color: #111;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.3s;
}

.mvl-nav-btn:hover {
  border-color: #111;
  background: #f9f9f9;
}

/* Responsive Navigation */
@media (max-width: 768px) {
  .mvl-post-navigation {
    flex-direction: column;
    gap: 40px;
  }

  .mvl-nav-next {
    align-items: flex-start;
    text-align: left;
  }
}

/* Article Detail Headings */
.mvl-article-content h1 {
  font-size: 28px;
  margin-top: 40px;
  margin-bottom: 20px;
}

.mvl-article-content h2 {
  font-size: 24px;
  margin-top: 35px;
  margin-bottom: 18px;
}

.mvl-article-content h3 {
  font-size: 20px;
  margin-top: 30px;
  margin-bottom: 15px;
}

.mvl-article-content h4 {
  font-size: 18px;
  margin-top: 25px;
  margin-bottom: 12px;
}

.mvl-article-content h5 {
  font-size: 16px;
  margin-top: 20px;
  margin-bottom: 10px;
}

/* --- RESPONSIVE SINGLE POST MVL --- */
@media screen and (max-width: 992px) {
  .mvl-single-grid {
    grid-template-columns: 1fr;
    /* Stack sidebar below content */
    gap: 60px;
  }

  .mvl-single-content-container {
    padding-bottom: 60px;
  }
}

@media screen and (max-width: 768px) {
  .mvl-toc-box {
    padding: 20px;
  }

  .mvl-share-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .mvl-post-navigation {
    flex-direction: column;
    gap: 40px;
  }

  .mvl-nav-box {
    width: 100%;
    gap: 15px;
  }

  .mvl-nav-next {
    text-align: left;
    align-items: flex-start;
    padding-top: 40px;
    border-top: 1px solid #eee;
    /* Visual separator */
  }

  .mvl-nav-title {
    font-size: 20px;
  }
}

/* --- HOME PAGE MOBILE RESPONSIVE (ADDED) --- */
@media (max-width: 768px) {

  /* Hide Swiper Nav */
  .swiper-nav-center {
    display: none !important;
  }

  /* Hero */
  .hero {
    padding-top: 60px;
  }

  .hero-content h1 {
    font-size: 32px;
    line-height: 1.2;
  }

  .hero-content p {
    font-size: 16px;
    padding: 0 10px;
  }

  .hero-images {
    margin-top: 30px;
  }

  /* Trust Convert */
  .trust-convert {
    padding: 50px 0;
  }

  .trust-header {
    flex-direction: column;
    gap: 30px;
  }

  .trust-content h2 {
    font-size: 30px;
  }

  .active-users {
    text-align: left;
  }

  .active-users strong {
    font-size: 48px;
  }

  /* Trusted By */
  .trusted-by {
    padding: 40px 0;
  }

  .brand-slider {
    padding-bottom: 0px;
  }

  /* Our Platforms (Home) */
  .our-platforms {
    padding: 50px 0;
  }

  .platforms-header h2 {
    font-size: 30px;
  }

  .platforms-grid {
    gap: 20px;
  }

  /* Ensure cards stack nicely */
  .platform-card.card-large {
    padding: 30px 20px 0;
  }

  .platform-card.card-small {
    padding: 30px 20px 0;
  }

  /* Supercharge */
  .supercharge {
    padding: 50px 0;
  }

  .supercharge-header h2 {
    font-size: 30px;
  }

  .feature-row {
    gap: 40px;
    margin-bottom: 60px;
  }

  .feature-content h3 {
    font-size: 24px;
  }

  /* Merchant Reviews */
  .merchant-reviews {
    padding: 50px 0;
  }

  .reviews-header {
    align-items: flex-start;
  }

  .reviews-header h2 {
    font-size: 30px;
  }

  .rating-number {
    font-size: 42px;
  }

  .reviews-slider {
    width: 100%;
    padding-bottom: 40px;
    overflow: visible;
  }

  .merchant-reviews .swiper-nav-center {
    display: none !important;
  }

  /* Blog */
  .trustify-blog {
    padding: 50px 0;
  }

  .blog-header h2 {
    font-size: 30px;
  }
}