@import url(../main.css);


  /*======== navbar ======== */
  .navbar-gradient {
      padding: 3px;
      margin: 0 auto;
      padding-left: 30px;
      padding-right: 30px;
 
  }

.main-navbar {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10020;
}

.main-navbar.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10020; 
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 
}

  .dropdown {
      opacity: 0;
      visibility: hidden;
      top: 100%;
      transform: translateY(10px);
      transition: all 0.3s ease;
  }

  .nav-item:hover .dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
  }

  .nav-item.dropdown-open .dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
  }

  .megamenu {
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: all 0.3s ease;
  }

  .nav-item:hover .megamenu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
  }

  .mega-menu-panel {
      box-sizing: border-box;
      position: fixed;
      left: 0;
      z-index: 10030 !important;
      width: 100vw;
      max-width: 100vw;
      max-height: min(78vh, 760px);
      overflow: auto;
      overscroll-behavior: contain;
      border-radius: 0 0 14px 14px;
      margin-top: 0;
      border-top: 1px solid #e6dbfb;
      background: #ffffff;
  }

  .mega-menu-panel.is-open {
      opacity: 1;
      visibility: visible;
  }

  .mega-menu-cats {
      position: sticky;
      top: 0;
      background: transparent;
      border: 0;
      border-right: 1px solid #b88cff;
      border-radius: 0;
      padding: 0 1.25rem 0 0;
      z-index: 2;
      box-shadow: none;
  }

  .mega-menu-cats ul {
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
  }

  .mega-menu-cats .category-btn {
      display: flex;
      align-items: center;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      background: transparent;
      border: 0;
      color: #6f42c1 !important;
      font-weight: 600;
      border-radius: 12px;
      padding: 12px 14px;
      transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
      font-size: 15px;
      line-height: 1.35;
  }

  .mega-menu-panel {
      font-size: 15px;
  }

  #mega-products .category-products p {
      font-size: 14px;
      line-height: 1.4;
  }

  .mega-menu-cats .category-btn i {
      color: #6f42c1;
  }

  .mega-menu-cats .category-btn:hover {
      background: #6f42c1 !important;
      border-color: transparent;
      color: #ffffff !important;
      box-shadow: 0 10px 22px rgba(111, 66, 193, 0.18);
      transform: none;
  }

  .mega-menu-cats .category-btn:focus-visible {
      outline: 3px solid rgba(111, 66, 193, 0.35);
      outline-offset: 2px;
  }

  .mega-menu-cats .category-btn:hover i {
      color: #ffffff;
  }

  @media (max-width: 1280px) {
    .mega-menu-panel {
      width: 100vw;
      max-width: 100vw;
      max-height: min(80vh, 720px);
      padding: 1rem;
    }
  }

  @media (max-width: 1120px) {
    .mega-menu-grid {
      gap: 0.9rem;
    }
    .mega-menu-cats ul {
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
    }
    .mega-menu-cats {
      position: static;
      background: transparent;
      border: 0;
      border-radius: 0;
      padding: 0;
    }
    #mega-products .category-products {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 0.9rem;
    }
  }

  @media (max-width: 1040px) {
    #mega-products .category-products {
      grid-template-columns: minmax(0, 1fr) !important;
    }
  }

  @media (min-width: 900px) and (max-width: 1180px) {
    .mega-menu-panel {
      padding: 0.85rem;
      max-height: calc(100vh - 84px);
      font-size: 14px;
    }

    .mega-menu-grid {
      align-items: stretch;
      gap: 0.8rem;
    }

    .mega-menu-cats {
      width: 220px !important;
      padding-right: 0.8rem;
      border-right: 0;
      position: relative;
    }

    .mega-menu-cats::after {
      content: '';
      position: absolute;
      top: 1rem;
      right: -0.05rem;
      bottom: 1rem;
      width: 1px;
      background: #c084fc;
    }

    .mega-menu-cats .category-btn {
      font-size: 13px;
      line-height: 1.25;
      padding: 10px 12px;
    }

    #mega-products .category-products {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 0.8rem;
    }

    #mega-products .category-products[data-category="cat-1"],
    #mega-products .category-products[data-category="cat-3"] {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    #ourSolutionsMega .category-products > * {
      padding-top: 1rem !important;
      padding-bottom: 1rem !important;
      border-radius: 0.85rem;
    }

    #ourSolutionsMega .category-products img {
      max-height: 88px !important;
      width: auto;
      object-fit: contain;
      margin-bottom: 0.4rem !important;
    }

    #mega-products .category-products p {
      font-size: 12.5px;
      line-height: 1.3;
    }
  }

  .mobile-menu {
      transform: translateX(100%);
      transition: transform 0.3s ease;
  }

  .mobile-menu.active {
      transform: translateX(0);
  }

  .mobile-dropdown {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
  }

  .mobile-dropdown.active {
      max-height: 1000px;
  }

  /* Smooth accordion for inline mobile categories */
  .mobile-category-products {
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition: height 320ms ease, opacity 280ms ease;
  }
  .mobile-category-products.open {
    opacity: 1;
  }

  .chev {
    transition: transform 280ms ease;
  }
  .chev.rotate-180 {
    transform: rotate(180deg);
  }

  .product-card:hover {
      transform: scale(1.02);
  }

  .theme-toggle {
      transition: all 0.3s ease;
  }

  .theme-toggle:hover {
      transform: rotate(30deg);
  }

  .hamburger span {
      transition: all 0.3s ease;
  }

  .hamburger.active span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
  }

  .hamburger.active span:nth-child(2) {
      opacity: 0;
  }

  .hamburger.active span:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -6px);
  }
  
  .nav-link {
      position: relative;
  }

  .nav-link::after {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      bottom: -2px;
      left: 0;
      background-color: #6f41c1;
      transition: width 0.3s ease;
  }

  .nav-link:hover::after {
      width: 100%;
  }

  @media (max-width: 1023px) {
      .desktop-nav {
          display: none;
      }

      .mobile-nav {
          display: flex;
      }
  }

  @media (min-width: 1024px) {
      .desktop-nav {
          display: flex;
      }

      .mobile-nav {
          display: none;
      }
  }

  @media (min-width: 1024px) and (max-width: 1180px) {
      #desktop-nav .container {
          padding-left: 1rem;
          padding-right: 1rem;
          padding-top: 0.85rem;
          padding-bottom: 0.85rem;
      }

      #desktop-nav .container > div {
          gap: 0.75rem;
      }

      #desktop-nav .learnlike_logo {
          width: 8.75rem;
      }

      #desktop-nav .desktop-nav {
          min-width: 0;
          flex: 1 1 auto;
          justify-content: flex-end;
      }

      #desktop-nav .desktop-nav > ul {
          flex-wrap: nowrap;
      }

      #desktop-nav .desktop-nav > ul > :not([hidden]) ~ :not([hidden]) {
          margin-left: 0.7rem !important;
      }

      #desktop-nav .nav-item {
          padding-top: 0.75rem;
          padding-bottom: 0.75rem;
      }

      #desktop-nav .nav-link,
      #desktop-nav .nav-item > button {
          display: inline-flex;
          align-items: center;
          white-space: nowrap;
          font-size: 0.92rem;
          line-height: 1.1;
          padding: 0.45rem 0.5rem;
      }

      #desktop-nav .dropdown {
          margin-top: 0.65rem;
      }
  }

  /*======= navbar end===== */

  /* footer */
  .footer-item h4{
    font-weight: 900;
  }
   .footer-item li a:hover{
    color: var(--primary);
   }
   .footer-social-media-icons a {
    display: flex;
    width: 20px;
    height: 20px;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
    padding: 14px;
    transition: 0.3s;
   }
      .footer-social-media-icons a:hover{
        transform: scale(1.04);
           box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
      }
      
  /* Custom max width helpers */
  .max-w-1200px {
    max-width: 1400px;
    width: 100%;
  }
  .max-w-1000px {
    max-width: 1000px;
    width: 100%;
  }

  /* Vertical sliding card tracks (two columns) */
  .hero-landing{ min-height: 90vh; display: flex; background: linear-gradient(90deg, #fbf7ff 0%, #f3eaff 100%); }
  .hero-landing h1{ letter-spacing: -0.02em; line-height: 1.02; }
  .hero-landing{ min-height: 100vh; display:flex; align-items:center; padding-top:4.5rem; padding-bottom:4.5rem; background: linear-gradient(90deg,#f8f5ff 0%,#efe6ff 25%,#f2e8ff 50%,#efe6ff 75%,#f8f5ff 100%); background-size:200% 200%; animation:bgShift 12s linear infinite; }
  @keyframes bgShift{ 0%{ background-position:0% 50% } 50%{ background-position:100% 50% } 100%{ background-position:0% 50% } }

  .hero-landing p{ color: #5b4b7a; }

  /* Left column refinements */
  .hero-left{ padding-right: 1.5rem; }
  .hero-top .tag{ background: linear-gradient(90deg,#fff,#f7f4ff); padding:.35rem .65rem; border-radius:999px; font-weight:700; color:#5b2aa6; box-shadow:0 6px 18px rgba(99,71,180,0.06); font-size:.85rem }
  .hero-left h1{ font-family: 'Poppins','Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; font-weight:800; color:#3b1566; text-wrap:balance; text-shadow:0 1px 0 rgba(255,255,255,0.02); font-size:2.4rem }
  .gradient-text{ background: linear-gradient(90deg,#6d28d9,#a78bfa); -webkit-background-clip:text; background-clip:text; color:transparent }
  .hero-left .hero-lead{ font-size:1.06rem; line-height:1.72; color:#5c4e78; max-width:48ch; margin-top:1rem; }

  .hero-benefits li{ color:#4b2e84; }
  .hero-benefits i{ color:#7c3aed; font-size:1.05rem }

  .cta-secondary{ border:2px solid rgba(107,70,193,0.15); padding:.6rem .9rem; border-radius:999px; color:#6d28d9; font-weight:700; transition:all .18s ease }
  .cta-secondary:hover{ background:rgba(109,40,217,0.06); transform:translateY(-3px); border-color:rgba(109,40,217,0.28) }

  /* entrance animations */
  .hero-left h1{ animation: slideUpFade .7s cubic-bezier(.22,.9,.32,1) both }
  .hero-left .hero-lead{ animation: fadeIn .8s ease .08s both }
  .hero-benefits li{ animation: fadeIn .9s ease .12s both }
  .cta-primary{ animation: popIn .9s ease .18s both }

  @keyframes slideUpFade{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:translateY(0) } }
  @keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }
  @keyframes popIn{ from{ opacity:0; transform:translateY(6px) scale(.98) } to{ opacity:1; transform:translateY(0) scale(1) } }

  @media (max-width: 1023px){
    .hero-left{ padding-right: 0; }
    .hero-left h1{ font-size: 2.2rem; }
    .hero-left .hero-lead{ max-width: 100%; }
  }

  /* CTA: animated sheen + pulse + arrow micro-interaction */
  .cta-primary{ position:relative; overflow:hidden; background:linear-gradient(90deg,#6d28d9 0%,#8b5cf6 100%); color:#fff; padding:.8rem 1.25rem; border-radius:999px; box-shadow:0 10px 30px rgba(107,70,193,0.18); font-weight:700; display:inline-flex; align-items:center; gap:.5rem; transition:transform .18s ease; animation:pulse 3.5s ease-in-out infinite; }
  .cta-primary::before{ content:''; position:absolute; top:-30%; left:-40%; width:60%; height:160%; background:linear-gradient(120deg,rgba(255,255,255,0.06),rgba(255,255,255,0.14),rgba(255,255,255,0.06)); transform:rotate(20deg); transition:transform .9s ease; }
  .cta-primary:hover::before{ transform:translateX(260%) rotate(20deg); }
  .cta-primary:hover{ transform:translateY(-3px); animation-play-state:paused; box-shadow:0 18px 40px rgba(99,71,180,0.2); }
  .cta-primary svg{ transition:transform .25s ease; }
  .cta-primary:hover svg{ transform:translateX(6px); }
  @keyframes pulse{ 0%{ box-shadow:0 8px 20px rgba(107,70,193,0.12) } 50%{ box-shadow:0 18px 40px rgba(107,70,193,0.22) } 100%{ box-shadow:0 8px 20px rgba(107,70,193,0.12) } }

  /* Accessibility: respect reduced motion */
  @media (prefers-reduced-motion: reduce){ .hero-landing, .cta-primary{ animation:none !important } .cta-primary::before{ transition:none } }

  @media (max-width: 1023px){
    .hero-left{ padding-right: 0; }
    .hero-left h1{ font-size: 2.2rem; }
    .hero-left .hero-lead{ max-width: 100%; }
  }

  /* Decorative book bounce animation */
  .decor-bounce{ pointer-events:none; animation: decorBounce 4s cubic-bezier(.22,.9,.32,1) infinite; transform-origin: center bottom; will-change: transform; }
  @keyframes decorBounce{
    0%{ transform: translateY(0) rotate(-2deg); }
    20%{ transform: translateY(-12px) rotate(0deg); }
    40%{ transform: translateY(0) rotate(2deg); }
    60%{ transform: translateY(-8px) rotate(0deg); }
    80%{ transform: translateY(0) rotate(-1deg); }
    100%{ transform: translateY(0) rotate(-2deg); }
  }
  /* On smaller screens, remove animation to avoid layout issues */
  @media (max-width: 1023px){ .decor-bounce{ animation:none; transform:none; opacity:.8 } }
  /* Respect prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce){ .decor-bounce{ animation:none !important; transform:none !important; } }

  /* Decorative spinner (360°) */
  .decor-spin{ pointer-events:none; animation: spin360 8s linear infinite; transform-origin: center center; will-change: transform; opacity:0.9; }
  @keyframes spin360{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
  /* Disable on small screens to avoid visual clutter */
  @media (max-width: 1023px){ .decor-spin{ animation:none; transform:none; opacity:.6 } }
  /* Respect reduced motion preference */
  @media (prefers-reduced-motion: reduce){ .decor-spin{ animation:none !important; transform:none !important; } }

  /* Continuous vertical scroll tracks (no delay, linear, seamless) */
  .card-wrapper{ position: relative; overflow: hidden; height: min(62vh, 720px); }

  .card-track-up, .card-track-down{ display: flex; flex-direction: column; gap: 1rem; will-change: transform; }
  /* linear, continuous scroll; reverse direction on the second column */
  .card-track-up{ animation: scroll 12s linear infinite; }
  .card-track-down{ animation: scroll 12s linear infinite reverse; }
  /* pause on hover for better UX */
  .card-track-up:hover, .card-track-down:hover{ animation-play-state: paused; }

  .card-item{ min-height: 72px; border-radius: 12px; transition: transform .28s ease, box-shadow .28s ease; }
  .card-item:hover{ transform: translateY(-6px); box-shadow: 0 14px 36px rgba(99, 71, 180, 0.12); }

  /* Image-only card styles */
  .card-image-wrap{ position: relative; border-radius: 12px; overflow: hidden; height: 320px; background: linear-gradient(180deg, rgba(99,102,241,0.03), rgba(139,92,246,0.02)); box-shadow: 0 8px 24px rgba(79,35,129,0.06); transition: box-shadow .3s ease; }
  .card-image{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease, filter .35s ease; }

  /* purple tint overlay that intensifies on hover */
  .card-image-wrap::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(99,102,241,0.12), rgba(139,92,246,0.08)); mix-blend-mode: multiply; opacity: 0.6; transition: opacity .35s ease, transform .45s ease; pointer-events: none; }
  .card-image-wrap:hover::after{ opacity: 0.95; transform: scale(1.02); }

  /* hover zoom + slight lift */
  .card-image-wrap:hover .card-image{ transform: scale(1.06) translateY(-3px); filter: brightness(.96) saturate(1.05); }
  .card-image-wrap:hover{ box-shadow: 0 28px 60px rgba(99,71,180,0.14); }

  .card-badge{ position: absolute; left: 10px; bottom: 10px; background: rgba(255,255,255,0.95); color: #4b0b8a; font-weight: 700; padding: 8px 12px; border-radius: 999px; font-size: 13px; box-shadow: 0 8px 22px rgba(79, 35, 129, 0.10); z-index: 5; backdrop-filter: blur(6px); }

  @media (max-width: 1279px){
    .card-image-wrap{ height: 260px; }
    .card-wrapper{ height: 52vh; }
  }

  @media (max-width: 1023px){
    .card-image-wrap{ height: 200px; }
    .card-wrapper{ height: 420px; }
  }

  @media (min-width: 1600px){
    .card-image-wrap{ height: 380px; }
    .card-wrapper{ height: min(70vh, 920px); }
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    .card-image, .card-image-wrap::after{ transition: none !important; }
    .card-image-wrap:hover .card-image{ transform: none !important; }
  }

  @keyframes scroll{
    0%{ transform: translateY(0); }
    100%{ transform: translateY(-50%); }
  }

  /* Mobile horizontal image tracks (visible below lg) */
  .hero-mobile-images{ margin-top:1rem; display:flex; flex-direction:column; gap:1rem; }
  .mobile-track{ display:flex; gap:1rem; align-items:center; width:200%; }
  .mobile-track .mobile-item{ flex:0 0 auto; width:42%; max-width:260px; }
  .mobile-img{ width:100%; height:140px; object-fit:cover; display:block; border-radius:12px; box-shadow:0 10px 30px rgba(99,71,180,0.08); }

  /* Left-to-right and right-to-left scrolls for alternating rows */
  .mobile-track-ltr{ animation: scrollX 12s linear infinite; }
  .mobile-track-rtl{ animation: scrollX 12s linear infinite reverse; }
  .mobile-track:hover{ animation-play-state: paused; }

  @keyframes scrollX{ 0%{ transform: translateX(0); } 100%{ transform: translateX(-50%); } }

  /* Adjust sizes for small phones */
  @media (max-width: 480px){
    .mobile-img{ height:120px; }
    .mobile-track .mobile-item{ width:56%; }
  }

  /* Extra-small mobile alignment fixes */
  @media (max-width: 640px){
    .hero-landing{
      min-height: auto;
      padding-top: 1.25rem;
      padding-bottom: 2.25rem;
    }

    .hero-left h1{
      font-size: 1.95rem;
      line-height: 1.15;
      margin-top: .25rem;
    }

    .hero-left .hero-lead{
      text-align: left;
      line-height: 1.6;
      margin-top: .8rem;
    }

    .hero-benefits{
      margin-top: 1rem;
    }

    .hero-left > .mt-8{
      margin-top: 1.1rem;
      display: flex;
      flex-wrap: wrap;
      gap: .65rem;
    }

    .hero-left > .mt-8 .cta-primary,
    .hero-left > .mt-8 .cta-secondary{
      justify-content: center;
      min-width: 138px;
      padding: .66rem .95rem;
    }

    .hero-mobile-images{
      overflow: hidden;
      border-radius: 12px;
      margin-top: 1.1rem;
    }

    .mobile-track{
      gap: .8rem;
      width: max-content;
      min-width: 200%;
    }

    .mobile-track .mobile-item{
      width: 62vw;
      max-width: 170px;
    }
  }

  /* Hide desktop vertical tracks and show mobile tracks on small screens */
  @media (max-width: 1023px){
    .card-wrapper{ display: none; }
    .hero-mobile-images{ display:flex; }
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    .mobile-track-ltr, .mobile-track-rtl{ animation:none !important; transform:none !important; }
  }

  /* Global purple gradient button theme */
  .btn-gradient-purple,
  button[type="submit"] {
    background: linear-gradient(135deg, #7b52c7 0%, #9a5bff 100%);
    color: #ffffff !important;
    border: 1px solid #7d49d1;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(111, 66, 193, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  }

  .btn-gradient-purple:hover,
  button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(111, 66, 193, 0.28);
    filter: brightness(1.03);
  }

  .btn-gradient-purple:active,
  button[type="submit"]:active {
    transform: translateY(0);
  }