/*
Theme Name: Brewcoffee Shop
Theme URI: https://anantsites.com/brewcoffee-shop/
Template: eshop-elementor
Author: Anantsites
Author URI: https://anantsites.com
Description: Elevate your online store with Brewcoffee Shop, a sleek and highly customizable WordPress theme designed specifically for eCommerce businesses. Built with seamless integration with the Elementor page builder, this theme offers a user-friendly drag-and-drop interface, allowing you to create stunning, responsive layouts without any coding knowledge. Brewcoffee Shop is packed with advanced features like product quick view, AJAX-powered search, and smooth shopping cart integration, ensuring a top-notch shopping experience for your customers. Perfect for any online retailer, this theme is optimized for speed, SEO, and mobile performance, helping you boost your sales and online presence effortlessly.
Tags: one-column,two-columns,right-sidebar,flexible-header,custom-background,custom-header,custom-menu,editor-style,featured-images,footer-widgets,theme-options,threaded-comments,rtl-language-support,translation-ready,full-width-template,custom-logo,blog,news
Version: 0.2
Tested up to: 6.9
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl.htmlhtml
Text Domain: brewcoffee-shop
*/
.main_nav .esh-el-menu ul {
  flex-wrap: wrap;
}
.main_nav .esh-el-menu ul li a {
  display: block;
  width: 100%;
  font-weight: 500;
  color: #111;
}
.esh-el-title {
  word-break: break-all;
}
.esh-el-title + p {
  word-break: break-all;
}
.esh-el-blog-post {
  overflow: hidden;
}

.full-cover {
  margin-left: calc(50% - 50vw);
  max-width: 100vw;
  width: 100vw;
}

.wp-block-cover.alignfull.full-cover {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.mt0 {
  margin-top: 0 !important;
}

/* ============================================
   TORONTO eLEARNING SERVICES - STYLESHEET
   Primary: #1151d3 | Sharp, Modern, Professional
   ============================================ */

/* === CSS VARIABLES === */
:root {
  --primary: #1151d3;
  --primary-dark: #0d3fa6;
  --primary-light: #3a6fdb;
  --accent: #ff6b35;
  --accent-secondary: #00c9a7;
  --dark: #0a0f1c;
  --dark-secondary: #141b2d;
  --gray-900: #1a2332;
  --gray-800: #2d3748;
  --gray-700: #4a5568;
  --gray-600: #718096;
  --gray-400: #a0aec0;
  --gray-200: #e2e8f0;
  --gray-100: #f7fafc;
  --white: #ffffff;
  --gradient-primary: linear-gradient(
    135deg,
    var(--primary) 0%,
    var(--primary-dark) 100%
  );
  --gradient-dark: linear-gradient(
    180deg,
    var(--dark) 0%,
    var(--dark-secondary) 100%
  );
  --shadow-sm: 0 2px 4px rgba(17, 81, 211, 0.08);
  --shadow-md: 0 4px 16px rgba(17, 81, 211, 0.12);
  --shadow-lg: 0 8px 32px rgba(17, 81, 211, 0.16);
  --shadow-xl: 0 16px 48px rgba(17, 81, 211, 0.2);
  --font-display: "Instrument Sans", "Segoe UI", sans-serif;
  --font-body: "DM Sans", "Segoe UI", sans-serif;
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === GOOGLE FONTS IMPORT === */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Instrument+Sans:wght@400;500;600;700&display=swap");

/* === BASE STYLES === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--gray-800);
  background-color: var(--gray-100);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.esh-el-menu {
  margin-bottom: 0;
}

/* === MAIN SECTION === */

.main-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(17, 81, 211, 0.45) 0%,
    rgba(10, 15, 28, 0.36) 100%
  );
  z-index: 1;
}

.main-block::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    var(--primary-light) 50%,
    var(--accent-secondary) 100%
  );
  z-index: 2;
}

.main-block .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
}

.main-block h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 24px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* === TYPOGRAPHY === */
h2.wp-block-heading {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--dark);
  margin: 64px 0 24px;
  letter-spacing: -0.02em;
  position: relative;
  padding-bottom: 16px;
}

h2.wp-block-heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--gradient-primary);
}

h3.wp-block-heading {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--gray-900);
  margin: 32px 0 16px;
  letter-spacing: -0.01em;
}

/* === LIST GROUP === */
.list-group {
  background: var(--white);
  padding: 10px 20px;
  margin: 32px 0;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.list-group::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--gradient-primary);
}

.list-group li {
  list-style: none;
  padding: 12px 0;
  color: var(--gray-700);
  font-size: 0.95rem;
  position: relative;
  padding-left: 20px;
  border-bottom: 1px solid var(--gray-200);
}

.list-group li:last-child {
  border-bottom: none;
}

.list-group li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--primary);
}

.list-group li strong {
  color: var(--dark);
  font-weight: 600;
}

/* === TABLE STYLES === */
.wp-block-table {
  margin: 30px 0;
}

.wp-block-table table {
  border-collapse: collapse;
  background: var(--white);
  box-shadow: var(--shadow-lg);
  margin-bottom: 0;
}

.wp-block-table thead tr th {
  padding: 0.7rem;
  background: var(--gradient-primary);
}

.wp-block-table thead tr th {
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  border: none;
}

.wp-block-table tbody tr {
  transition: var(--transition-fast);
}

.wp-block-table tbody tr:nth-child(even) {
  background: var(--gray-100);
}

.wp-block-table tbody tr:hover {
  background: rgba(17, 81, 211, 0.06);
}

.wp-block-table tbody td {
  padding: 16px;
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-700);
}

.wp-block-table tbody td strong {
  color: var(--dark);
  font-weight: 600;
}

/* === LEARN BLOCK WRAPPER === */
.learn-block-wrapp {
  margin: 48px 0;
}

/* === LEARN BLOCKS - BASE === */
.learn-block {
  background: var(--white);
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: var(--shadow-md);
  position: relative;
  transition: var(--transition-smooth);
  overflow: hidden;
}

.learn-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--transition-smooth);
}

.learn-block:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

.learn-block:hover::before {
  transform: scaleX(1);
}

.learn-block > p:first-child {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--gray-200);
}

.learn-block .wp-block-group__inner-container > p:first-child {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--gray-200);
}

.learn-block .wp-block-column p strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin-bottom: 12px;
}

.learn-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.learn-block ul li {
  padding: 8px 0 8px 20px;
  color: var(--gray-700);
  font-size: 0.9rem;
  position: relative;
}

.learn-block ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 600;
}

/* === INDIVIDUAL LEARN BLOCKS WITH ACCENT COLORS === */
.learn-block.learn1::before {
  background: #1151d3;
}
.learn-block.learn2::before {
  background: #0d3fa6;
}
.learn-block.learn3::before {
  background: #3a6fdb;
}
.learn-block.learn4::before {
  background: #00c9a7;
}
.learn-block.learn5::before {
  background: #ff6b35;
}
.learn-block.learn6::before {
  background: #1151d3;
}
.learn-block.learn7::before {
  background: #0d3fa6;
}
.learn-block.learn8::before {
  background: #3a6fdb;
}
.learn-block.learn9::before {
  background: #00c9a7;
}
.learn-block.learn10::before {
  background: #ff6b35;
}

.learn-block.learn1:hover::before,
.learn-block.learn2:hover::before,
.learn-block.learn3:hover::before,
.learn-block.learn4:hover::before,
.learn-block.learn5:hover::before,
.learn-block.learn6:hover::before,
.learn-block.learn7:hover::before,
.learn-block.learn8:hover::before,
.learn-block.learn9:hover::before,
.learn-block.learn10:hover::before {
  transform: scaleX(1);
}

/* Learn block number indicators */
.learn-block.learn1::after,
.learn-block.learn2::after,
.learn-block.learn3::after,
.learn-block.learn4::after,
.learn-block.learn5::after,
.learn-block.learn6::after,
.learn-block.learn7::after,
.learn-block.learn8::after,
.learn-block.learn9::after,
.learn-block.learn10::after {
  content: "";
  position: absolute;
  top: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
}

/* === BLOCKQUOTE / NOTES === */
.wp-block-quote {
  background: linear-gradient(
    135deg,
    var(--gray-100) 0%,
    rgba(17, 81, 211, 0.04) 100%
  );
  padding: 24px 28px;
  margin: 24px 0;
  position: relative;
  border: 1px solid var(--gray-200);
}

.wp-block-quote::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--gradient-primary);
}

.wp-block-quote p {
  color: var(--gray-700);
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0;
}

.wp-block-quote p strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin-bottom: 8px;
}

/* === DISCLAIMER BLOCK === */
.disclaimer {
  background: linear-gradient(135deg, #fff8f5 0%, #fff5f0 100%);
  border: 1px solid rgba(255, 107, 53, 0.2);
  padding: 24px 28px;
  margin: 32px 0;
  position: relative;
}

.disclaimer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--accent);
}

.disclaimer p:first-child {
  font-family: var(--font-display);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 8px;
}

.disclaimer p:last-child {
  color: var(--gray-700);
  font-size: 0.9rem;
  line-height: 1.7;
  font-style: italic;
}

/* === FAQ BLOCK === */
.faq-block {
  background: var(--white);
  padding: 20px;
  margin: 30px 0;
  box-shadow: var(--shadow-lg);
  position: relative;
}

.faq-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--primary) 0%,
    var(--accent-secondary) 50%,
    var(--accent) 100%
  );
}

.faq-block h2.wp-block-heading {
  margin-top: 0;
  margin-bottom: 16px;
}

.faq-block h2.wp-block-heading::after {
  display: none;
}

.faq-block > .wp-block-group__inner-container > p {
  color: var(--gray-600);
  margin-bottom: 40px;
  font-size: 1.05rem;
}

/* === FAQ ITEM === */
.faq-item {
  background: var(--gray-100);
  padding: 28px 32px;
  margin: 20px 0;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.faq-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--primary);
  transform: scaleY(0);
  transform-origin: top;
  transition: var(--transition-smooth);
}

.faq-item:hover {
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.faq-item:hover::before {
  transform: scaleY(1);
}

.faq-item h3.wp-block-heading {
  font-size: 1.15rem;
  margin: 0 0 12px;
  color: var(--dark);
  transition: var(--transition-fast);
}

.faq-item:hover h3.wp-block-heading {
  color: var(--primary);
}

.faq-item p {
  color: var(--gray-700);
  font-size: 0.95rem;
  margin: 0;
}

.faq-item ul {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}

.faq-item ul li {
  padding: 8px 0 8px 24px;
  position: relative;
  color: var(--gray-700);
  font-size: 0.9rem;
}

.faq-item ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent-secondary);
  font-weight: 700;
}

/* === IMAGE STYLES === */
.wp-block-image {
  margin: 24px 0;
}

.wp-block-image img {
  max-width: 100%;
  height: auto;
  display: block;
  filter: grayscale(10%);
  transition: var(--transition-smooth);
}

.learn-block:hover .wp-block-image img {
  filter: grayscale(0%);
}

.wp-block-image figure {
  position: relative;
  overflow: hidden;
}

.wp-block-image figure::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--transition-smooth);
}

.learn-block:hover .wp-block-image figure::after {
  transform: scaleX(1);
}

/* === SWEETRUSH DARK COVER BLOCK === */
.sweet-rush {
  position: relative;
  overflow: hidden;
}

.sweet-rush .wp-block-cover__background {
  background: linear-gradient(
    135deg,
    var(--dark) 0%,
    #0f1729 50%,
    var(--primary-dark) 100%
  ) !important;
}

.sweet-rush::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--primary) 0%,
    var(--accent-secondary) 50%,
    var(--accent) 100%
  );
  z-index: 10;
}

.sweet-rush::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    var(--accent-secondary) 50%,
    var(--primary) 100%
  );
  z-index: 10;
}

/* Decorative geometric pattern */
.sweet-rush .wp-block-cover__inner-container::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle,
    rgba(17, 81, 211, 0.15) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.sweet-rush .wp-block-cover__inner-container::after {
  content: "";
  position: absolute;
  bottom: -30%;
  left: -5%;
  width: 300px;
  height: 300px;
  background: radial-gradient(
    circle,
    rgba(0, 201, 167, 0.1) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.sweet-rush .wp-block-cover__inner-container {
  position: relative;
}

.sweet-rush .wp-block-group__inner-container {
  position: relative;
  z-index: 5;
}

/* Title styling */
.sweet-rush .wp-block-group__inner-container > p:first-child {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 32px;
  padding-bottom: 20px;
  position: relative;
  display: inline-block;
}

.sweet-rush .wp-block-group__inner-container > p:first-child::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    var(--accent-secondary) 100%
  );
}

.sweet-rush .wp-block-column {
  background: rgba(255, 255, 255, 0.03);
  padding: 20px;
  position: relative;
  transition: var(--transition-smooth);
}

.sweet-rush .wp-block-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-light) 0%, transparent 100%);
}

.sweet-rush .wp-block-column:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Column headings */
.sweet-rush .wp-block-column > p:first-child {
  margin-bottom: 20px;
}

.sweet-rush .wp-block-column > p:first-child strong {
  font-family: var(--font-display);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent-secondary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sweet-rush .wp-block-column > p:first-child strong::before {
  content: "";
  width: 20px;
  height: 2px;
  background: var(--accent-secondary);
}

/* Lists */
.sweet-rush ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sweet-rush ul li {
  padding: 10px 0 10px 28px;
  color: var(--gray-400);
  font-size: 0.95rem;
  position: relative;
  transition: var(--transition-fast);
}

.sweet-rush ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: transparent;
  border: 2px solid var(--primary-light);
  transition: var(--transition-fast);
}

.sweet-rush ul li:hover {
  color: var(--white);
  padding-left: 32px;
}

.sweet-rush ul li:hover::before {
  background: var(--primary-light);
  border-color: var(--primary-light);
}

/* Blockquote / Notes */
.sweet-rush .wp-block-quote {
  background: rgba(17, 81, 211, 0.1);
  border: 1px solid rgba(17, 81, 211, 0.3);
  padding: 28px 32px;
  margin: 32px 0 0;
  position: relative;
}

.sweet-rush .wp-block-quote::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--primary) 0%,
    var(--primary-light) 50%,
    transparent 100%
  );
}

.sweet-rush .wp-block-quote::after {
  content: '"';
  position: absolute;
  top: 20px;
  right: 28px;
  font-family: Georgia, serif;
  font-size: 4rem;
  color: rgba(17, 81, 211, 0.2);
  line-height: 1;
}

.sweet-rush .wp-block-quote p {
  color: var(--gray-300);
  margin: 0;
}

.sweet-rush .wp-block-quote p:first-child strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--primary-light);
  margin-bottom: 10px;
}

.sweet-rush .wp-block-quote p:last-child {
  font-size: 1rem;
  line-height: 1.7;
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
  .learn-block-wrapp {
    flex-direction: column;
  }

  .faq-block {
    padding: 32px;
  }
}

@media (max-width: 768px) {
  .esh-el-container {
    padding: 0 16px;
  }

  .main-block h1 {
    font-size: 1.75rem;
  }

  .faq-item {
    padding: 20px;
  }

  .wp-block-table {
    font-size: 0.8rem;
  }

  .wp-block-table thead tr th,
  .wp-block-table tbody td {
    padding: 12px 8px;
  }
}

/* === UTILITY ANIMATIONS === */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.learn-block,
.faq-item,
.list-group {
  animation: fadeInUp 0.6s ease-out forwards;
}

.learn-block:nth-child(2) {
  animation-delay: 0.1s;
}
.learn-block:nth-child(3) {
  animation-delay: 0.2s;
}
.learn-block:nth-child(4) {
  animation-delay: 0.3s;
}

/* === PRINT STYLES === */
@media print {
  .main-block::before,
  .main-block::after,
  .learn-block::before,
  .faq-item::before {
    display: none;
  }

  .learn-block,
  .faq-block,
  .list-group {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}

/* ============================================
   METHOD BLOCKS - ILLUSTRATOR ARROWS PAGE
   Harmonized with main eLearning styles
   ============================================ */

/* === METHOD BLOCKS - BASE === */
.method {
  background: var(--white);
  padding: 20px;
  margin: 32px 0;
  box-shadow: var(--shadow-md);
  position: relative;
  transition: var(--transition-smooth);
  overflow: hidden;
  counter-increment: method-counter;
}

.method::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--transition-smooth);
}

.method::after {
  content: counter(method-counter, decimal-leading-zero);
  position: absolute;
  top: 32px;
  right: 40px;
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 700;
  color: rgba(17, 81, 211, 0.08);
  line-height: 1;
  pointer-events: none;
  transition: var(--transition-smooth);
}

.method:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

.method:hover::before {
  transform: scaleX(1);
}

.method:hover::after {
  color: rgba(17, 81, 211, 0.15);
}

/* Reset counter at parent level */
.main-section,
.page-section,
main {
  counter-reset: method-counter;
}

/* === METHOD HEADINGS === */
.method h2.wp-block-heading {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 20px;
  padding: 0 0 16px;
  position: relative;
  line-height: 1.4;
  padding-right: 80px;
}

.method h2.wp-block-heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--gradient-primary);
  transition: var(--transition-smooth);
}

.method:hover h2.wp-block-heading::after {
  width: 120px;
}

/* === METHOD INTRO PARAGRAPH === */
.method .wp-block-group__inner-container > p:first-of-type {
  color: var(--gray-600);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--gray-200);
}

.method .wp-block-group__inner-container > p:first-of-type strong {
  color: var(--primary);
  font-weight: 600;
}

/* === METHOD ORDERED LISTS === */
.num-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  counter-reset: step-counter;
}

.num-list li {
  position: relative;
  padding: 16px 0 16px 64px;
  color: var(--gray-700);
  font-size: 0.95rem;
  line-height: 1.7;
  border-bottom: 1px solid var(--gray-100);
  counter-increment: step-counter;
  transition: var(--transition-fast);
}

.num-list li:last-child {
  border-bottom: none;
}

.num-list li::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primary);
  transition: var(--transition-smooth);
}

.num-list li:hover {
  background: linear-gradient(
    90deg,
    rgba(17, 81, 211, 0.02) 0%,
    transparent 100%
  );
  padding-left: 72px;
}

.num-list li:hover::before {
  background: var(--gradient-primary);
  color: var(--white);
}

.num-list li strong {
  color: var(--dark);
  font-weight: 600;
}

.num-list li:hover::before {
  background: linear-gradient(135deg, #1151d3 0%, #0d3fa6 100%);
}

/* === METHOD CLOSING PARAGRAPHS === */
.method .wp-block-group__inner-container > p:last-of-type:not(:first-of-type) {
  color: var(--gray-600);
  font-size: 0.9rem;
  line-height: 1.7;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--gray-200);
  font-style: italic;
}

/* === INDIVIDUAL METHOD ACCENT COLORS === */
.method.method1::before {
  background: #1151d3;
}
.method.method2::before {
  background: #0d3fa6;
}
.method.method3::before {
  background: #00c9a7;
}
.method.method4::before {
  background: #3a6fdb;
}
.method.method5::before {
  background: #ff6b35;
}

.method.method1:hover::before,
.method.method2:hover::before,
.method.method3:hover::before,
.method.method4:hover::before,
.method.method5:hover::before {
  transform: scaleX(1);
}

/* Step number accent colors per method */
.method.method1 ol.wp-block-list li:hover::before {
  background: linear-gradient(135deg, #1151d3 0%, #0d3fa6 100%);
}
.method.method2 ol.wp-block-list li:hover::before {
  background: linear-gradient(135deg, #0d3fa6 0%, #1151d3 100%);
}
.method.method3 ol.wp-block-list li:hover::before {
  background: linear-gradient(135deg, #00c9a7 0%, #00a88a 100%);
}
.method.method4 ol.wp-block-list li:hover::before {
  background: linear-gradient(135deg, #3a6fdb 0%, #1151d3 100%);
}
.method.method5 ol.wp-block-list li:hover::before {
  background: linear-gradient(135deg, #ff6b35 0%, #e55a2b 100%);
}

/* Heading underline colors per method */
.method.method1 h2.wp-block-heading::after {
  background: linear-gradient(90deg, #1151d3 0%, #3a6fdb 100%);
}
.method.method2 h2.wp-block-heading::after {
  background: linear-gradient(90deg, #0d3fa6 0%, #1151d3 100%);
}
.method.method3 h2.wp-block-heading::after {
  background: linear-gradient(90deg, #00c9a7 0%, #00a88a 100%);
}
.method.method4 h2.wp-block-heading::after {
  background: linear-gradient(90deg, #3a6fdb 0%, #1151d3 100%);
}
.method.method5 h2.wp-block-heading::after {
  background: linear-gradient(90deg, #ff6b35 0%, #e55a2b 100%);
}

/* === FIRST METHOD SPECIAL STYLING === */
.method.method1 {
  background: linear-gradient(
    135deg,
    var(--white) 0%,
    rgba(17, 81, 211, 0.02) 100%
  );
}

/* === LAST METHOD SPECIAL STYLING === */
.method.method5 .wp-block-group__inner-container > p:last-of-type {
  background: linear-gradient(
    135deg,
    rgba(255, 107, 53, 0.04) 0%,
    transparent 100%
  );
  padding: 20px 24px;
  margin-top: 20px;
  border-top: none;
  font-style: normal;
  font-size: 0.95rem;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .method {
    margin: 24px 0;
  }

  .method::after {
    font-size: 3rem;
    top: 24px;
    right: 24px;
  }

  .method h2.wp-block-heading {
    font-size: 1.2rem;
    padding-right: 50px;
  }

  .method ol.wp-block-list li {
    padding: 14px 0 14px 52px;
  }

  .method ol.wp-block-list li::before {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
  }

  .method ol.wp-block-list li:hover {
    padding-left: 56px;
  }
}

@media (max-width: 480px) {
  .method::after {
    display: none;
  }

  .method h2.wp-block-heading {
    padding-right: 0;
  }
}

/* === ANIMATION === */
@keyframes methodFadeIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.method {
  animation: methodFadeIn 0.5s ease-out forwards;
}

.method.method1 {
  animation-delay: 0.05s;
}
.method.method2 {
  animation-delay: 0.1s;
}
.method.method3 {
  animation-delay: 0.15s;
}
.method.method4 {
  animation-delay: 0.2s;
}
.method.method5 {
  animation-delay: 0.25s;
}


/* ============================================
   BURGER MENU - MOBILE NAVIGATION
   Breakpoint: 768px
   ============================================ */

/* === DESKTOP MENU === */
.esh-el-header-menu {
    display: flex;
    align-items: center;
}

.main_nav {
    display: block;
}

.main_nav .esh-el-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main_nav .esh-el-menu .menu-item {
    position: relative;
}

.main_nav .esh-el-menu .menu-item a {
    display: block;
    padding: 12px 18px;
    font-family: 'DM Sans', 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #2d3748;
    text-decoration: none;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.main_nav .esh-el-menu .menu-item a::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 18px;
    right: 18px;
    height: 2px;
    background: linear-gradient(90deg, #1151d3 0%, #00c9a7 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.main_nav .esh-el-menu .menu-item a:hover {
    color: #1151d3;
}

.main_nav .esh-el-menu .menu-item a:hover::after {
    transform: scaleX(1);
}

.main_nav .esh-el-menu .current-menu-item a,
.main_nav .esh-el-menu .current_page_item a {
    color: #1151d3;
    font-weight: 600;
}

.main_nav .esh-el-menu .current-menu-item a::after,
.main_nav .esh-el-menu .current_page_item a::after {
    transform: scaleX(1);
    background: #1151d3;
}

/* === MOBILE STYLES (768px) === */
@media (max-width: 768px) {
    
    .esh-el-header-menu {
        position: relative;
    }

    .main_nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 320px;
        height: 100vh;
        background: #ffffff;
        box-shadow: -8px 0 32px rgba(17, 81, 211, 0.15);
        z-index: 1000;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
    }

    .main_nav.active {
        right: 0;
    }

    .main_nav .menu-menu-1-container {
        padding: 80px 0 40px;
    }

    .main_nav .esh-el-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .main_nav .esh-el-menu .menu-item {
        border-bottom: 1px solid #e2e8f0;
        opacity: 0;
        transform: translateX(20px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .main_nav.active .esh-el-menu .menu-item {
        opacity: 1;
        transform: translateX(0);
    }

    .main_nav.active .esh-el-menu .menu-item:nth-child(1) { transition-delay: 0.1s; }
    .main_nav.active .esh-el-menu .menu-item:nth-child(2) { transition-delay: 0.15s; }
    .main_nav.active .esh-el-menu .menu-item:nth-child(3) { transition-delay: 0.2s; }
    .main_nav.active .esh-el-menu .menu-item:nth-child(4) { transition-delay: 0.25s; }
    .main_nav.active .esh-el-menu .menu-item:nth-child(5) { transition-delay: 0.3s; }
    .main_nav.active .esh-el-menu .menu-item:nth-child(6) { transition-delay: 0.35s; }

    .main_nav .esh-el-menu .menu-item:first-child {
        border-top: 1px solid #e2e8f0;
    }

    .main_nav .esh-el-menu .menu-item a {
        padding: 18px 28px;
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .main_nav .esh-el-menu .menu-item a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 3px;
        height: 100%;
        background: linear-gradient(180deg, #1151d3 0%, #00c9a7 100%);
        transform: scaleY(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .main_nav .esh-el-menu .menu-item a::after {
        position: static;
        width: 6px;
        height: 6px;
        background: transparent;
        border-right: 2px solid #a0aec0;
        border-bottom: 2px solid #a0aec0;
        transform: rotate(-45deg);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        flex-shrink: 0;
        margin-left: 12px;
    }

    .main_nav .esh-el-menu .menu-item a:hover::before,
    .main_nav .esh-el-menu .current-menu-item a::before,
    .main_nav .esh-el-menu .current_page_item a::before {
        transform: scaleY(1);
    }

    .main_nav .esh-el-menu .menu-item a:hover::after {
        border-color: #1151d3;
        transform: rotate(-45deg) translateX(3px);
    }

    .main_nav .esh-el-menu .current-menu-item a,
    .main_nav .esh-el-menu .current_page_item a {
        background: linear-gradient(90deg, rgba(17, 81, 211, 0.06) 0%, transparent 100%);
    }

    .main_nav .esh-el-menu .current-menu-item a::after,
    .main_nav .esh-el-menu .current_page_item a::after {
        border-color: #1151d3;
    }

    .main_nav::before {
        content: 'Menu';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        padding: 24px 28px;
        font-family: 'Instrument Sans', 'Segoe UI', sans-serif;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        color: #1151d3;
        background: linear-gradient(180deg, #f7fafc 0%, #ffffff 100%);
        border-bottom: 1px solid #e2e8f0;
    }

    .main_nav::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #1151d3 0%, #00c9a7 50%, #ff6b35 100%);
    }
}