/* ==========================================================================
   Modern Theme Overlay
   Layered on top of customcss.css / megamenu.css / buttons.css / colors.css.
   Keeps the existing brand palette (purple / orange / teal / cloud) but
   modernizes the navbar, mega menu, hero, product portfolio and adds an
   admin side-menu. Loaded last in layouts/base.blade.php and layouts/admin.blade.php.
   ========================================================================== */

:root {
  --brand-purple: #7b297b;
  --brand-purple-dark: #591d59;
  --brand-orange: #ff5821;
  --brand-teal: #1f9b93;
  --brand-green: #56a528;
  --brand-cloud: #e2eeda;
  --ink-900: #14121c;
  --ink-800: #1d1a29;
  --ink-700: #2a2638;
}

/* ---------------------------------------------------------------------- */
/* Top bar + navbar polish                                                 */
/* ---------------------------------------------------------------------- */
#topbar.bg-purple {
  background: linear-gradient(90deg, var(--ink-900), var(--brand-purple-dark) 65%, var(--brand-purple)) !important;
}

.nav-holder {
  transition: box-shadow .25s ease, padding .25s ease;
}

#navbar {
  transition: box-shadow .25s ease;
}

.nav-holder.is-scrolled #navbar {
  box-shadow: 0 6px 24px rgba(20, 18, 28, 0.12);
}

/* ---------------------------------------------------------------------- */
/* Eddyfi-style dark backdrop mega menu                                    */
/* ---------------------------------------------------------------------- */
#navbar .menu-large .megamenu {
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  margin-top: 14px !important;
  padding: 0 !important;
  background: rgba(20, 18, 28, 0.96);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  animation: megamenuIn .18s ease-out;
  width: 100%;
  max-width: 900px;
}

@keyframes megamenuIn {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

#navbar .menu-large .megamenu > li {
  padding: 0;
}

/* Eddyfi-style two-pane panel: left category switcher, right item list */
.eddyfi-menu-header {
  padding: 1.75rem 2rem 0;
}

.eddyfi-menu-title {
  color: var(--brand-orange);
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: .25rem;
}

.eddyfi-menu-title i {
  font-size: 1rem;
  vertical-align: middle;
}

.eddyfi-menu-subtitle {
  color: rgba(255, 255, 255, 0.45);
  font-size: .85rem;
  margin-bottom: 1rem;
}

.eddyfi-menu-body {
  display: flex;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.eddyfi-menu-categories {
  flex: 0 0 250px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1rem 0;
  max-height: 360px;
  overflow-y: auto;
}

.eddyfi-menu-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  text-align: left;
  color: rgba(255, 255, 255, 0.75);
  font-size: .85rem;
  font-weight: 600;
  padding: .65rem 1.5rem;
  transition: background .15s ease, color .15s ease;
}

.eddyfi-menu-cat i {
  font-size: .8rem;
  opacity: .5;
}

.eddyfi-menu-cat:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.eddyfi-menu-cat.active {
  color: var(--brand-orange);
  border-left-color: var(--brand-orange);
  background: rgba(255, 88, 33, 0.08);
}

.eddyfi-menu-items {
  flex: 1;
  padding: 1.25rem 2rem;
  max-height: 360px;
  overflow-y: auto;
}

.eddyfi-menu-panel {
  display: none;
}

.eddyfi-menu-panel.active {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
  gap: 0 1.5rem;
}

.eddyfi-menu-link {
  color: rgba(255, 255, 255, 0.82) !important;
  padding: .5rem 0;
  font-size: .88rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.eddyfi-menu-link:hover {
  color: var(--brand-orange) !important;
  transform: translateX(4px);
}

@media (max-width: 991px) {
  .eddyfi-menu-body { flex-direction: column; }
  .eddyfi-menu-categories { flex: none; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); max-height: none; }
  .eddyfi-menu-items { grid-template-columns: 1fr; max-height: none; }
}

/* Nav links get a subtle underline-grow effect instead of the old border.
   Uses ::before (not ::after) because Technology/Applications use Bootstrap's
   .dropdown-toggle, which already owns ::after for its caret arrow — sharing
   that pseudo-element caused those two items to render a different hover
   color/border thickness than the plain links. */
#navbar .navbar-nav > li > a {
  position: relative;
  border-bottom: 0 !important;
}

#navbar .navbar-nav > li > a::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--brand-orange);
  transition: width .25s ease;
}

#navbar .navbar-nav > li > a:hover::before,
#navbar .navbar-nav > li.active > a::before {
  width: 100%;
}

/* ---------------------------------------------------------------------- */
/* Hero / slider                                                           */
/* ---------------------------------------------------------------------- */
.hero-slider {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(20, 18, 28, 0.18);
}

.hero-slider .carousel-item {
  height: 460px;
}

.hero-slider .carousel-item img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.hero-slider .hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(20, 18, 28, 0.82) 0%, rgba(89, 29, 89, 0.55) 45%, rgba(20, 18, 28, 0.1) 85%);
}

.hero-slider .carousel-caption {
  /* !important needed: customcss.css's legacy .carousel-caption rule sets
     right: 50px !important + a dark navy background + right-aligned text,
     which fought this rule and produced a misshapen, oddly-padded box. */
  right: auto !important;
  left: 4% !important;
  bottom: 20%;
  text-align: left !important;
  max-width: 520px;
  background: transparent !important;
  padding: 0 !important;
}

.hero-slider .carousel-caption .btn {
  margin-top: 1.25rem !important;
  border-radius: 50px !important;
  padding: .6rem 1.75rem !important;
  transition: background .3s ease, transform .2s ease;
}

.hero-slider .carousel-caption .btn:hover {
  transform: translateY(-2px);
}

.hero-slider .carousel-caption .hero-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .75rem;
  color: var(--brand-orange);
  font-weight: 700;
  margin-bottom: .5rem;
}

.hero-slider .carousel-caption h3 {
  font-size: 2.4rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .5rem;
}

.hero-slider .carousel-caption p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
}

.hero-slider .carousel-indicators li {
  border-radius: 50px;
  width: 28px;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.4);
}

.hero-slider .carousel-indicators .active {
  background-color: var(--brand-orange);
}

.hero-side-card {
  border-radius: 18px;
  height: 100%;
  background: #fff;
}

@media (max-width: 991px) {
  .hero-slider .carousel-item { height: 320px; }
  .hero-slider .carousel-caption h3 { font-size: 1.6rem; }
  .hero-slider .carousel-caption p { font-size: .95rem; }
}

/* ---------------------------------------------------------------------- */
/* Product portfolio (populated from DB)                                   */
/* ---------------------------------------------------------------------- */
#ProductPortfolio {
  background: linear-gradient(160deg, var(--ink-900), var(--brand-purple-dark) 65%, var(--brand-purple));
}

.portfolio-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  height: 100%;
}

.portfolio-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 88, 33, 0.5);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.portfolio-card .portfolio-img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #fff;
}

.portfolio-card .portfolio-img-wrap a {
  display: block;
  width: 100%;
  height: 100%;
}

.portfolio-card .portfolio-img-wrap img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  transition: transform .4s ease;
}

.portfolio-card:hover .portfolio-img-wrap img {
  transform: scale(1.08);
}

.portfolio-card .featured-badge {
  position: absolute;
  top: .75rem;
  left: .75rem;
  background: var(--brand-orange);
  color: #fff;
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  padding: .3rem .6rem;
  border-radius: 50px;
}

.portfolio-card .card-body {
  padding: 1.1rem 1.2rem 1.3rem;
}

.portfolio-card .card-title {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
}

.portfolio-card .card-title a {
  color: #fff;
}

.portfolio-card .card-title a:hover {
  color: var(--brand-orange);
}

.portfolio-card p.card-text {
  color: rgba(255, 255, 255, 0.65);
  font-size: .85rem;
  margin-bottom: 0;
}

.portfolio-empty {
  color: rgba(255, 255, 255, 0.7);
}

/* YouTube callout, its own section below the portfolio */
.youtube-callout {
  background: var(--ink-800);
}

.youtube-callout .yt-icon {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(255, 0, 0, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: transform .2s ease;
}

.youtube-callout a:hover .yt-icon {
  transform: scale(1.08);
}

.youtube-callout .yt-icon i {
  color: #ff3b30;
  font-size: 2rem;
}

/* ---------------------------------------------------------------------- */
/* Admin side menu (replaces the old fixed-bottom "Manage Site" navbar)    */
/* ---------------------------------------------------------------------- */
.admin-sidebar-toggle {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 1045;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  background: var(--brand-purple);
  color: #fff;
  font-size: 1.25rem;
  box-shadow: 0 10px 25px rgba(89, 29, 89, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform .2s ease;
}

.admin-sidebar-toggle:hover {
  background: var(--brand-purple-dark);
  color: #fff;
  transform: translateY(-2px);
}

.admin-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  background: var(--ink-900);
  color: rgba(255, 255, 255, 0.85);
  z-index: 1050;
  transform: translateX(-100%);
  transition: transform .3s ease;
  overflow-y: auto;
  box-shadow: 12px 0 40px rgba(0, 0, 0, 0.35);
}

.admin-sidebar.is-open {
  transform: translateX(0);
}

.admin-sidebar .admin-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-sidebar .admin-sidebar-header strong {
  color: #fff;
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.admin-sidebar .admin-sidebar-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.1rem;
}

.admin-sidebar .admin-sidebar-close:hover {
  color: #fff;
}

.admin-sidebar .admin-sidebar-section {
  padding: 1rem 1.25rem 0.25rem;
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, 0.35);
}

.admin-sidebar .nav-link {
  color: rgba(255, 255, 255, 0.85);
  padding: .6rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .9rem;
  border-left: 3px solid transparent;
}

.admin-sidebar .nav-link i {
  width: 18px;
  text-align: center;
  color: var(--brand-orange);
}

.admin-sidebar .nav-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-left-color: var(--brand-orange);
}

.admin-sidebar .nav-link.text-success i,
.admin-sidebar .nav-link.text-success {
  color: #6bd67a !important;
}

.admin-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease;
}

.admin-sidebar-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

body.admin-sidebar-active {
  overflow: hidden;
}

@media (max-width: 575px) {
  .admin-sidebar { width: 84vw; }
}

/* ---------------------------------------------------------------------- */
/* Site-wide "Talk to us Now" CTA band (appears above the footer on        */
/* most pages) — same markup pattern everywhere: .bg-teal.text-white       */
/* ---------------------------------------------------------------------- */
.container-fluid.bg-teal.text-white {
  background: linear-gradient(120deg, var(--brand-teal) 0%, #146b65 100%) !important;
  position: relative;
  overflow: hidden;
}

.container-fluid.bg-teal.text-white::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 82% 15%, rgba(255, 255, 255, 0.1), transparent 60%);
  pointer-events: none;
}

.container-fluid.bg-teal.text-white > * {
  position: relative;
}

.container-fluid.bg-teal.text-white h1 {
  font-weight: 700;
}

.container-fluid.bg-teal.text-white .card.border-0.bg-transparent {
  background: rgba(255, 255, 255, 0.07) !important;
  border-radius: 14px;
  padding: .5rem;
  transition: background .2s ease, transform .2s ease;
}

.container-fluid.bg-teal.text-white .card.border-0.bg-transparent:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  transform: translateY(-4px);
}

.container-fluid.bg-teal.text-white .card-title {
  color: #ffe0b0;
  font-size: .95rem;
}

.container-fluid.bg-teal.text-white .card-text {
  display: block;
  padding: .2rem 0;
  color: rgba(255, 255, 255, 0.85);
  transition: color .2s ease, transform .2s ease;
}

.container-fluid.bg-teal.text-white .card-text:hover {
  color: #fff;
  transform: translateX(4px);
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                   */
/* ---------------------------------------------------------------------- */
#footer {
  background: var(--ink-900);
  color: rgba(255, 255, 255, 0.75);
}

#footer .footer-top {
  /* .footer-top carries its own bg-cloud utility class in the markup (light
     mint green) — background-color is a property this rule never touched
     before, so that utility class kept winning regardless of #footer's own
     dark background. Override it explicitly. */
  background: var(--ink-900) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#footer .footer-top .footer-contact h4,
#footer .footer-top h4,
#footer .footer-newsletter h4 {
  color: #fff;
  position: relative;
  padding-bottom: .9rem;
}

#footer .footer-top .footer-contact h4::after,
#footer .footer-top h4::after,
#footer .footer-newsletter h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background: var(--brand-orange);
  border-radius: 2px;
}

#footer .footer-top .footer-contact p {
  color: rgba(255, 255, 255, 0.65);
}

#footer .footer-top .footer-links ul a {
  color: rgba(255, 255, 255, 0.65);
}

#footer .footer-top .footer-links ul a:hover {
  color: var(--brand-orange);
  transform: translateX(4px);
}

#footer .footer-top .footer-links ul i {
  color: var(--brand-orange);
}

#footer .footer-newsletter p {
  color: rgba(255, 255, 255, 0.6);
}

#footer .footer-newsletter form {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

#footer .footer-newsletter form input[type="email"] {
  background: transparent;
  color: #fff;
}

#footer .footer-newsletter form input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

#footer .copyright {
  color: rgba(255, 255, 255, 0.85);
}

#footer .credits {
  color: rgba(255, 255, 255, 0.45);
}

#footer .credits a {
  color: rgba(255, 255, 255, 0.7);
}

#footer .credits a:hover {
  color: var(--brand-orange);
}

#footer .social-links a {
  background: rgba(255, 255, 255, 0.08);
  transition: background .2s ease, transform .2s ease;
}

#footer .social-links a:hover {
  background: var(--brand-orange);
  transform: translateY(-3px);
}

/* ---------------------------------------------------------------------- */
/* Shared page-header band (products / training / contact / etc.)          */
/* ---------------------------------------------------------------------- */
.page-hero-band {
  background: linear-gradient(120deg, var(--ink-900), var(--brand-purple-dark) 70%, var(--brand-purple));
  color: #fff;
  padding: 1.5rem 0;
}

.page-hero-band .breadcrumb {
  background: transparent;
  padding-left: 0;
}

.page-hero-band .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.65);
}

.page-hero-band .breadcrumb-item a:hover {
  color: #fff;
}

.page-hero-band .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.4);
}

.page-hero-band .breadcrumb-item.current a,
.page-hero-band .breadcrumb-item.active {
  color: var(--brand-orange);
}

.page-hero-band h1,
.page-hero-band h2,
.page-hero-band h3 {
  color: #fff;
  font-weight: 700;
}

/* ---------------------------------------------------------------------- */
/* Modern product / course cards                                           */
/* ---------------------------------------------------------------------- */
.modern-card {
  border: 0 !important;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(20, 18, 28, 0.1);
  transition: transform .25s ease, box-shadow .25s ease;
}

.modern-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(20, 18, 28, 0.18);
}

.modern-card .card-img-top-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}

.modern-card .card-img-top-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.modern-card:hover .card-img-top-wrap img {
  transform: scale(1.06);
}

.modern-card .card-footer {
  border-top: 0;
}

/* Contact / office cards */
.contact-card {
  border: 0 !important;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(20, 18, 28, 0.08);
}

.contact-card .card-header {
  background: var(--brand-purple);
  color: #fff;
  font-weight: 600;
  border: 0;
}

.contact-card .card-footer {
  background: #fff;
  border-top: 1px solid rgba(20, 18, 28, 0.06);
}

/* Embedded map */
.map-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(20, 18, 28, 0.08);
}

.map-card iframe {
  width: 100%;
  height: 280px;
  display: block;
  border: 0;
}

/* Course list rows (training home) */
.course-list-item {
  border: 0 !important;
  border-radius: 12px !important;
  margin-bottom: .6rem;
  box-shadow: 0 4px 14px rgba(20, 18, 28, 0.06);
  transition: transform .2s ease, box-shadow .2s ease;
}

.course-list-item:hover {
  transform: translateX(4px);
  box-shadow: 0 8px 22px rgba(20, 18, 28, 0.12);
}

/* FAQ */
.faq-list.modern li {
  border-radius: 12px !important;
  overflow: hidden;
}

/* ---------------------------------------------------------------------- */
/* Glassy dropdown menus (staff card menu, topbar user menu, etc.)         */
/* Does not touch .megamenu, which keeps its own dark glass treatment.     */
/* ---------------------------------------------------------------------- */
.dropdown-menu:not(.megamenu) {
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 16px 40px rgba(20, 18, 28, 0.18);
  padding: .4rem 0;
  overflow: hidden;
  animation: dropdownIn .15s ease-out;
}

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

.dropdown-menu:not(.megamenu) .dropdown-item {
  background: transparent;
  font-size: .88rem;
  padding: .5rem 1.25rem;
}

.dropdown-menu:not(.megamenu) .dropdown-item:hover,
.dropdown-menu:not(.megamenu) .dropdown-item:focus {
  background: rgba(255, 88, 33, 0.12);
  color: var(--brand-orange);
}

.dropdown-menu:not(.megamenu) .dropdown-divider {
  border-color: rgba(20, 18, 28, 0.08);
}

/* The old template pulled this box up -80px to overlap a much taller hero
   image. Our hero-slider is a fixed, shorter height with its own caption
   box, so that negative margin dragged "Why Choose..." up into the hero
   caption/button. Pull it up just enough to overlap the empty strip below
   the caption button, not the button itself (mobile keeps its own positive
   margin from customcss.css, unaffected since this only applies above the
   992px breakpoint). */
@media (min-width: 993px) {
  .why-us .content {
    margin-top: -60px !important;
  }
}

/* Match the rounded corners of the adjacent icon-box cards (10px), instead
   of the old template's flat 4px. */
.why-us .content {
  border-radius: 10px !important;
}

/* ---------------------------------------------------------------------- */
/* Homepage "Services" section cards                                       */
/* ---------------------------------------------------------------------- */
.services .icon-box {
  border-radius: 18px;
  border: 1px solid rgba(20, 18, 28, 0.06);
  box-shadow: 0 10px 30px rgba(20, 18, 28, 0.08);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.services .icon-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 26px 50px rgba(20, 18, 28, 0.16);
  border-color: rgba(255, 88, 33, 0.35);
}

.services .icon {
  background: linear-gradient(135deg, var(--brand-orange), #ff8a5c);
  box-shadow: 0 10px 24px rgba(255, 88, 33, 0.35);
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.services .icon-box:hover .icon {
  transform: translateY(-4px) rotate(-10deg) scale(1.1);
  background: #fff;
  border-color: var(--brand-orange);
  box-shadow: 0 14px 30px rgba(255, 88, 33, 0.3);
}

.services .icon-box:hover .icon i {
  animation: servicesIconPop .45s ease;
}

@keyframes servicesIconPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3) rotate(10deg); }
  100% { transform: scale(1); }
}

.services .title,
.services .title a {
  transition: color .25s ease;
}

.services .description {
  transition: color .25s ease;
}

.services .icon-box:hover .description {
  color: #4a4750;
}

/* Pill-shaped orange buttons everywhere, matching the hero CTAs and
   the Why Us "more-btn" style (excludes split/joined button groups that
   intentionally stay square, e.g. .product-card-actions). */
.btn-orange,
.btn-outline-orange {
  border-radius: 50px !important;
}

/* ---------------------------------------------------------------------- */
/* Manage Products: checkbox filter sidebar                                */
/* ---------------------------------------------------------------------- */
.manage-filter-sidebar {
  background: #fff;
  border: 1px solid rgba(20, 18, 28, 0.06);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(20, 18, 28, 0.05);
  padding: 1.1rem;
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

.manage-filter-reset {
  background: transparent;
  border: 1px solid rgba(20, 18, 28, 0.12);
  border-radius: 50px;
  color: var(--ink-900);
  font-size: .72rem;
  font-weight: 600;
  padding: .2rem .7rem;
}

.manage-filter-reset:hover {
  border-color: var(--brand-orange);
  color: var(--brand-orange);
}

.manage-filter-heading {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--brand-teal);
  margin: 1rem 0 .4rem;
  border-top: 1px solid rgba(20, 18, 28, 0.06);
  padding-top: .8rem;
}

.manage-filter-heading:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.manage-filter-check {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  font-weight: 400;
  color: var(--ink-900);
  margin-bottom: .45rem;
  cursor: pointer;
}

.manage-filter-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--brand-orange);
  cursor: pointer;
}

/* ---------------------------------------------------------------------- */
/* Manage Products: grouped-by-category view with status badges            */
/* ---------------------------------------------------------------------- */
.manage-group-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  color: var(--ink-900);
  border-bottom: 2px solid var(--brand-orange);
  padding-bottom: .6rem;
  margin-bottom: 1rem;
}

.manage-group-title i {
  color: var(--brand-orange);
}

.manage-count-badge {
  background: rgba(255, 88, 33, 0.12);
  color: var(--brand-orange);
  font-weight: 700;
  border-radius: 50px;
  padding: .25rem .65rem;
}

.manage-subgroup-title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--brand-teal);
  margin: 1rem 0 .5rem;
}

.manage-subsubgroup-title {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--brand-purple);
  margin: .6rem 0 .4rem 1rem;
}

.manage-row {
  display: flex;
  gap: 1rem;
  background: #fff;
  border: 1px solid rgba(20, 18, 28, 0.06);
  border-radius: 14px;
  padding: 1rem;
  margin-bottom: .9rem;
  box-shadow: 0 6px 18px rgba(20, 18, 28, 0.05);
  transition: box-shadow .2s ease, transform .2s ease;
}

.manage-row:hover {
  box-shadow: 0 14px 30px rgba(20, 18, 28, 0.1);
  transform: translateY(-2px);
}

.manage-row-thumb {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
}

.manage-row-body {
  flex: 1;
  min-width: 0;
}

.manage-row-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink-900);
}

.manage-row-title:hover {
  color: var(--brand-orange);
}

.manage-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .4rem 0 .5rem;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  font-weight: 700;
  padding: .25rem .6rem;
  border-radius: 50px;
}

.status-badge-published {
  background: rgba(86, 165, 40, 0.12);
  color: var(--brand-green);
}

.status-badge-draft {
  background: rgba(20, 18, 28, 0.08);
  color: #6b6875;
}

.status-badge-featured {
  background: rgba(255, 88, 33, 0.12);
  color: var(--brand-orange);
}

.status-badge-menu {
  background: rgba(31, 155, 147, 0.12);
  color: var(--brand-teal);
}

.status-badge-group {
  background: rgba(123, 41, 123, 0.12);
  color: var(--brand-purple);
}

/* ---------------------------------------------------------------------- */
/* Product filter bar (testing-method chips)                               */
/* ---------------------------------------------------------------------- */
.product-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.product-filter-chip {
  background: #fff;
  border: 1px solid rgba(20, 18, 28, 0.12);
  color: var(--ink-900);
  font-size: .82rem;
  font-weight: 600;
  padding: .5rem 1.1rem;
  border-radius: 50px;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.product-filter-chip:hover {
  border-color: var(--brand-orange);
  color: var(--brand-orange);
  transform: translateY(-2px);
}

.product-filter-chip.active {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  color: #fff;
}

/* ---------------------------------------------------------------------- */
/* Product listing card                                                    */
/* ---------------------------------------------------------------------- */
.product-card {
  position: relative;
  border: 1px solid rgba(20, 18, 28, 0.06) !important;
  border-radius: 18px;
  overflow: visible;
  background: #fff;
  box-shadow: 0 8px 24px rgba(20, 18, 28, 0.07);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.product-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 88, 33, 0.35) !important;
  box-shadow: 0 22px 44px rgba(20, 18, 28, 0.16);
}

.product-card-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 17px 17px 0 0;
  background: var(--brand-cloud);
}

.product-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.product-card:hover .product-card-media img {
  transform: scale(1.1);
}

.product-card-media .product-card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 18, 28, 0.75) 0%, rgba(20, 18, 28, 0) 55%);
  opacity: 0;
  transition: opacity .3s ease;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 1rem;
}

.product-card:hover .product-card-media .product-card-scrim {
  opacity: 1;
}

.product-card-scrim span {
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50px;
  padding: .4rem 1rem;
  transform: translateY(10px);
  transition: transform .3s ease;
}

.product-card:hover .product-card-scrim span {
  transform: translateY(0);
}

.product-card-badge {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 2;
  background: rgba(20, 18, 28, 0.75);
  color: var(--brand-orange);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .3rem .65rem;
  border-radius: 50px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.product-card-menu {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 3;
}

.product-card-menu .btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  background: rgba(20, 18, 28, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.product-card-menu .btn:hover,
.product-card-menu .btn:focus {
  background: var(--brand-orange);
  color: #fff;
}

.product-card-body {
  padding: 1.1rem 1.25rem .25rem;
}

.product-card-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--brand-teal);
  margin-bottom: .3rem;
}

.product-card-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  margin-bottom: .4rem;
}

.product-card-title a {
  color: var(--ink-900);
}

.product-card-title a:hover {
  color: var(--brand-orange);
}

.product-card-desc {
  font-size: .82rem;
  color: #6b6875;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0;
}

.product-card-actions {
  display: flex;
  border-top: 1px solid rgba(20, 18, 28, 0.06);
  margin-top: 1rem;
  border-radius: 0 0 17px 17px;
  overflow: hidden;
}

.product-card-actions a {
  flex: 1;
  text-align: center;
  font-size: .82rem;
  font-weight: 600;
  padding: .7rem .5rem;
}

.product-card-actions a:first-child {
  border-right: 1px solid rgba(20, 18, 28, 0.06);
  color: var(--ink-900);
  background: transparent;
}

.product-card-actions a:first-child:hover {
  background: rgba(123, 41, 123, 0.06);
  color: var(--brand-purple);
}

.product-card-actions a:last-child {
  color: var(--brand-orange);
  background: transparent;
}

.product-card-actions a:last-child:hover {
  background: rgba(255, 88, 33, 0.08);
}