/*
Theme Name:     Constructions Agency
Theme URI:      https://sparklewpthemes.com/wordpress-themes/construction-agency/
Author:         sparklewpthemes
Author URI:     https://sparklewpthemes.com/
Description:    Construction Agency child customization for MMOCC
Version:        1.0.5
Template:       construction-light
Text Domain:    constructions-agency
*/

/* =========================================================
   1. BASE / COMMON
   ========================================================= */

@font-face {
  font-family: "pyidaungsu";
  src:
    url("fonts/pyidaungsu.ttf") format("ttf"),
    url("fonts/pyidaungsu.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Myanmar3";
  src:
    url("fonts/Myanmar3.ttf.woff") format("woff"),
    url("fonts/Myanmar3.ttf.svg#Myanmar3") format("svg"),
    url("fonts/Myanmar3.ttf.eot"),
    url("fontt/Myanmar3.ttf.eot?#iefix") format("embedded-opentype");
  font-weight: normal;
  font-style: normal;
}

:root {
  --mmocc-bg: #f7f7f5;
  --mmocc-header-bg: linear-gradient(
    90deg,
    rgba(255, 248, 240, 0.97) 0%,
    rgba(255, 244, 232, 0.97) 48%,
    rgba(255, 237, 220, 0.97) 100%
  );
  --mmocc-text: #2b2b2b;
  --mmocc-nav-text: #374151;
  --mmocc-accent: #d4891c;
  --mmocc-accent-dark: #8a4f28;
  --mmocc-accent-soft: rgba(243, 167, 109, 0.14);
  --mmocc-header-h: 72px;
  --mmocc-header-h-mobile: 64px;
  --mmocc-container-pad: 28px;
  --mmocc-container-pad-mobile: 14px;
  --mmocc-radius: 8px;
  --mmocc-radius-lg: 10px;
  --mmocc-shadow-soft: 0 6px 24px rgba(0, 0, 0, 0.06);
  --mmocc-shadow-dropdown: 0 10px 24px rgba(0, 0, 0, 0.08);
}

/* Breakpoints
mobile default
tablet  = 768px+
laptop  = 1024px+
desktop = 1280px+
wide    = 1536px+
ultra   = 2200px+
*/

body {
  background: var(--mmocc-bg);
  color: var(--mmocc-text);
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#page,
.site,
.site-content,
.home .site-content,
.page .site-content,
.home .sp-banner-wrapper,
.sp-banner-wrapper {
  background: var(--mmocc-bg);
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* =========================================================
   2. COMPONENTS
   ========================================================= */

/* -------------------------
   Header
   ------------------------- */
header.cons-agency {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

header.cons-agency .cons_light_top_bar {
  display: none !important;
}

header.cons-agency .nav-classic {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-height: var(--mmocc-header-h);
  overflow: visible !important;
  background: var(--mmocc-header-bg) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: var(--mmocc-shadow-soft);
  z-index: 9999;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.admin-bar header.cons-agency .nav-classic {
  top: 32px;
}

header.cons-agency .nav-classic .container {
  max-width: 100% !important;
  padding-left: var(--mmocc-container-pad) !important;
  padding-right: var(--mmocc-container-pad) !important;
}

header.cons-agency .header-middle-inner {
  min-height: var(--mmocc-header-h);
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

header.cons-agency .site-branding {
  width: auto;
  max-width: none;
  min-height: var(--mmocc-header-h);
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 12px !important;
}

header.cons-agency .brandinglogo-wrap,
header.cons-agency .brandinglogo-wrap a,
.home header.cons-agency .site-branding {
  background: transparent !important;
  color: #1f2937 !important;
}

header.cons-agency .brandinglogo-wrap {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  gap: 10px !important;
}

header.cons-agency .brandinglogo-wrap .custom-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

header.cons-agency .brandinglogo-wrap .custom-logo-link img.custom-logo,
header.cons-agency .site-branding img.custom-logo {
  display: block !important;
  width: auto !important;
  height: 42px !important;
  max-height: 42px !important;
  max-width: none !important;
}

/* 60th badge */
.mmocc-anniversary-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  margin-left: 0 !important;
  line-height: 0 !important;
  animation: mmocc-badge-float 4s ease-in-out infinite;
}

.mmocc-anniversary-badge img {
  display: block !important;
  width: auto !important;
  height: 40px !important;
  max-height: 40px !important;
  max-width: none !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 10px rgba(138, 79, 40, 0.12));
}

@keyframes mmocc-badge-float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Menu */
header.cons-agency .nav-menu {
  min-height: var(--mmocc-header-h);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
}

header.cons-agency .nav-menu .box-header-nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: transparent !important;
}

header.cons-agency .box-header-nav .main-menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: nowrap;
}

header.cons-agency .box-header-nav .main-menu > .menu-item {
  font-family: "Oswald", "pyidaungsu";
}

header.cons-agency .box-header-nav .main-menu .page_item a,
header.cons-agency .box-header-nav .main-menu > .menu-item > a {
  margin: 0 !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  font-weight: 400;
  line-height: 1;
  color: var(--mmocc-nav-text) !important;
  background: transparent !important;
  border-radius: var(--mmocc-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

header.cons-agency
  .box-header-nav
  .main-menu
  > .menu-item.current-menu-item
  > a,
header.cons-agency .box-header-nav .main-menu > .menu-item:hover > a,
header.cons-agency .box-header-nav .main-menu .page_item.current-page-item a,
header.cons-agency .box-header-nav .main-menu .page_item:hover a {
  color: var(--mmocc-accent-dark) !important;
  background: var(--mmocc-accent-soft) !important;
  opacity: 1 !important;
}

/* Contact button */
.menu-button-contact a,
.box-header-nav .main-menu > .menu-button-contact > a {
  background: linear-gradient(135deg, #f0a04b 0%, #8a4f28 100%) !important;
  color: #fff !important;
  border: 1px solid #8a4f28 !important;
  border-radius: var(--mmocc-radius) !important;
  min-height: 38px;
  padding: 8px 16px !important;
  box-shadow: none !important;
}

.menu-button-contact a:hover,
.box-header-nav .main-menu > .menu-button-contact > a:hover {
  background: linear-gradient(135deg, #de8f3b 0%, #744021 100%) !important;
  border-color: #744021 !important;
}

/* Dropdown */
header.cons-agency .nav-menu,
header.cons-agency .nav-menu .box-header-nav,
header.cons-agency .box-header-nav .main-menu,
header.cons-agency .box-header-nav .main-menu > li {
  overflow: visible !important;
}

header.cons-agency .box-header-nav .main-menu > li {
  position: relative !important;
}

header.cons-agency .box-header-nav .main-menu > li > ul.sub-menu,
header.cons-agency .box-header-nav .main-menu > li > ul.children {
  position: absolute !important;
  top: calc(100% + 2px) !important;
  left: 0 !important;
  min-width: 220px !important;
  margin-top: 0 !important;
  padding: 8px 0 !important;
  background: #fffaf4 !important;
  border: 1px solid rgba(138, 79, 40, 0.1) !important;
  box-shadow: var(--mmocc-shadow-dropdown) !important;
  border-radius: var(--mmocc-radius-lg) !important;
  z-index: 10001 !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease;
}

header.cons-agency .box-header-nav .main-menu > li:hover > ul.sub-menu,
header.cons-agency .box-header-nav .main-menu > li:hover > ul.children,
header.cons-agency .box-header-nav .main-menu > li:focus-within > ul.sub-menu,
header.cons-agency .box-header-nav .main-menu > li:focus-within > ul.children {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

header.cons-agency .box-header-nav .main-menu > li > ul.sub-menu li,
header.cons-agency .box-header-nav .main-menu > li > ul.children li {
  width: 100%;
}

header.cons-agency .box-header-nav .main-menu > li > ul.sub-menu li a,
header.cons-agency .box-header-nav .main-menu > li > ul.children li a {
  display: block !important;
  padding: 10px 14px !important;
  color: #4b5563 !important;
  background: transparent !important;
  white-space: nowrap !important;
}

header.cons-agency .box-header-nav .main-menu > li > ul.sub-menu li a:hover,
header.cons-agency .box-header-nav .main-menu > li > ul.children li a:hover {
  background: var(--mmocc-accent-soft) !important;
  color: var(--mmocc-accent-dark) !important;
}

/* Language switcher */
#mmocc-lang-slot {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  margin-left: 14px !important;
}

#mmocc-lang-slot > #trp-floater-ls.mmocc-lang-inside-nav {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  transform: none !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#mmocc-lang-slot
  > #trp-floater-ls.mmocc-lang-inside-nav
  #trp-floater-ls-current-language {
  display: none !important;
}

#mmocc-lang-slot
  > #trp-floater-ls.mmocc-lang-inside-nav
  #trp-floater-ls-language-list {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#mmocc-lang-slot
  > #trp-floater-ls.mmocc-lang-inside-nav
  #trp-floater-ls-language-list
  a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  height: 34px !important;
  min-width: 44px !important;
  padding: 7px 9px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  color: #4b5563 !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: var(--mmocc-radius) !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

#mmocc-lang-slot
  > #trp-floater-ls.mmocc-lang-inside-nav
  #trp-floater-ls-language-list
  a:hover {
  background: #f8f5ef !important;
  color: var(--mmocc-accent) !important;
  border-color: rgba(212, 137, 28, 0.25) !important;
}

#mmocc-lang-slot
  > #trp-floater-ls.mmocc-lang-inside-nav
  #trp-floater-ls-language-list
  a.trp-ls-shortcode-current-language,
#mmocc-lang-slot
  > #trp-floater-ls.mmocc-lang-inside-nav
  #trp-floater-ls-language-list
  a[aria-current="true"] {
  background: var(--mmocc-accent) !important;
  color: #ffffff !important;
  border-color: var(--mmocc-accent) !important;
}

#trp-floater-ls:not(.mmocc-lang-inside-nav) {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Header visual */
.mmocc-header-gradient,
.mmocc-sakura-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mmocc-header-gradient {
  background:
    radial-gradient(
      circle at 14% 30%,
      rgba(255, 170, 92, 0.16),
      transparent 26%
    ),
    radial-gradient(circle at 86% 24%, rgba(103, 58, 29, 0.1), transparent 22%),
    linear-gradient(
      90deg,
      rgba(255, 248, 240, 0.28) 0%,
      rgba(255, 240, 225, 0.12) 50%,
      rgba(96, 55, 30, 0.06) 100%
    );
  z-index: 0;
}

.mmocc-sakura-layer {
  z-index: 1;
  overflow: hidden;
}

header.cons-agency .nav-classic,
header.cons-agency .header-middle-inner,
header.cons-agency .site-branding,
header.cons-agency .nav-menu,
#mmocc-lang-slot {
  position: relative;
  z-index: 2;
}

.mmocc-sakura {
  position: absolute;
  top: -26px;
  width: 14px;
  height: 10px;
  border-radius: 12px 12px 12px 0;
  background: linear-gradient(135deg, #ffd3b0 0%, #f3a76d 100%);
  opacity: 0.82;
  transform: rotate(25deg);
  animation-name: mmocc-sakura-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  box-shadow: inset -1px -1px 0 rgba(255, 255, 255, 0.35);
}

.mmocc-sakura::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 7px;
  top: 1px;
  left: 3px;
  border-radius: 12px 12px 12px 0;
  background: rgba(255, 232, 214, 0.45);
  transform: rotate(18deg);
}

@keyframes mmocc-sakura-fall {
  0% {
    transform: translate3d(0, -18px, 0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.85;
  }
  100% {
    transform: translate3d(110px, 105px, 0) rotate(320deg);
    opacity: 0;
  }
}

/* -------------------------
   Hero
   ------------------------- */
header.cons-agency + .sp-banner-wrapper {
  position: relative !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

header.cons-agency + .sp-banner-wrapper,
header.cons-agency + .sp-banner-wrapper .banner-slider,
header.cons-agency + .sp-banner-wrapper .owl-stage-outer,
header.cons-agency + .sp-banner-wrapper .owl-stage,
header.cons-agency + .sp-banner-wrapper .owl-item,
header.cons-agency + .sp-banner-wrapper .item,
header.cons-agency + .sp-banner-wrapper .slide-item {
  margin-top: 0 !important;
  padding-top: 0 !important;
  min-height: 0 !important;
}

header.cons-agency
  + .sp-banner-wrapper
  .banner-slider.owl-carousel.features-slider-1,
header.cons-agency
  + .sp-banner-wrapper
  .banner-slider.owl-carousel.features-slider-2,
header.cons-agency + .sp-banner-wrapper .breadcrumb {
  margin-top: 0 !important;
}

header.cons-agency + .sp-banner-wrapper .slide-item,
header.cons-agency + .sp-banner-wrapper .item {
  display: flex !important;
  align-items: stretch !important;
}

header.cons-agency + .sp-banner-wrapper img,
header.cons-agency + .sp-banner-wrapper .slide-image,
header.cons-agency + .sp-banner-wrapper .banner-image {
  display: block !important;
  margin-top: 0 !important;
}

header.cons-agency + .sp-banner-wrapper::after {
  content: "";
  position: absolute;
  left: -3%;
  bottom: -1px;
  width: 106%;
  height: 150px;
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(240, 160, 75, 0.16),
      transparent 28%
    ),
    radial-gradient(
      circle at 82% 24%,
      rgba(212, 137, 28, 0.1),
      transparent 24%
    ),
    linear-gradient(180deg, #f6efe5 0%, #f3ede4 46%, #efe7dc 76%, #efe7dc 100%);
  z-index: 5;
  border-top-left-radius: 48% 100%;
  border-top-right-radius: 48% 100%;
  box-shadow:
    0 -10px 30px rgba(212, 137, 28, 0.05) inset,
    0 -1px 0 rgba(255, 255, 255, 0.32) inset;
}

header.cons-agency + .sp-banner-wrapper .banner-slider,
header.cons-agency + .sp-banner-wrapper .owl-stage-outer,
header.cons-agency + .sp-banner-wrapper .owl-stage,
header.cons-agency + .sp-banner-wrapper .owl-item,
header.cons-agency + .sp-banner-wrapper .item,
header.cons-agency + .sp-banner-wrapper .slide-item {
  position: relative;
  z-index: 1;
}

header.cons-agency + .sp-banner-wrapper::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 90px;
  height: 120px;
  background: radial-gradient(
    ellipse at center,
    rgba(240, 160, 75, 0.1) 0%,
    rgba(240, 160, 75, 0.04) 35%,
    rgba(240, 160, 75, 0) 75%
  );
  z-index: 4;
  pointer-events: none;
}

/* =========================================================
   3. RESPONSIVE SECTIONS
   ========================================================= */

@media (min-width: 1025px) {
  #mmocc-lang-slot {
    margin-left: auto !important;
    padding-left: 10px !important;
  }

  /* Hero desktop height fix for 100% zoom */
  header.cons-agency + .sp-banner-wrapper {
    height: calc(100vh - 72px) !important;
    min-height: 620px !important;
    max-height: 760px !important;
  }

  header.cons-agency + .sp-banner-wrapper .banner-slider,
  header.cons-agency + .sp-banner-wrapper .owl-stage-outer,
  header.cons-agency + .sp-banner-wrapper .owl-stage,
  header.cons-agency + .sp-banner-wrapper .owl-item,
  header.cons-agency + .sp-banner-wrapper .item,
  header.cons-agency + .sp-banner-wrapper .slide-item {
    height: 100% !important;
  }

  header.cons-agency + .sp-banner-wrapper img,
  header.cons-agency + .sp-banner-wrapper .slide-image,
  header.cons-agency + .sp-banner-wrapper .banner-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  header.cons-agency + .sp-banner-wrapper::after {
    height: 120px !important;
  }
}

@media (max-width: 1024px) {
  header.cons-agency .nav-classic {
    min-height: var(--mmocc-header-h-mobile) !important;
    background: rgba(255, 252, 248, 0.98) !important;
  }

  body.admin-bar header.cons-agency .nav-classic {
    top: 46px !important;
  }

  header.cons-agency .nav-classic .container {
    padding-left: var(--mmocc-container-pad-mobile) !important;
    padding-right: var(--mmocc-container-pad-mobile) !important;
  }

  header.cons-agency .header-middle-inner,
  header.cons-agency .site-branding,
  header.cons-agency .brandinglogo-wrap,
  header.cons-agency .nav-menu {
    min-height: var(--mmocc-header-h-mobile) !important;
  }

  header.cons-agency .site-branding {
    width: auto !important;
    max-width: none !important;
  }

  header.cons-agency .site-branding img.custom-logo,
  header.cons-agency .brandinglogo-wrap .custom-logo-link img.custom-logo {
    max-height: 36px !important;
    height: 36px !important;
  }

  .mmocc-anniversary-badge img {
    height: 28px !important;
    max-height: 28px !important;
  }

  header.cons-agency .nav-menu {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin-left: auto !important;
  }

  header.cons-agency .nav-menu .box-header-nav,
  header.cons-agency .box-header-nav .main-menu {
    display: block !important;
    width: auto !important;
    flex: none !important;
    gap: 0 !important;
  }

  button.mobile-nav-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #mmocc-lang-slot,
  #trp-floater-ls {
    display: none !important;
  }

  .mmocc-header-gradient,
  .mmocc-sakura-layer {
    display: none !important;
  }

  header.cons-agency + .sp-banner-wrapper {
    margin-top: 0 !important;
  }

  /* header.cons-agency + .sp-banner-wrapper::after {
    height: 70px;
    border-top-left-radius: 10% 100%;
    border-top-right-radius: 10% 100%;
  } */

  section.cons_light_feature.team-list.style1 {
    margin-top: -1px !important;
  }

  header.cons-agency + .sp-banner-wrapper::after {
    height: 82px;
    border-top-left-radius: 12% 100%;
    border-top-right-radius: 12% 100%;
    background:
      radial-gradient(
        circle at 18% 18%,
        rgba(240, 160, 75, 0.14),
        transparent 26%
      ),
      radial-gradient(
        circle at 82% 24%,
        rgba(212, 137, 28, 0.09),
        transparent 22%
      ),
      linear-gradient(180deg, #f6efe5 0%, #f3ede4 48%, #efe7dc 100%);
  }
}



/* =========================================================
   MMOCC - Latest News FINAL exact fix
   targets child theme blog section (#cl_blog)
   ========================================================= */

#cl_blog.cons_light_blog-list-area {
  padding: 78px 0 96px !important;
  background:
    radial-gradient(
      circle at 14% 14%,
      rgba(240, 160, 75, 0.06),
      transparent 22%
    ),
    radial-gradient(
      circle at 86% 18%,
      rgba(212, 137, 28, 0.04),
      transparent 18%
    ),
    linear-gradient(180deg, #f4eee5 0%, #efe7dc 100%) !important;
}

#cl_blog.cons_light_blog-list-area > .container {
  max-width: 1240px !important;
}

/* section title */
#cl_blog .section-title {
  text-align: center !important;
  margin-bottom: 38px !important;
}

#cl_blog .section-title h2 {
  color: #312922 !important;
  font-size: 58px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 10px !important;
}

#cl_blog .section-title p {
  color: #75675c !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* remove bullets and reset list */
#cl_blog ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#cl_blog li {
  list-style: none !important;
  margin: 0 0 30px !important;
  padding: 0 !important;
}

#cl_blog li::before,
#cl_blog li::marker {
  display: none !important;
  content: none !important;
}

/* card */
#cl_blog li article.article {
  display: flex !important;
  align-items: stretch !important;
  background: rgba(255, 253, 250, 0.97) !important;
  border: 1px solid rgba(138, 79, 40, 0.08) !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  box-shadow:
    0 16px 38px rgba(17, 24, 39, 0.06),
    0 6px 14px rgba(17, 24, 39, 0.03) !important;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease !important;
}

#cl_blog li article.article:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(212, 137, 28, 0.18) !important;
  box-shadow:
    0 24px 56px rgba(17, 24, 39, 0.1),
    0 10px 22px rgba(17, 24, 39, 0.05) !important;
}

/* image area */
#cl_blog .blog-post-thumbnail {
  flex: 0 0 38% !important;
  max-width: 38% !important;
  width: 38% !important;
  margin: 0 !important;
}

#cl_blog .blog-post-thumbnail a,
#cl_blog .blog-post-thumbnail img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

#cl_blog .blog-post-thumbnail img {
  min-height: 320px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  margin: 0 !important;
  float: none !important;
  box-shadow: none !important;
}

/* content area */
#cl_blog .box {
  flex: 0 0 62% !important;
  max-width: 62% !important;
  width: 62% !important;
  padding: 34px 34px 30px !important;
  background: linear-gradient(180deg, #fffdfa 0%, #faf6f0 100%) !important;
  display: flex !important;
  align-items: center !important;
}

#cl_blog .blog-content-wrapper {
  width: 100% !important;
}

/* title */
#cl_blog h3.title {
  margin: 0 0 14px !important;
  font-size: 30px !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  color: #2f2721 !important;
}

#cl_blog h3.title a {
  color: inherit !important;
  text-decoration: none !important;
}

/* remove meta row if theme injects it */
#cl_blog .entry-meta,
#cl_blog .post-date,
#cl_blog .posted-on,
#cl_blog .author,
#cl_blog .comments,
#cl_blog .cat-links {
  display: none !important;
}

/* excerpt */
#cl_blog .entry-content,
#cl_blog .entry-content p {
  margin: 0 !important;
  color: #6f6257 !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
}

/* mobile */
@media (max-width: 991px) {
  #cl_blog .section-title h2 {
    font-size: 42px !important;
  }

  #cl_blog li article.article {
    display: block !important;
  }

  #cl_blog .blog-post-thumbnail,
  #cl_blog .box {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  #cl_blog .blog-post-thumbnail img {
    min-height: 230px !important;
  }

  #cl_blog .box {
    padding: 24px 20px 22px !important;
  }

  #cl_blog h3.title {
    font-size: 24px !important;
  }
}

/* subtle glow */
.home .banner-slider .slider-content a::before,
.home .banner-slider .slider-content .btn::before,
.home .banner-slider .slider-content .button::before,
.home .banner-slider .slider-content .readmore a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.18) 35%,
    rgba(255, 255, 255, 0.34) 50%,
    rgba(255, 255, 255, 0.12) 65%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-130%);
  transition: transform 0.8s ease !important;
  pointer-events: none;
}

/* soft ring */
.home .banner-slider .slider-content a::after,
.home .banner-slider .slider-content .btn::after,
.home .banner-slider .slider-content .button::after,
.home .banner-slider .slider-content .readmore a::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.14);
  opacity: 0;
  transition: opacity 0.28s ease !important;
  pointer-events: none;
}

.home .banner-slider .slider-content a:hover,
.home .banner-slider .slider-content .btn:hover,
.home .banner-slider .slider-content .button:hover,
.home .banner-slider .slider-content .readmore a:hover {
  transform: translateY(-3px) scale(1.02) !important;
  letter-spacing: 0.08em !important;
  filter: brightness(1.04) !important;
  box-shadow:
    0 18px 38px rgba(138, 79, 40, 0.34),
    0 6px 16px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.home .banner-slider .slider-content a:hover::before,
.home .banner-slider .slider-content .btn:hover::before,
.home .banner-slider .slider-content .button:hover::before,
.home .banner-slider .slider-content .readmore a:hover::before {
  transform: translateX(130%);
}

.home .banner-slider .slider-content a:hover::after,
.home .banner-slider .slider-content .btn:hover::after,
.home .banner-slider .slider-content .button:hover::after,
.home .banner-slider .slider-content .readmore a:hover::after {
  opacity: 1;
}

/* =========================================================
   MMOCC - language switcher original size restore
   ========================================================= */

#mmocc-lang-slot {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  margin-left: 14px !important;
}

#mmocc-lang-slot > #trp-floater-ls.mmocc-lang-inside-nav {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  transform: none !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#mmocc-lang-slot
  > #trp-floater-ls.mmocc-lang-inside-nav
  #trp-floater-ls-current-language {
  display: none !important;
}

#mmocc-lang-slot
  > #trp-floater-ls.mmocc-lang-inside-nav
  #trp-floater-ls-language-list {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  flex-wrap: nowrap !important;
}

#mmocc-lang-slot
  > #trp-floater-ls.mmocc-lang-inside-nav
  #trp-floater-ls-language-list
  a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  height: 34px !important;
  min-width: 44px !important;
  padding: 7px 9px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  color: #4b5563 !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

#mmocc-lang-slot
  > #trp-floater-ls.mmocc-lang-inside-nav
  #trp-floater-ls-language-list
  a:hover {
  background: #f8f5ef !important;
  color: #d4891c !important;
  border-color: rgba(212, 137, 28, 0.25) !important;
}

#mmocc-lang-slot
  > #trp-floater-ls.mmocc-lang-inside-nav
  #trp-floater-ls-language-list
  a.trp-ls-shortcode-current-language,
#mmocc-lang-slot
  > #trp-floater-ls.mmocc-lang-inside-nav
  #trp-floater-ls-language-list
  a[aria-current="true"] {
  background: #d4891c !important;
  color: #ffffff !important;
  border-color: #d4891c !important;
}

#trp-floater-ls:not(.mmocc-lang-inside-nav) {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =========================================================
   MMOCC - FINAL hero title + paragraph + button
   ========================================================= */

.home .banner-slider .slider-content,
.home .banner-slider .slide-item .slider-content,
.home .banner-slider .slider-item .slider-content {
  position: relative !important;
  z-index: 6 !important;
  text-align: center !important;
  padding-top: 130px !important;
  padding-bottom: 72px !important;
}

.home .banner-slider .banner-table,
.home .banner-slider .banner-table-cell {
  vertical-align: middle !important;
}

.home .banner-slider .banner-table-cell {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

.home .banner-slider .slider-content .slider-title,
.home .banner-slider .slider-content .slider-title h1,
.home .banner-slider .slider-content .slider-title h2,
.home .banner-slider .slider-content h1,
.home .banner-slider .slider-content h2 {
  display: block !important;
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 auto 18px !important;
  font-family: "Oswald", "Arial Narrow", sans-serif !important;
  font-size: clamp(36px, 4.2vw, 64px) !important;
  line-height: 1.08 !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: #fff8ef !important;
  text-align: center !important;
  text-shadow:
    0 4px 16px rgba(0, 0, 0, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.home .banner-slider .slider-content p,
.home .banner-slider .slide-item .slider-content p,
.home .banner-slider .slider-item .slider-content p {
  max-width: 760px !important;
  margin: 0 auto 24px !important;
  font-family: "Roboto Condensed", Arial, sans-serif !important;
  font-size: clamp(15px, 1.15vw, 20px) !important;
  line-height: 1.7 !important;
  font-weight: 400 !important;
  color: rgba(255, 246, 235, 0.92) !important;
  text-align: center !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.24) !important;
}

.home .banner-slider .slider-content a,
.home .banner-slider .slider-content .btn,
.home .banner-slider .slider-content .button,
.home .banner-slider .slider-content .readmore a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 50px !important;
  padding: 0 26px !important;
  border-radius: 14px !important;
  font-family: "Oswald", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #fffdfa !important;
  background: linear-gradient(135deg, #d99745 0%, #8a4f28 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    0 12px 28px rgba(138, 79, 40, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease !important;
}

.home .banner-slider .slider-content a:hover,
.home .banner-slider .slider-content .btn:hover,
.home .banner-slider .slider-content .button:hover,
.home .banner-slider .slider-content .readmore a:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.03) !important;
  box-shadow:
    0 16px 34px rgba(138, 79, 40, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

@media (max-width: 1366px) {
  .home .banner-slider .slider-content,
  .home .banner-slider .slide-item .slider-content,
  .home .banner-slider .slider-item .slider-content {
    padding-top: 118px !important;
    padding-bottom: 64px !important;
  }

  .home .banner-slider .slider-content .slider-title,
  .home .banner-slider .slider-content .slider-title h1,
  .home .banner-slider .slider-content .slider-title h2,
  .home .banner-slider .slider-content h1,
  .home .banner-slider .slider-content h2 {
    font-size: clamp(34px, 4.8vw, 54px) !important;
    max-width: 860px !important;
    white-space: normal !important;
  }
}

@media (max-width: 1024px) {
  .home .banner-slider .slider-content,
  .home .banner-slider .slide-item .slider-content,
  .home .banner-slider .slider-item .slider-content {
    padding-top: 92px !important;
    padding-bottom: 50px !important;
  }

  .home .banner-slider .slider-content .slider-title,
  .home .banner-slider .slider-content .slider-title h1,
  .home .banner-slider .slider-content .slider-title h2,
  .home .banner-slider .slider-content h1,
  .home .banner-slider .slider-content h2 {
    font-size: clamp(30px, 6vw, 46px) !important;
    max-width: 92% !important;
    white-space: normal !important;
  }

  .home .banner-slider .slider-content p {
    max-width: 88% !important;
    font-size: 16px !important;
  }
}
/* =========================================================
   MMOCC - Breadcrumb visible below sticky header
   ========================================================= */

body:not(.home) section.breadcrumb {
  position: relative !important;
  margin-top: 72px !important;
  padding-top: 86px !important;
  padding-bottom: 86px !important;
  z-index: 1 !important;
  background-position: center center !important;
  background-size: cover !important;
}

body.admin-bar:not(.home) section.breadcrumb {
  margin-top: 104px !important; /* 72 + 32 */
}

body:not(.home) section.breadcrumb .container {
  position: relative !important;
  z-index: 2 !important;
}

/* dark overlay for premium look */
body:not(.home) section.breadcrumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(7, 12, 20, 0.34) 0%,
    rgba(7, 12, 20, 0.42) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* title */
body:not(.home) section.breadcrumb h2,
body:not(.home) section.breadcrumb .entry-title {
  position: relative !important;
  z-index: 2 !important;
  margin-bottom: 14px !important;
  font-family: "Oswald", sans-serif !important;
  font-size: clamp(38px, 4.2vw, 64px) !important;
  font-weight: 500 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  /* color: #f2a126 !important; */
  color: #e7b15f !important;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
  text-align: center !important;
}

/* breadcrumb trail */
body:not(.home) section.breadcrumb .breadcrumb-trail,
body:not(.home) section.breadcrumb nav,
body:not(.home) section.breadcrumb .breadcrumb-trail a,
body:not(.home) section.breadcrumb .breadcrumb-trail span {
  position: relative !important;
  z-index: 2 !important;
  font-family: "Oswald", sans-serif !important;
  font-size: 17px !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

body:not(.home) section.breadcrumb .breadcrumb-trail a {
  color: #f2a126 !important;
}

body:not(.home) section.breadcrumb .breadcrumb-trail span,
body:not(.home) section.breadcrumb .breadcrumb-trail .trail-end {
  color: #fff7ec !important;
}

@media (max-width: 1024px) {
  body:not(.home) section.breadcrumb {
    margin-top: 64px !important;
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }

  body.admin-bar:not(.home) section.breadcrumb {
    margin-top: 110px !important; /* 64 + 46 */
  }

  body:not(.home) section.breadcrumb h2,
  body:not(.home) section.breadcrumb .entry-title {
    font-size: clamp(30px, 7vw, 44px) !important;
  }
}
/* =========================================================
   MMOCC - stable dropdown arrow for Products and Services
   ========================================================= */

header.cons-agency
  .box-header-nav
  .main-menu
  > .menu-item-has-children
  > a::after,
header.cons-agency
  .box-header-nav
  .main-menu
  > .page_item_has_children
  > a::after {
  content: "" !important;
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  margin-left: 8px !important;
  vertical-align: middle !important;
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top: 6px solid currentColor !important;
  font-family: inherit !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: translateY(1px) !important;
}

/* hover/open state */
header.cons-agency
  .box-header-nav
  .main-menu
  > .menu-item-has-children:hover
  > a::after,
header.cons-agency
  .box-header-nav
  .main-menu
  > .menu-item-has-children:focus-within
  > a::after,
header.cons-agency
  .box-header-nav
  .main-menu
  > .page_item_has_children:hover
  > a::after,
header.cons-agency
  .box-header-nav
  .main-menu
  > .page_item_has_children:focus-within
  > a::after {
  border-top-color: var(--mmocc-accent-dark) !important;
}

/* =========================================================
   MMOCC - Premium footer widgets
   ========================================================= */

.site-footer {
  background: linear-gradient(180deg, #6f6f6f 0%, #666666 100%) !important;
}

.site-footer .widget {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 22px !important;
  padding: 34px 40px !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  height: 100% !important;
}

/* widget title */
.site-footer .widget-title,
.site-footer .widget h2 {
  font-family: "Oswald", sans-serif !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.02em !important;
  color: #fffaf3 !important;
  margin-bottom: 18px !important;
  text-transform: uppercase !important;
}

/* small underline */
.site-footer .widget-title::after,
.site-footer .widget h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin-top: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f0a04b 0%, #c67a1e 100%);
}

/* normal text */
.site-footer,
.site-footer p,
.site-footer li,
.site-footer span,
.site-footer div {
  color: rgba(255, 248, 238, 0.88) !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
}

/* links */
.site-footer a {
  color: #f0a04b !important;
  text-decoration: none !important;
  transition:
    color 0.25s ease,
    opacity 0.25s ease !important;
}

.site-footer a:hover {
  color: #ffd09a !important;
  opacity: 1 !important;
}

/* QR box */
.site-footer img {
  border-radius: 16px !important;
}

.site-footer .widget_text img,
.site-footer .textwidget img {
  padding: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16) !important;
}

/* contact labels */
.site-footer strong,
.site-footer b {
  color: #fffaf3 !important;
  font-weight: 500 !important;
}

/* contact section spacing */
.site-footer .widget p {
  margin-bottom: 10px !important;
}

/* make phone/email accent stand out */
.site-footer .widget a[href^="tel:"],
.site-footer .widget a[href^="mailto:"] {
  color: #f0a04b !important;
  font-weight: 500 !important;
}

/* copyright bar */
.sub-footer,
.sub-footer p,
.sub-footer div {
  background: #5d360d !important;
  color: rgba(255, 247, 236, 0.92) !important;
  font-size: 15px !important;
  letter-spacing: 0.01em !important;
}

/* responsive */
@media (max-width: 1024px) {
  .site-footer .widget {
    padding: 28px 24px !important;
    border-radius: 18px !important;
  }

  .site-footer .widget-title,
  .site-footer .widget h2 {
    font-size: 22px !important;
  }
}

/* =========================================================
   MMOCC - Footer ultra premium upgrade + animation
   ========================================================= */

.site-footer {
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(
      circle at 18% 20%,
      rgba(240, 160, 75, 0.1),
      transparent 24%
    ),
    radial-gradient(
      circle at 82% 18%,
      rgba(212, 137, 28, 0.08),
      transparent 20%
    ),
    linear-gradient(180deg, #656565 0%, #5c5c5c 48%, #555555 100%) !important;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.02) 0%,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.02) 100%
  );
  pointer-events: none;
}

.site-footer .container,
.site-footer .row,
.site-footer .widget {
  position: relative;
  z-index: 1;
}

/* 2-column balance after gallery removed */
.site-footer .col-md-6,
.site-footer .col-sm-6,
.site-footer .col-xs-12 {
  margin-bottom: 26px !important;
}

/* footer cards */
.site-footer .widget {
  position: relative !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.03) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 28px !important;
  padding: 38px 42px !important;
  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden !important;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease !important;
  animation: mmoccFooterCardFade 0.9s ease both;
}

.site-footer .widget:nth-child(1) {
  animation-delay: 0.08s;
}

.site-footer .widget:nth-child(2) {
  animation-delay: 0.18s;
}

.site-footer .widget::before {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 56%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 45%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.05) 55%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
}

.site-footer .widget:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(240, 160, 75, 0.22) !important;
  box-shadow:
    0 30px 64px rgba(0, 0, 0, 0.22),
    0 8px 18px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.site-footer .widget:hover::before {
  animation: mmoccFooterShine 1s ease;
}

/* titles */
.site-footer .widget-title,
.site-footer .widget h2 {
  position: relative !important;
  font-family: "Oswald", sans-serif !important;
  font-size: 30px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.02em !important;
  color: #fff9f1 !important;
  margin-bottom: 20px !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.16) !important;
}

.site-footer .widget-title::after,
.site-footer .widget h2::after {
  content: "";
  display: block;
  width: 86px;
  height: 3px;
  margin-top: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f3a64d 0%, #d98a22 55%, #8a4f28 100%);
  box-shadow: 0 0 12px rgba(240, 160, 75, 0.26);
  animation: mmoccFooterLinePulse 2.8s ease-in-out infinite;
}

/* text */
.site-footer,
.site-footer p,
.site-footer li,
.site-footer span,
.site-footer div {
  color: rgba(255, 247, 236, 0.9) !important;
  font-size: 17px !important;
  line-height: 1.85 !important;
}

/* section subheads inside widget */
.site-footer h3,
.site-footer h4 {
  color: #fffaf3 !important;
  font-family: "Oswald", sans-serif !important;
  font-size: 22px !important;
  margin-top: 18px !important;
  margin-bottom: 10px !important;
}

/* links */
.site-footer a {
  color: #f0a04b !important;
  text-decoration: none !important;
  transition:
    color 0.25s ease,
    text-shadow 0.25s ease,
    opacity 0.25s ease !important;
}

.site-footer a:hover {
  color: #ffd29d !important;
  text-shadow: 0 0 10px rgba(240, 160, 75, 0.18) !important;
}

/* QR box */
.site-footer .widget_text img,
.site-footer .textwidget img {
  display: block !important;
  border-radius: 20px !important;
  padding: 12px !important;
  background: #ffffff !important;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.18),
    0 4px 10px rgba(0, 0, 0, 0.08) !important;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease !important;
  animation: mmoccQrFloat 4.5s ease-in-out infinite;
}

.site-footer .widget:hover .widget_text img,
.site-footer .widget:hover .textwidget img {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow:
    0 22px 40px rgba(0, 0, 0, 0.22),
    0 6px 14px rgba(0, 0, 0, 0.1) !important;
}

/* important contact lines */
.site-footer .widget a[href^="tel:"],
.site-footer .widget a[href^="mailto:"] {
  color: #f0a04b !important;
  font-weight: 600 !important;
}

/* cleaner spacing */
.site-footer .widget p {
  margin-bottom: 10px !important;
}

.site-footer .widget br + br {
  display: none;
}

/* copyright */
.sub-footer,
.sub-footer p,
.sub-footer div {
  background: linear-gradient(
    90deg,
    #5b330d 0%,
    #74421d 50%,
    #5b330d 100%
  ) !important;
  color: rgba(255, 247, 236, 0.95) !important;
  font-size: 15px !important;
  letter-spacing: 0.01em !important;
}

/* animations */
@keyframes mmoccFooterCardFade {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mmoccFooterShine {
  from {
    left: -130%;
  }
  to {
    left: 140%;
  }
}

@keyframes mmoccFooterLinePulse {
  0%,
  100% {
    box-shadow: 0 0 8px rgba(240, 160, 75, 0.18);
    transform: scaleX(1);
  }
  50% {
    box-shadow: 0 0 16px rgba(240, 160, 75, 0.32);
    transform: scaleX(1.04);
  }
}

@keyframes mmoccQrFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@media (max-width: 1024px) {
  .site-footer .widget {
    padding: 28px 24px !important;
    border-radius: 22px !important;
  }

  .site-footer .widget-title,
  .site-footer .widget h2 {
    font-size: 24px !important;
  }

  .site-footer,
  .site-footer p,
  .site-footer li,
  .site-footer span,
  .site-footer div {
    font-size: 15px !important;
    line-height: 1.75 !important;
  }
}
/* =========================================================
   MMOCC - Footer smooth motion fix
   ========================================================= */

/* lighter, smoother card motion */
.site-footer .widget {
  will-change: transform, opacity !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.32s ease,
    background-color 0.32s ease !important;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* smoother hover */
.site-footer .widget:hover {
  transform: translate3d(0, -4px, 0) !important;
  border-color: rgba(240, 160, 75, 0.18) !important;
  box-shadow:
    0 22px 40px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* shine effect slower + softer */
.site-footer .widget::before {
  will-change: transform, opacity !important;
  opacity: 0.55 !important;
  animation: none !important;
}

.site-footer .widget:hover::before {
  animation: mmoccFooterShineSmooth 1.25s cubic-bezier(0.22, 1, 0.36, 1) 1 !important;
}

/* QR image - softer floating */
.site-footer .widget_text img,
.site-footer .textwidget img {
  will-change: transform !important;
  transform: translateZ(0) !important;
  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease !important;
  animation: mmoccQrFloatSmooth 6s ease-in-out infinite !important;
}

.site-footer .widget:hover .widget_text img,
.site-footer .widget:hover .textwidget img {
  transform: translate3d(0, -2px, 0) scale(1.01) !important;
  box-shadow:
    0 16px 28px rgba(0, 0, 0, 0.18),
    0 4px 10px rgba(0, 0, 0, 0.08) !important;
}

/* title underline pulse - reduce aggressive scaling */
.site-footer .widget-title::after,
.site-footer .widget h2::after {
  animation: mmoccFooterLinePulseSmooth 4s ease-in-out infinite !important;
}

/* disable expensive blur on weaker rendering paths */
.site-footer .widget {
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* keyframes */
@keyframes mmoccFooterShineSmooth {
  0% {
    left: -130%;
    opacity: 0;
  }
  18% {
    opacity: 0.45;
  }
  100% {
    left: 135%;
    opacity: 0;
  }
}

@keyframes mmoccQrFloatSmooth {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -2px, 0);
  }
}

@keyframes mmoccFooterLinePulseSmooth {
  0%,
  100% {
    transform: scaleX(1);
    opacity: 0.92;
    box-shadow: 0 0 6px rgba(240, 160, 75, 0.14);
  }
  50% {
    transform: scaleX(1.02);
    opacity: 1;
    box-shadow: 0 0 10px rgba(240, 160, 75, 0.22);
  }
}

/* optional: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .site-footer .widget,
  .site-footer .widget::before,
  .site-footer .widget_text img,
  .site-footer .textwidget img,
  .site-footer .widget-title::after,
  .site-footer .widget h2::after {
    animation: none !important;
    transition: none !important;
  }
}
/* =========================================================
   MMOCC - gradient bridge between remote section and footer
   ========================================================= */

.cons_light_client_logo_layout_two {
  position: relative !important;
  padding: 42px 0 !important;
  background:
    radial-gradient(
      circle at 18% 30%,
      rgba(240, 160, 75, 0.1),
      transparent 24%
    ),
    radial-gradient(
      circle at 82% 24%,
      rgba(212, 137, 28, 0.08),
      transparent 20%
    ),
    linear-gradient(180deg, #f6f4ef 0%, #efe7dc 38%, #d6d0c9 72%, #6a6a6a 100%) !important;
  overflow: hidden !important;
}
/* soft highlight layer */
.cons_light_client_logo_layout_two::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0) 42%
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0) 50%,
      rgba(255, 255, 255, 0.03) 100%
    );
  pointer-events: none;
}




/* =========================================================
   MMOCC - Our Teams FINAL organic image style
   full image + organic border + text below
   ========================================================= */

/* reset old widget heights */
.elementor-page-1437 .sina-team,
.elementor-page-1437 .sina-team-default,
.elementor-page-1437 .sina-team-clearfix.sina-team-box-move {
  height: auto !important;
  min-height: 0 !important;
}

/* whole team item */
.elementor-page-1437 .sina-team {
  position: relative !important;
  text-align: center !important;
}

/* remove card box look completely */
.elementor-page-1437 .sina-team-content {
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  display: block !important;
}

/* kill old pseudo backgrounds */
.elementor-page-1437 .sina-team-content::before,
.elementor-page-1437 .sina-team-content::after {
  content: none !important;
  display: none !important;
}

/* image wrapper */
.elementor-page-1437 .sina-team-thumb,
.elementor-page-1437 .sina-team-img {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 280px !important;
  margin: 0 0 16px !important;
  overflow: hidden !important;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% !important;
  background: transparent !important;
  box-shadow:
    0 14px 30px rgba(22, 32, 51, 0.1),
    0 4px 10px rgba(22, 32, 51, 0.05) !important;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease !important;
}

/* image */
.elementor-page-1437 .sina-team-thumb img,
.elementor-page-1437 .sina-team img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  box-shadow: none !important;
  transform: scale(1.02);
  transition: transform 0.35s ease !important;
}

/* hover */
.elementor-page-1437 .sina-team:hover .sina-team-thumb,
.elementor-page-1437 .sina-team:hover .sina-team-img {
  transform: translateY(-6px) !important;
  box-shadow:
    0 20px 38px rgba(22, 32, 51, 0.14),
    0 8px 16px rgba(22, 32, 51, 0.08) !important;
}

.elementor-page-1437 .sina-team:hover .sina-team-thumb img,
.elementor-page-1437 .sina-team:hover .sina-team img {
  transform: scale(1.05) !important;
}

/* name */
.elementor-page-1437 .sina-team-name,
.elementor-page-1437 .sina-team-name a,
.elementor-page-1437 .sina-team h3,
.elementor-page-1437 .sina-team h4 {
  position: static !important;
  display: block !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  background: transparent !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  text-align: center !important;
  color: #332b26 !important;
  text-shadow: none !important;
}

/* position */
.elementor-page-1437 .sina-team-position,
.elementor-page-1437 .sina-team-designation {
  position: static !important;
  display: block !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  background: transparent !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  color: #c8841f !important;
}

/* team label below */
.elementor-page-1437 .sina-team::after {
  display: block !important;
  position: static !important;
  transform: none !important;
  margin-top: 2px !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  color: #8a4f28 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* first row mapping */
.elementor-page-1437 .elementor-column:nth-child(1) .sina-team::after,
.elementor-page-1437 .elementor-column:nth-child(2) .sina-team::after {
  content: "Outsource Team-1";
}

.elementor-page-1437 .elementor-column:nth-child(3) .sina-team::after,
.elementor-page-1437 .elementor-column:nth-child(4) .sina-team::after {
  content: "Outsource Team-2";
}

/* hide old unwanted content */
.elementor-page-1437 .sina-team-desc,
.elementor-page-1437 .sina-team-text,
.elementor-page-1437 .sina-team p,
.elementor-page-1437 .sina-team .content,
.elementor-page-1437 .sina-team .team-content,
.elementor-page-1437 .sina-team-social,
.elementor-page-1437 .sina-team-link,
.elementor-page-1437 .sina-team-content .sina-icon,
.elementor-page-1437 .sina-team-content i,
.elementor-page-1437 .sina-team-content .fa,
.elementor-page-1437 .sina-team-content > div[style*="height: 200px"],
.elementor-page-1437 .sina-team-content div[style*="overflow: auto"] {
  display: none !important;
}

/* spacing */
.elementor-page-1437 .elementor-widget-sina_team {
  margin-bottom: 22px !important;
}

.elementor-page-1437 .elementor-column > .elementor-element-populated {
  padding: 12px !important;
}

/* tablet */
@media (max-width: 1024px) {
  .elementor-page-1437 .sina-team-thumb,
  .elementor-page-1437 .sina-team-img {
    height: 240px !important;
  }

  .elementor-page-1437 .sina-team-name,
  .elementor-page-1437 .sina-team-name a,
  .elementor-page-1437 .sina-team h3,
  .elementor-page-1437 .sina-team h4 {
    font-size: 21px !important;
  }
}

/* mobile */
@media (max-width: 767px) {
  .elementor-page-1437 .sina-team-thumb,
  .elementor-page-1437 .sina-team-img {
    height: 210px !important;
  }

  .elementor-page-1437 .sina-team-name,
  .elementor-page-1437 .sina-team-name a,
  .elementor-page-1437 .sina-team h3,
  .elementor-page-1437 .sina-team h4 {
    font-size: 18px !important;
  }

  .elementor-page-1437 .sina-team-position,
  .elementor-page-1437 .sina-team-designation,
  .elementor-page-1437 .sina-team::after {
    font-size: 10px !important;
  }
}

/* =========================================================
   MMOCC - Our Teams premium polish
   keep current layout, make it cleaner and more premium
   ========================================================= */

.elementor-page-1437 .sina-team {
  position: relative !important;
  text-align: center !important;
}

/* main card shell */
.elementor-page-1437 .sina-team-content {
  background: linear-gradient(180deg, #f8f4ed 0%, #efe7dc 100%) !important;
  border: 1px solid rgba(138, 79, 40, 0.08) !important;
  border-radius: 0 0 20px 20px !important;
  box-shadow:
    0 14px 30px rgba(22, 32, 51, 0.08),
    0 4px 10px rgba(22, 32, 51, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  padding: 10px 16px 14px !important;
  overflow: hidden !important;
  position: relative !important;
}

/* top image */
.elementor-page-1437 .sina-team img,
.elementor-page-1437 .sina-team .sina-team-async {
  width: 100% !important;
  height: 260px !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  border-radius: 22px 22px 0 0 !important;
  box-shadow: none !important;
  transition:
    transform 0.45s ease,
    filter 0.35s ease !important;
}

/* subtle luxury separator between image and text panel */
.elementor-page-1437 .sina-team-content::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 18px !important;
  right: 18px !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    rgba(138, 79, 40, 0) 0%,
    rgba(212, 137, 28, 0.22) 50%,
    rgba(138, 79, 40, 0) 100%
  ) !important;
}

/* hover */
.elementor-page-1437 .sina-team {
  transition: transform 0.3s ease !important;
}

.elementor-page-1437 .sina-team:hover {
  transform: translateY(-6px) !important;
}

.elementor-page-1437 .sina-team:hover .sina-team-content {
  box-shadow:
    0 22px 40px rgba(22, 32, 51, 0.12),
    0 8px 18px rgba(22, 32, 51, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  border-color: rgba(212, 137, 28, 0.16) !important;
}

.elementor-page-1437 .sina-team:hover img,
.elementor-page-1437 .sina-team:hover .sina-team-async {
  transform: scale(1.04) !important;
  filter: saturate(1.04) contrast(1.02) !important;
}

/* name */
.elementor-page-1437 .sina-team-name,
.elementor-page-1437 .sina-team-name a,
.elementor-page-1437 .sina-team h3,
.elementor-page-1437 .sina-team h4 {
  margin: 0 0 6px !important;
  padding-top: 10px !important;
  font-size: 18px !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  color: #312922 !important;
  letter-spacing: -0.01em !important;
  text-shadow: none !important;
}

/* position */
.elementor-page-1437 .sina-team-position,
.elementor-page-1437 .sina-team-designation {
  margin: 0 0 6px !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #d4891c !important;
}

/* team label */
.elementor-page-1437 .sina-team::after {
  display: block !important;
  margin-top: 2px !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #8a4f28 !important;
  opacity: 0.9 !important;
}

/* slightly tighter overall spacing */
.elementor-page-1437 .elementor-widget-sina_team {
  margin-bottom: 28px !important;
}

.elementor-page-1437 .elementor-column > .elementor-element-populated {
  padding: 10px !important;
}

/* mobile / tablet */
@media (max-width: 1024px) {
  .elementor-page-1437 .sina-team img,
  .elementor-page-1437 .sina-team .sina-team-async {
    height: 220px !important;
  }

  .elementor-page-1437 .sina-team h3,
  .elementor-page-1437 .sina-team h4 {
    font-size: 17px !important;
  }
}

@media (max-width: 767px) {
  .elementor-page-1437 .sina-team img,
  .elementor-page-1437 .sina-team .sina-team-async {
    height: 190px !important;
    border-radius: 18px 18px 0 0 !important;
  }

  .elementor-page-1437 .sina-team-content {
    border-radius: 0 0 16px 16px !important;
    padding: 8px 12px 12px !important;
  }

  .elementor-page-1437 .sina-team h3,
  .elementor-page-1437 .sina-team h4 {
    font-size: 16px !important;
  }
}
/* =========================================================
   MMOCC - Our Teams final role + team text inside bottom box
   ========================================================= */

/* beige bottom box a little taller */
.elementor-page-1437 .sina-team-content {
  min-height: 165px !important;
  padding: 14px 16px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* spacing */
.elementor-page-1437 .sina-team-name,
.elementor-page-1437 .sina-team-name a,
.elementor-page-1437 .sina-team h3,
.elementor-page-1437 .sina-team h4 {
  margin: 0 0 8px !important;
}

.elementor-page-1437 .sina-team-position,
.elementor-page-1437 .sina-team-designation {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 10px !important;
  padding: 7px 14px !important;
  min-height: 40px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #8a4f28 !important;
  background: linear-gradient(180deg, #fffaf3 0%, #f4e7d6 100%) !important;
  border: 1px solid rgba(212, 137, 28, 0.18) !important;
  border-radius: 999px !important;
  box-shadow:
    0 8px 16px rgba(22, 32, 51, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

.elementor-page-1437 .sina-team-position::before,
.elementor-page-1437 .sina-team-designation::before {
  content: "✦";
  display: inline-block;
  margin-right: 6px;
  color: #d4891c;
  font-size: 10px;
  line-height: 1;
}

/* don't use old outside team label */
.elementor-page-1437 .sina-team::after {
  display: none !important;
  content: none !important;
}

/* reuse real desc element for team text */
.elementor-page-1437 .sina-team-desc {
  display: block !important;
  width: 100% !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  min-height: 16px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
  overflow: visible !important;
}

/* clean old lorem text if any */
.elementor-page-1437 .sina-team-desc {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}

/* premium team text */
.elementor-page-1437 .sina-team-desc::before {
  display: block !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  color: #8a4f28 !important;
  opacity: 0.95 !important;
  content: "" !important;
}

/* Team-1 row */
.elementor-element-790c9f0 .elementor-column .sina-team-desc::before {
  content: "Outsource Team-1" !important;
}

/* Team-2 row */
.elementor-element-2e20604 .elementor-column .sina-team-desc::before {
  content: "Outsource Team-2" !important;
}

@media (max-width: 767px) {
  .elementor-page-1437 .sina-team-content {
    min-height: 150px !important;
    padding: 12px 12px 18px !important;
  }

  .elementor-page-1437 .sina-team-desc::before {
    font-size: 9px !important;
  }
}
/* don't use old outside team label */
.elementor-page-1437 .sina-team::after {
  display: none !important;
  content: none !important;
}

/* reuse real desc element for team text */
.elementor-page-1437 .sina-team-desc {
  display: block !important;
  width: 100% !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  min-height: 16px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
  overflow: visible !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}

.elementor-page-1437 .sina-team-desc::before {
  display: block !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  color: #8a4f28 !important;
  opacity: 0.95 !important;
  content: "" !important;
}

/* Outsource Team row */
.elementor-element-76d375e .elementor-column .sina-team-desc::before {
  content: "Outsource Team-1" !important;
}

/* Medical Team row */
.elementor-element-3c80407 .elementor-column .sina-team-desc::before {
  content: "Medical Team" !important;
}

/* =========================================================
   MMOCC - Our Teams team label FINAL FIX
   Elementor class based
   ========================================================= */

/* default: hide all team description labels */
body .elementor-1437 .sina-team-desc {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  opacity: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}

body .elementor-1437 .sina-team-desc::before,
body .elementor-1437 .sina-team-desc::after {
  display: none !important;
  content: none !important;
}

/* show only selected cards */
body .elementor-1437 .show-team-desc .sina-team-desc {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 16px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}

body .elementor-1437 .show-team-desc .sina-team-desc::before {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 16px !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  color: #8a4f28 !important;
}

/* team text by class */
body .elementor-1437 .show-team-desc.team-outsource-1 .sina-team-desc::before {
  content: "" !important;
}

body .elementor-1437 .show-team-desc.team-outsource-2 .sina-team-desc::before {
  content: "" !important;
}

body .elementor-1437 .show-team-desc.modern-team .sina-team-desc::before,
body .elementor-1437 .show-team-desc.team-modern .sina-team-desc::before {
  content: "Modern Team" !important;
}

body .elementor-1437 .show-team-desc.team-cloud-infra .sina-team-desc::before {
  content: "Cloud Infra Team" !important;
}

body
  .elementor-1437
  .show-team-desc.team-global-medical
  .sina-team-desc::before {
  content: "Global Medical Team" !important;
}

body .elementor-1437 .show-team-desc.team-medical .sina-team-desc::before {
  content: "Medical Team" !important;
}

body
  .elementor-1437
  .show-team-desc.team-legacy-global
  .sina-team-desc::before {
  content: "Legacy Global" !important;
}

body .elementor-1437 .show-team-desc.team-csharp .sina-team-desc::before {
  content: "C# Team" !important;
}

body .elementor-1437 .show-team-desc.team-java .sina-team-desc::before {
  content: "Java Team" !important;
}

body .elementor-1437 .show-team-desc.team-php .sina-team-desc::before {
  content: "PHP Team" !important;
}

body .elementor-1437 .show-team-desc.team-ui-ux .sina-team-desc::before {
  content: "UI/UX Team" !important;
}

body .elementor-1437 .show-team-desc.team-qa .sina-team-desc::before {
  content: "QA Team" !important;
}

body
  .elementor-1437
  .show-team-desc.team-project-management
  .sina-team-desc::before {
  content: "Project Management Team" !important;
}

/* =========================================================
   MMOCC - Single post remove sidebar/categories and full width
   ========================================================= */

/* hide right sidebar categories */
.single-post #secondary,
.single-post aside#secondary,
.single-post .widget-area {
  display: none !important;
}

/* make main content full width */
.single-post #primary,
.single-post main#primary,
.single-post .content-area {
  width: 100% !important;
  max-width: 960px !important;
  flex: 0 0 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

/* fix bootstrap column width */
.single-post #primary.col-lg-8,
.single-post #primary.col-md-8,
.single-post #primary.col-sm-12 {
  width: 100% !important;
  max-width: 960px !important;
  flex: 0 0 100% !important;
}

/* center page container */
.single-post #content .container,
.single-post .site-content .container {
  max-width: 1120px !important;
}

/* =========================================================
   MMOCC - Mobile header clean fix
   Hide desktop menu + language buttons on small screens
   Put this at the VERY END of style.css
   ========================================================= */

/* =========================================================
   MMOCC - Hide only Artibot "Contact us" text bubble
   Keep orange chat icon visible
   ========================================================= */

[class*="artibot-launcher-bubble"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =========================================================
   MMOCC - Header nav text force one line
   ========================================================= */

@media (min-width: 1025px) {
  header.cons-agency .box-header-nav .main-menu {
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }

  header.cons-agency .box-header-nav .main-menu > .menu-item {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }

  header.cons-agency .box-header-nav .main-menu .page_item a,
  header.cons-agency .box-header-nav .main-menu > .menu-item > a {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    text-wrap: nowrap !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    max-width: none !important;
    min-width: max-content !important;

    line-height: 1.2 !important;
    padding: 10px 10px !important;
    font-size: 13px !important;
  }

  /* Contact button also one line */
  header.cons-agency .box-header-nav .main-menu > .menu-button-contact > a,
  .menu-button-contact a {
    white-space: nowrap !important;
    min-width: max-content !important;
  }
}

/* =========================================================
   MMOCC - Myanmar nav font smaller only
   ========================================================= */

@media (min-width: 1025px) {
  html[lang^="my"]
    header.cons-agency
    .box-header-nav
    .main-menu
    > .menu-item
    > a,
  html[lang^="my"] header.cons-agency .box-header-nav .main-menu .page_item a,
  body.translatepress-my_MM
    header.cons-agency
    .box-header-nav
    .main-menu
    > .menu-item
    > a,
  body.translatepress-my_MM
    header.cons-agency
    .box-header-nav
    .main-menu
    .page_item
    a,
  body.trp-language-my_MM
    header.cons-agency
    .box-header-nav
    .main-menu
    > .menu-item
    > a,
  body.trp-language-my_MM
    header.cons-agency
    .box-header-nav
    .main-menu
    .page_item
    a {
    font-family: "pyidaungsu", "Myanmar3", sans-serif !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  html[lang^="my"] header.cons-agency .box-header-nav .main-menu,
  body.translatepress-my_MM header.cons-agency .box-header-nav .main-menu,
  body.trp-language-my_MM header.cons-agency .box-header-nav .main-menu {
    gap: 6px !important;
  }

  html[lang^="my"]
    header.cons-agency
    .box-header-nav
    .main-menu
    > .menu-button-contact
    > a,
  body.translatepress-my_MM
    header.cons-agency
    .box-header-nav
    .main-menu
    > .menu-button-contact
    > a,
  body.trp-language-my_MM
    header.cons-agency
    .box-header-nav
    .main-menu
    > .menu-button-contact
    > a {
    font-size: 10px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}




/* =========================================================
   MMOCC - Round flag images only in language buttons
   Keep button shape unchanged
   ========================================================= */

#mmocc-lang-slot
  > #trp-floater-ls.mmocc-lang-inside-nav
  #trp-floater-ls-language-list
  a
  img {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;

  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center center !important;

  display: inline-block !important;
  overflow: hidden !important;

  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.85),
    0 2px 5px rgba(0, 0, 0, 0.12) !important;
}

/* responsive - smaller flag on tablet/mobile if language buttons appear */
@media (max-width: 1024px) {
  #mmocc-lang-slot
    > #trp-floater-ls.mmocc-lang-inside-nav
    #trp-floater-ls-language-list
    a
    img {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
  }
}
/* =========================================================
   MMOCC - Round flags sharp fix
   Flag only, button unchanged
   ========================================================= */

#mmocc-lang-slot
  > #trp-floater-ls.mmocc-lang-inside-nav
  #trp-floater-ls-language-list
  a
  img {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;

  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center center !important;

  display: inline-block !important;
  vertical-align: middle !important;

  /* blur ဖြစ်စေတဲ့ shadow ကိုလျှော့ */
  box-shadow: none !important;
  filter: none !important;

  /* clean edge */
  outline: 1px solid rgba(255, 255, 255, 0.9) !important;
  outline-offset: 0 !important;
}

/* current orange button ထဲမှာ flag edge ပိုမြင်အောင် */
#mmocc-lang-slot
  > #trp-floater-ls.mmocc-lang-inside-nav
  #trp-floater-ls-language-list
  a.mmocc-lang-current
  img,
#mmocc-lang-slot
  > #trp-floater-ls.mmocc-lang-inside-nav
  #trp-floater-ls-language-list
  a.trp-ls-shortcode-current-language
  img,
#mmocc-lang-slot
  > #trp-floater-ls.mmocc-lang-inside-nav
  #trp-floater-ls-language-list
  a[aria-current="true"]
  img {
  outline: 1px solid rgba(255, 255, 255, 0.95) !important;
}

/* responsive */
@media (max-width: 1024px) {
  #mmocc-lang-slot
    > #trp-floater-ls.mmocc-lang-inside-nav
    #trp-floater-ls-language-list
    a
    img {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
  }
}
/* =========================================================
   MMOCC - Hide underline under blog section title
   ========================================================= */

#cl_blog .section-title::after,
#cl_blog h2.section-title::after,
section#cl_blog h2.section-title::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* =========================================================
   MMOCC - Remove Latest News title underline FINAL
   ========================================================= */

#cl_blog .section-title::before,
#cl_blog .section-title::after,
#cl_blog h2.section-title::before,
#cl_blog h2.section-title::after,
section#cl_blog .section-title::before,
section#cl_blog .section-title::after,
section#cl_blog h2.section-title::before,
section#cl_blog h2.section-title::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Some themes create underline from span pseudo */
#cl_blog .section-title span::before,
#cl_blog .section-title span::after,
section#cl_blog .section-title span::before,
section#cl_blog .section-title span::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* If underline is border/background on title itself */
#cl_blog h2.section-title,
section#cl_blog h2.section-title {
  border-bottom: 0 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* =========================================================
   MMOCC - Hide underline under Our Featured Projects title
   ========================================================= */

#rpwwt-recent-posts-widget-with-thumbnails-9 .section-title::before,
#rpwwt-recent-posts-widget-with-thumbnails-9 .section-title::after,
#rpwwt-recent-posts-widget-with-thumbnails-9 h2.section-title::before,
#rpwwt-recent-posts-widget-with-thumbnails-9 h2.section-title::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* title ကိုယ်တိုင်မှာ border/background line ပါလာရင်ပါ ဖျောက် */
#rpwwt-recent-posts-widget-with-thumbnails-9 .section-title,
#rpwwt-recent-posts-widget-with-thumbnails-9 h2.section-title {
  border-bottom: 0 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* =========================================================
   MMOCC - Hide Station P Attendance management blog card
   ========================================================= */

#cl_blog li:has(article#post-1106),
#cl_blog article#post-1106 {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* =========================================================
   MMOCC - Footer social media widget clean spacing
   ========================================================= */

.site-footer .mmocc-footer-qr {
  display: block !important;
  float: none !important;
  clear: both !important;

  width: 150px !important;
  max-width: 150px !important;
  height: auto !important;

  margin: 14px 0 16px 0 !important;
  padding: 10px !important;

  border-radius: 18px !important;
  background: #ffffff !important;
}

.site-footer .mmocc-footer-contact-lines {
  display: block !important;
  clear: both !important;
  margin: 0 !important;
  padding: 0 !important;
}

.site-footer .mmocc-footer-contact-lines p {
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  line-height: 1.55 !important;
  text-align: left !important;
}

.site-footer .mmocc-footer-contact-lines a {
  display: inline !important;
}

/* =========================================================
   MMOCC - Hide back-to-top completely
   Keep Artibot orange chat icon visible
   ========================================================= */

#back-to-top,
#back-to-top.progress-show,
#back-to-top.progress-hide,
a#back-to-top,
a[href="#"][data-tooltip="Back To Top"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
/* =========================================================
   MMOCC - Web Magic tab card background fix
   Remove background from Elementor column, keep only card style
   ========================================================= */

/* Application Method column background remove */
.elementor-element-343339c,
.elementor-element-343339c > .elementor-widget-wrap,
.elementor-element-343339c > .elementor-element-populated {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* If Elementor generated overlay/background layer exists */
.elementor-element-343339c::before,
.elementor-element-343339c::after,
.elementor-element-343339c > .elementor-element-populated::before,
.elementor-element-343339c > .elementor-element-populated::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* =========================================================
   MMOCC - Web Magic Application Method card final fix
   Single border only, no inner card background
   ========================================================= */

/* remove wrong background from column/widget wrapper */
.elementor-element-343339c,
.elementor-element-343339c > .elementor-element-populated,
.elementor-element-343339c .elementor-widget-wrap,
.elementor-element-343339c .elementor-widget-wrap.elementor-element-populated {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* remove inner duplicate card */
.elementor-element-343339c .elementor-icon-box-wrapper,
.elementor-element-343339c .elementor-icon-box-content,
.elementor-element-343339c .elementor-icon-box-icon {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* keep only the real outer card */
.elementor-element-343339c > .elementor-element-populated {
  border: 1px solid #f28c18 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* =========================================================
   MMOCC - Web Magic Application Method REAL hover fix
   Target actual Elementor widget-wrap
   ========================================================= */

/* normal */
body
  .elementor-2406
  .elementor-element.elementor-element-343339c
  > .elementor-widget-wrap.elementor-element-populated {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid #f28c18 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition:
    background-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease !important;
}

/* hover - this is the important part */
body
  .elementor-2406
  .elementor-element.elementor-element-343339c:hover
  > .elementor-widget-wrap.elementor-element-populated,
body
  .elementor-2406
  .elementor-element.elementor-element-343339c
  > .elementor-widget-wrap.elementor-element-populated:hover {
  background: #eeeeee !important;
  background-color: #eeeeee !important;
  background-image: none !important;
  border-color: #f28c18 !important;
  box-shadow: 0 8px 20px rgba(138, 79, 40, 0.08) !important;
}

/* keep inner icon box transparent so outer hover color can show */
body
  .elementor-2406
  .elementor-element.elementor-element-343339c
  .elementor-widget,
body
  .elementor-2406
  .elementor-element.elementor-element-343339c
  .elementor-widget-container,
body
  .elementor-2406
  .elementor-element.elementor-element-343339c
  .elementor-icon-box-wrapper,
body
  .elementor-2406
  .elementor-element.elementor-element-343339c
  .elementor-icon-box-content,
body
  .elementor-2406
  .elementor-element.elementor-element-343339c
  .elementor-icon-box-icon {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* optional: text/icon same as other cards on hover */
body
  .elementor-2406
  .elementor-element.elementor-element-343339c:hover
  .elementor-icon,
body
  .elementor-2406
  .elementor-element.elementor-element-343339c:hover
  .elementor-icon-box-title,
body
  .elementor-2406
  .elementor-element.elementor-element-343339c:hover
  .elementor-icon-box-title
  a {
  opacity: 1 !important;
}

/* =========================================================
   MMOCC - Breadcrumb real links style
   Works with JS output: Home > Current page
   ========================================================= */

body:not(.home) section.breadcrumb #breadcrumb-trail,
body:not(.home) section.breadcrumb .breadcrumb-trail,
body:not(.home) section.breadcrumb nav.breadcrumb-trail {
  display: block !important;
  text-align: center !important;
  position: relative !important;
  z-index: 2 !important;
}

body:not(.home) section.breadcrumb ul.mmocc-breadcrumb-real-links {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:not(.home) section.breadcrumb ul.mmocc-breadcrumb-real-links li {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  color: #fff7ec !important;
}

body:not(.home) section.breadcrumb ul.mmocc-breadcrumb-real-links > li::before,
body:not(.home) section.breadcrumb ul.mmocc-breadcrumb-real-links > li::after,
body:not(.home)
  section.breadcrumb
  ul.mmocc-breadcrumb-real-links
  > li
  + li::before,
body:not(.home)
  section.breadcrumb
  ul.mmocc-breadcrumb-real-links
  > li
  + li::after,
body:not(.home)
  section.breadcrumb
  ul.mmocc-breadcrumb-real-links
  .mmocc-breadcrumb-home::before,
body:not(.home)
  section.breadcrumb
  ul.mmocc-breadcrumb-real-links
  .mmocc-breadcrumb-home::after,
body:not(.home)
  section.breadcrumb
  ul.mmocc-breadcrumb-real-links
  .mmocc-breadcrumb-separator::before,
body:not(.home)
  section.breadcrumb
  ul.mmocc-breadcrumb-real-links
  .mmocc-breadcrumb-separator::after,
body:not(.home)
  section.breadcrumb
  ul.mmocc-breadcrumb-real-links
  .mmocc-breadcrumb-current::before,
body:not(.home)
  section.breadcrumb
  ul.mmocc-breadcrumb-real-links
  .mmocc-breadcrumb-current::after {
  content: none !important;
  display: none !important;
}

body:not(.home)
  section.breadcrumb
  ul.mmocc-breadcrumb-real-links
  .mmocc-breadcrumb-separator {
  display: inline-flex !important;
  align-items: center !important;
  color: #f2a126 !important;
  font-family: "Oswald", sans-serif !important;
  font-size: 17px !important;
  line-height: 1.5 !important;
  margin: 0 2px !important;
  padding: 0 !important;
}

body:not(.home) section.breadcrumb ul.mmocc-breadcrumb-real-links a {
  color: #fff7ec !important;
  text-decoration: none !important;
  font-family: "Oswald", sans-serif !important;
  font-size: 17px !important;
  line-height: 1.5 !important;
  position: relative !important;
  z-index: 3 !important;
  cursor: pointer !important;
}

body:not(.home) section.breadcrumb ul.mmocc-breadcrumb-real-links a:hover,
body:not(.home) section.breadcrumb ul.mmocc-breadcrumb-real-links a:focus {
  color: #f2a126 !important;
  text-decoration: none !important;
}
/* =========================================================
   MMOCC - Breadcrumb single arrow FINAL override
   Fix Home > > Current to Home > Current
   Put this at the VERY END of style.css
   ========================================================= */

/* remove all theme/plugin generated breadcrumb arrows */
body:not(.home) section.breadcrumb ul.mmocc-breadcrumb-real-links li::before,
body:not(.home) section.breadcrumb ul.mmocc-breadcrumb-real-links li::after,
body:not(.home)
  section.breadcrumb
  ul.mmocc-breadcrumb-real-links
  li
  + li::before,
body:not(.home)
  section.breadcrumb
  ul.mmocc-breadcrumb-real-links
  li
  + li::after,
body:not(.home)
  section.breadcrumb
  ul.mmocc-breadcrumb-real-links
  .mmocc-breadcrumb-home::before,
body:not(.home)
  section.breadcrumb
  ul.mmocc-breadcrumb-real-links
  .mmocc-breadcrumb-home::after,
body:not(.home)
  section.breadcrumb
  ul.mmocc-breadcrumb-real-links
  .mmocc-breadcrumb-current::before,
body:not(.home)
  section.breadcrumb
  ul.mmocc-breadcrumb-real-links
  .mmocc-breadcrumb-current::after {
  content: "" !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* hide the separator li's real text */
body:not(.home)
  section.breadcrumb
  ul.mmocc-breadcrumb-real-links
  .mmocc-breadcrumb-separator {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  margin: 0 8px !important;
  padding: 0 !important;
}

/* create only ONE visible arrow */
body:not(.home)
  section.breadcrumb
  ul.mmocc-breadcrumb-real-links
  .mmocc-breadcrumb-separator::before {
  content: ">" !important;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #f2a126 !important;
  font-family: "Oswald", sans-serif !important;
  font-size: 17px !important;
  line-height: 1.5 !important;
}

/* make sure separator after is never used */
body:not(.home)
  section.breadcrumb
  ul.mmocc-breadcrumb-real-links
  .mmocc-breadcrumb-separator::after {
  content: "" !important;
  display: none !important;
}

/* =========================================================
   MMOCC - Breadcrumb one arrow fix for span separator
   Put this at the VERY END of style.css
   ========================================================= */

body:not(.home) section.breadcrumb ul.mmocc-breadcrumb-real-links li::before,
body:not(.home) section.breadcrumb ul.mmocc-breadcrumb-real-links li::after,
body:not(.home)
  section.breadcrumb
  ul.mmocc-breadcrumb-real-links
  li
  + li::before,
body:not(.home)
  section.breadcrumb
  ul.mmocc-breadcrumb-real-links
  li
  + li::after,
body:not(.home)
  section.breadcrumb
  ul.mmocc-breadcrumb-real-links
  .mmocc-breadcrumb-home::before,
body:not(.home)
  section.breadcrumb
  ul.mmocc-breadcrumb-real-links
  .mmocc-breadcrumb-home::after,
body:not(.home)
  section.breadcrumb
  ul.mmocc-breadcrumb-real-links
  .mmocc-breadcrumb-current::before,
body:not(.home)
  section.breadcrumb
  ul.mmocc-breadcrumb-real-links
  .mmocc-breadcrumb-current::after,
body:not(.home) section.breadcrumb ul.mmocc-breadcrumb-real-links a::before,
body:not(.home) section.breadcrumb ul.mmocc-breadcrumb-real-links a::after {
  content: none !important;
  display: none !important;
}

body:not(.home)
  section.breadcrumb
  ul.mmocc-breadcrumb-real-links
  .mmocc-breadcrumb-separator {
  display: inline-block !important;
  margin-left: 10px !important;
  color: #f2a126 !important;
  font-family: "Oswald", sans-serif !important;
  font-size: 17px !important;
  line-height: 1.5 !important;
}

body:not(.home)
  section.breadcrumb
  ul.mmocc-breadcrumb-real-links
  .mmocc-breadcrumb-separator::before,
body:not(.home)
  section.breadcrumb
  ul.mmocc-breadcrumb-real-links
  .mmocc-breadcrumb-separator::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   MMOCC - Mobile drawer Contact Us background remove FINAL
   Put this at the VERY END of style.css
   ========================================================= */

@media (max-width: 1024px) {
  nav.mobile-menu ul.modal-menu li.menu-button-contact,
  nav.mobile-menu ul.modal-menu li.menu-button-contact:hover,
  nav.mobile-menu ul.modal-menu li.menu-button-contact:focus-within,
  nav.mobile-menu ul.modal-menu li.menu-button-contact.current-menu-item,
  nav.mobile-menu ul.modal-menu li.menu-button-contact.current_page_item {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  nav.mobile-menu ul.modal-menu li.menu-button-contact > a,
  nav.mobile-menu ul.modal-menu li.menu-button-contact > a:hover,
  nav.mobile-menu ul.modal-menu li.menu-button-contact > a:focus,
  nav.mobile-menu ul.modal-menu li.menu-button-contact > a:active,
  nav.mobile-menu ul.modal-menu li.menu-button-contact.current-menu-item > a,
  nav.mobile-menu ul.modal-menu li.menu-button-contact.current_page_item > a {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    color: #222b36 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    width: 100% !important;
    min-height: 50px !important;
    padding: 0 19px !important;
  }
}

/* =========================================================
   MMOCC - Mobile drawer Contact Us line + language switcher
   Put this at the VERY END of style.css
   ========================================================= */

@media (max-width: 1024px) {
  nav.mobile-menu ul.modal-menu li.menu-button-contact {
    border-bottom: 1px solid #e5e5e5 !important;
  }

  nav.mobile-menu ul.modal-menu li.mmocc-mobile-lang-item {
    list-style: none !important;
    margin: 0 !important;
    padding: 18px 40px !important;
    border-bottom: 1px solid #e5e5e5 !important;
    background: #ffffff !important;
  }

  nav.mobile-menu ul.modal-menu li.mmocc-mobile-lang-item::before,
  nav.mobile-menu ul.modal-menu li.mmocc-mobile-lang-item::after {
    content: none !important;
    display: none !important;
  }

  nav.mobile-menu
    ul.modal-menu
    li.mmocc-mobile-lang-item
    .mmocc-mobile-lang-title {
    display: block !important;
    margin-bottom: 10px !important;
    font-family: "Oswald", sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #6b7280 !important;
  }

  nav.mobile-menu
    ul.modal-menu
    li.mmocc-mobile-lang-item
    .mmocc-mobile-lang-list {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  nav.mobile-menu
    ul.modal-menu
    li.mmocc-mobile-lang-item
    .mmocc-mobile-lang-list
    a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;

    min-width: 48px !important;
    height: 34px !important;
    padding: 7px 10px !important;

    font-size: 12px !important;
    line-height: 1 !important;
    color: #4b5563 !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }

  nav.mobile-menu
    ul.modal-menu
    li.mmocc-mobile-lang-item
    .mmocc-mobile-lang-list
    a:hover,
  nav.mobile-menu
    ul.modal-menu
    li.mmocc-mobile-lang-item
    .mmocc-mobile-lang-list
    a.trp-ls-shortcode-current-language,
  nav.mobile-menu
    ul.modal-menu
    li.mmocc-mobile-lang-item
    .mmocc-mobile-lang-list
    a[aria-current="true"] {
    color: #ffffff !important;
    background: rgba(218, 86, 10, 0.82) !important;
    border-color: rgba(218, 86, 10, 0.55) !important;
  }

  nav.mobile-menu
    ul.modal-menu
    li.mmocc-mobile-lang-item
    .mmocc-mobile-lang-list
    img {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
  }
}
/* =========================================================
   MMOCC - Mobile drawer language switcher horizontal FINAL
   Put this at the VERY END of style.css
   ========================================================= */

@media (max-width: 1024px) {
  /* Language title ဖြုတ် */
  nav.mobile-menu
    ul.modal-menu
    li.mmocc-mobile-lang-item
    .mmocc-mobile-lang-title {
    display: none !important;
  }

  /* language row wrapper */
  nav.mobile-menu ul.modal-menu li.mmocc-mobile-lang-item {
    list-style: none !important;
    margin: 0 !important;
    padding: 20px 40px !important;
    border-bottom: 1px solid #e5e5e5 !important;
    background: #ffffff !important;
  }

  nav.mobile-menu ul.modal-menu li.mmocc-mobile-lang-item,
  nav.mobile-menu ul.modal-menu li.mmocc-mobile-lang-item * {
    box-sizing: border-box !important;
  }

  nav.mobile-menu
    ul.modal-menu
    li.mmocc-mobile-lang-item
    .mmocc-mobile-lang-slot,
  nav.mobile-menu
    ul.modal-menu
    li.mmocc-mobile-lang-item
    .mmocc-mobile-lang-list,
  nav.mobile-menu ul.modal-menu li.mmocc-mobile-lang-item .trp-language-wrap,
  nav.mobile-menu
    ul.modal-menu
    li.mmocc-mobile-lang-item
    .trp-language-wrap-top {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;

    width: auto !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  /* individual language buttons */
  nav.mobile-menu
    ul.modal-menu
    li.mmocc-mobile-lang-item
    .mmocc-mobile-lang-list
    a,
  nav.mobile-menu ul.modal-menu li.mmocc-mobile-lang-item .trp-language-wrap a,
  nav.mobile-menu
    ul.modal-menu
    li.mmocc-mobile-lang-item
    .trp-language-wrap-top
    a {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    width: auto !important;
    min-width: 92px !important;
    max-width: none !important;
    height: 48px !important;

    margin: 0 !important;
    padding: 0 18px !important;

    font-family: "Oswald", sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;

    color: #7b8794 !important;
    background: #e8f8ff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  /* active/current language */
  nav.mobile-menu
    ul.modal-menu
    li.mmocc-mobile-lang-item
    .mmocc-mobile-lang-list
    a.trp-ls-shortcode-current-language,
  nav.mobile-menu
    ul.modal-menu
    li.mmocc-mobile-lang-item
    .mmocc-mobile-lang-list
    a[aria-current="true"],
  nav.mobile-menu
    ul.modal-menu
    li.mmocc-mobile-lang-item
    .trp-language-wrap
    a.trp-ls-shortcode-current-language,
  nav.mobile-menu
    ul.modal-menu
    li.mmocc-mobile-lang-item
    .trp-language-wrap
    a[aria-current="true"] {
    color: #ffffff !important;
    background: rgba(218, 86, 10, 0.72) !important;
    border-color: rgba(218, 86, 10, 0.55) !important;
  }

  /* flags */
  nav.mobile-menu ul.modal-menu li.mmocc-mobile-lang-item img {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;

    border-radius: 50% !important;
    object-fit: cover !important;
    display: inline-block !important;
    margin: 0 !important;
  }
}
/* =========================================================
   MMOCC - CLEAN mobile/tablet header + MENU + Sakura
   Use this as the ONLY final mobile header fix
   Put at VERY END of style.css
   ========================================================= */

@media (max-width: 1024px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Fixed header */
  header.cons-agency,
  header.cons-agency .nav-classic {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100vw !important;
    max-width: 100vw !important;
    height: 64px !important;
    min-height: 64px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: rgba(255, 252, 248, 0.98) !important;
    overflow: hidden !important;
    z-index: 999999 !important;
  }

  body.admin-bar header.cons-agency,
  body.admin-bar header.cons-agency .nav-classic {
    top: 46px !important;
  }

  /* Sakura / gradient layer */
  header.cons-agency .mmocc-header-gradient,
  header.cons-agency .mmocc-sakura-layer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  header.cons-agency .mmocc-header-gradient {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
  }

  header.cons-agency .mmocc-sakura-layer {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 64px !important;
    overflow: hidden !important;
    z-index: 1 !important;
  }

  header.cons-agency .mmocc-sakura {
    display: block !important;
    visibility: visible !important;

    position: absolute !important;
    top: -18px !important;

    width: 10px !important;
    height: 8px !important;

    opacity: 0 !important;

    animation-name: mmocc-sakura-fall-mobile !important;
    animation-duration: 7s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    animation-fill-mode: both !important;
    animation-play-state: running !important;

    will-change: transform, opacity !important;
  }

  header.cons-agency .mmocc-sakura:nth-child(1) {
    left: 6% !important;
    animation-duration: 6.5s !important;
    animation-delay: 0s !important;
  }

  header.cons-agency .mmocc-sakura:nth-child(2) {
    left: 20% !important;
    animation-duration: 8s !important;
    animation-delay: -2s !important;
  }

  header.cons-agency .mmocc-sakura:nth-child(3) {
    left: 36% !important;
    animation-duration: 7.2s !important;
    animation-delay: -4s !important;
  }

  header.cons-agency .mmocc-sakura:nth-child(4) {
    left: 52% !important;
    animation-duration: 8.5s !important;
    animation-delay: -1s !important;
  }

  header.cons-agency .mmocc-sakura:nth-child(5) {
    left: 68% !important;
    animation-duration: 7.5s !important;
    animation-delay: -3s !important;
  }

  header.cons-agency .mmocc-sakura:nth-child(6) {
    left: 84% !important;
    animation-duration: 9s !important;
    animation-delay: -5s !important;
  }

  /* Header content */
  header.cons-agency .nav-classic .container,
  header.cons-agency .nav-classic .row,
  header.cons-agency .nav-classic [class*="col-"],
  header.cons-agency .header-middle-inner {
    position: relative !important;
    z-index: 5 !important;

    width: 100% !important;
    max-width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;

    margin: 0 !important;
    padding: 0 12px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    overflow: visible !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  header.cons-agency .site-branding {
    position: relative !important;
    z-index: 6 !important;

    height: 64px !important;
    min-height: 64px !important;

    width: auto !important;
    max-width: calc(100vw - 96px) !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;

    overflow: visible !important;
    flex: 0 1 auto !important;
    transform: none !important;
  }

  header.cons-agency .brandinglogo-wrap {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;

    max-width: calc(100vw - 116px) !important;
    overflow: hidden !important;

    position: relative !important;
    z-index: 6 !important;
  }

  header.cons-agency .site-branding img.custom-logo,
  header.cons-agency .brandinglogo-wrap .custom-logo-link img.custom-logo {
    display: block !important;
    width: auto !important;
    max-width: 165px !important;
    height: 32px !important;
    max-height: 32px !important;
    object-fit: contain !important;
  }

  header.cons-agency .mmocc-anniversary-badge img {
    display: block !important;
    width: auto !important;
    height: 24px !important;
    max-height: 24px !important;
    object-fit: contain !important;
  }

  /* Hide desktop nav/language on tablet/mobile */
  header.cons-agency .nav-menu,
  header.cons-agency .nav-menu .box-header-nav,
  header.cons-agency .box-header-nav .main-menu,
  #mmocc-lang-slot,
  #trp-floater-ls.mmocc-lang-inside-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

    width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    max-height: 0 !important;

    overflow: hidden !important;
  }

  /* MENU button */
  header.cons-agency button.toggle,
  header.cons-agency button.nav-toggle,
  header.cons-agency button.mobile-nav-toggle,
  header.cons-agency button.mmocc-fixed-mobile-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;

    position: fixed !important;
    top: 10px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;

    width: auto !important;
    min-width: 74px !important;
    max-width: none !important;
    height: 44px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 0 !important;

    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    gap: 5px !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    color: #222b36 !important;
    font-family: Arial, sans-serif !important;
    font-size: 0 !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-indent: 0 !important;
    white-space: nowrap !important;

    transform: none !important;
    rotate: 0deg !important;
    clip: auto !important;
    clip-path: none !important;
    overflow: visible !important;

    z-index: 10000000 !important;
  }

  body.admin-bar header.cons-agency button.toggle,
  body.admin-bar header.cons-agency button.nav-toggle,
  body.admin-bar header.cons-agency button.mobile-nav-toggle,
  body.admin-bar header.cons-agency button.mmocc-fixed-mobile-toggle {
    top: 56px !important;
  }

  /* Hide original theme spans */
  header.cons-agency button.mmocc-fixed-mobile-toggle > span {
    display: none !important;
  }

  /* Show only custom label/icon */
  header.cons-agency button.mmocc-fixed-mobile-toggle > span.mmocc-toggle-label,
  header.cons-agency button.mmocc-fixed-mobile-toggle > span.mmocc-toggle-icon {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: static !important;

    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #222b36 !important;
    background: transparent !important;

    text-indent: 0 !important;
    text-transform: none !important;
    clip: auto !important;
    clip-path: none !important;
    overflow: visible !important;

    transform: none !important;
    rotate: 0deg !important;
  }

  header.cons-agency button.mmocc-fixed-mobile-toggle > span.mmocc-toggle-label {
    order: 1 !important;
    font-family: Arial, sans-serif !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
  }

  header.cons-agency button.mmocc-fixed-mobile-toggle > span.mmocc-toggle-icon {
    order: 2 !important;
    font-size: 19px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
  }

  header.cons-agency button.mmocc-fixed-mobile-toggle::before,
  header.cons-agency button.mmocc-fixed-mobile-toggle::after,
  header.cons-agency button.mmocc-fixed-mobile-toggle span::before,
  header.cons-agency button.mmocc-fixed-mobile-toggle span::after {
    content: none !important;
    display: none !important;
  }
}

@media (max-width: 420px) {
  header.cons-agency .site-branding img.custom-logo,
  header.cons-agency .brandinglogo-wrap .custom-logo-link img.custom-logo {
    max-width: 150px !important;
    height: 30px !important;
    max-height: 30px !important;
  }

  header.cons-agency .mmocc-anniversary-badge img {
    height: 22px !important;
    max-height: 22px !important;
  }

  header.cons-agency button.toggle,
  header.cons-agency button.nav-toggle,
  header.cons-agency button.mobile-nav-toggle,
  header.cons-agency button.mmocc-fixed-mobile-toggle {
    right: 8px !important;
    min-width: 70px !important;
  }

  header.cons-agency button.mmocc-fixed-mobile-toggle > span.mmocc-toggle-label {
    font-size: 11px !important;
  }

  header.cons-agency button.mmocc-fixed-mobile-toggle > span.mmocc-toggle-icon {
    font-size: 18px !important;
  }
}

/* Mobile-safe Sakura animation */
@keyframes mmocc-sakura-fall-mobile {
  0% {
    transform: translate3d(0, -18px, 0) rotate(0deg) scale(0.75);
    opacity: 0;
  }

  12% {
    opacity: 0.55;
  }

  50% {
    transform: translate3d(34px, 38px, 0) rotate(165deg) scale(0.75);
    opacity: 0.42;
  }

  100% {
    transform: translate3d(72px, 88px, 0) rotate(330deg) scale(0.75);
    opacity: 0;
  }
}
/* =========================================================
   MMOCC - Featured Projects CLEAN final
   Keep only this one block for Featured Projects
   ========================================================= */

section.cons_light_feature.team-list.style1,
section.cons_light_feature.team-list.style1 .cl-section-wrap,
section.cons_light_feature.team-list.style1 > .container,
section.cons_light_feature.team-list.style1 .container,
section.cons_light_feature.team-list.style1 .row,
section.cons_light_feature.team-list.style1 .row > div {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

section.cons_light_feature.team-list.style1 {
  position: relative !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  background: linear-gradient(180deg, #f3ede4 0%, #efe7dc 100%) !important;
}

#rpwwt-recent-posts-widget-with-thumbnails-9 {
  position: relative !important;
  width: 100% !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 58px 0 78px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: transparent !important;
  box-shadow: none !important;
}

#rpwwt-recent-posts-widget-with-thumbnails-9::before,
#rpwwt-recent-posts-widget-with-thumbnails-9::after {
  content: none !important;
  display: none !important;
}

#rpwwt-recent-posts-widget-with-thumbnails-9 > h2.section-title,
#rpwwt-recent-posts-widget-with-thumbnails-9 .section-title {
  display: block !important;
  position: relative !important;
  z-index: 5 !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 auto 34px !important;
  padding: 0 16px !important;

  text-align: center !important;
  float: none !important;
  clear: both !important;

  transform: none !important;
  left: auto !important;
  right: auto !important;

  opacity: 1 !important;
  visibility: visible !important;

  color: #332b26 !important;
  font-family: "Oswald", sans-serif !important;
  font-size: 42px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  box-sizing: border-box !important;
}

#recent_posts_with_thumbnail {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 30px !important;

  width: max-content !important;
  max-width: none !important;

  position: relative !important;
  z-index: 1 !important;

  animation: mmoccFeaturedMarqueeMove 28s linear infinite !important;
  will-change: transform !important;
}

#recent_posts_with_thumbnail:hover {
  animation-play-state: paused !important;
}

#recent_posts_with_thumbnail > .feature-list {
  flex: 0 0 340px !important;
  width: 340px !important;
  max-width: 340px !important;
}

#recent_posts_with_thumbnail > .feature-list .box {
  height: 100% !important;
  background: rgba(255, 253, 250, 0.96) !important;
  border-radius: 26px !important;
  overflow: hidden !important;
}

@keyframes mmoccFeaturedMarqueeMove {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(-50% - 15px), 0, 0);
  }
}

@media (max-width: 1024px) {
  #rpwwt-recent-posts-widget-with-thumbnails-9 {
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 44px !important;
    padding-bottom: 68px !important;
  }

  #rpwwt-recent-posts-widget-with-thumbnails-9 > h2.section-title,
  #rpwwt-recent-posts-widget-with-thumbnails-9 .section-title {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 30px !important;
    padding: 0 16px !important;
    font-size: 34px !important;
    text-align: center !important;
    transform: none !important;
  }

  #recent_posts_with_thumbnail > .feature-list {
    flex: 0 0 300px !important;
    width: 300px !important;
    max-width: 300px !important;
  }
}

@media (max-width: 767px) {
  #rpwwt-recent-posts-widget-with-thumbnails-9 {
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 34px !important;
    padding-bottom: 56px !important;
  }

  #rpwwt-recent-posts-widget-with-thumbnails-9 > h2.section-title,
  #rpwwt-recent-posts-widget-with-thumbnails-9 .section-title {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto 24px !important;
    padding: 0 12px !important;

    font-size: 27px !important;
    line-height: 1.2 !important;

    text-align: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  #recent_posts_with_thumbnail {
    gap: 18px !important;
    animation-duration: 18s !important;
  }

  #recent_posts_with_thumbnail > .feature-list {
    flex: 0 0 240px !important;
    width: 240px !important;
    max-width: 240px !important;
  }
}
/* =========================================================
   MMOCC - Featured Projects MOBILE compact card height fix
   Put at VERY END of style.css
   ========================================================= */

@media (max-width: 767px) {
  /* whole featured area shorter */
  section.cons_light_feature.team-list.style1 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  #rpwwt-recent-posts-widget-with-thumbnails-9 {
    padding-top: 28px !important;
    padding-bottom: 34px !important;
    overflow: hidden !important;
  }

  #rpwwt-recent-posts-widget-with-thumbnails-9 > h2.section-title,
  #rpwwt-recent-posts-widget-with-thumbnails-9 .section-title {
    margin-bottom: 18px !important;
    font-size: 25px !important;
    line-height: 1.15 !important;
  }

  /* marquee row */
  #recent_posts_with_thumbnail {
    gap: 16px !important;
    align-items: stretch !important;
  }

  /* card width */
  #recent_posts_with_thumbnail > .feature-list {
    flex: 0 0 220px !important;
    width: 220px !important;
    max-width: 220px !important;
  }

  /* card height compact */
  #recent_posts_with_thumbnail > .feature-list .box {
    height: 330px !important;
    min-height: 330px !important;
    max-height: 330px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  /* image height reduce */
  #recent_posts_with_thumbnail .feature-list figure,
  #recent_posts_with_thumbnail .feature-list .box > a:first-child {
    display: block !important;
    height: 170px !important;
    max-height: 170px !important;
    overflow: hidden !important;
  }

  #recent_posts_with_thumbnail .feature-list figure img,
  #recent_posts_with_thumbnail .feature-list .box img,
  #rpwwt-recent-posts-widget-with-thumbnails-9 img {
    display: block !important;
    width: 100% !important;
    height: 170px !important;
    max-height: 170px !important;
    object-fit: cover !important;
    margin: 0 !important;
    float: none !important;
  }

  /* bottom content shorter */
  #recent_posts_with_thumbnail .bottom-content {
    height: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;

    padding: 16px 12px 14px !important;
    text-align: center !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
  }

  /* orange featured badge smaller */
  #recent_posts_with_thumbnail .icon-box {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;

    margin: -43px auto 12px !important;
    padding: 0 !important;
  }

  #recent_posts_with_thumbnail .icon-box span {
    font-size: 8px !important;
    line-height: 1 !important;
  }

  /* title compact */
  #recent_posts_with_thumbnail .rpwwt-post-title,
  #recent_posts_with_thumbnail .rpwwt-post-title a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;

    max-height: 46px !important;
    overflow: hidden !important;

    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }

  /* hide excerpt on mobile to reduce card height */
  #recent_posts_with_thumbnail .rpwwt-post-excerpt {
    display: none !important;
  }
}
/* =========================================================
   MMOCC - Featured Projects premium laptop/tablet card fix
   Put at VERY END of style.css
   ========================================================= */

/* laptop / desktop normal premium card */
@media (min-width: 1025px) {
  #rpwwt-recent-posts-widget-with-thumbnails-9 {
    max-width: 1280px !important;
    padding-top: 64px !important;
    padding-bottom: 86px !important;
  }

  #rpwwt-recent-posts-widget-with-thumbnails-9 > h2.section-title,
  #rpwwt-recent-posts-widget-with-thumbnails-9 .section-title {
    margin-bottom: 42px !important;
    font-size: 44px !important;
    line-height: 1.12 !important;
  }

  #recent_posts_with_thumbnail {
    gap: 36px !important;
    align-items: stretch !important;
  }

  #recent_posts_with_thumbnail > .feature-list {
    flex: 0 0 320px !important;
    width: 320px !important;
    max-width: 320px !important;
  }

  #recent_posts_with_thumbnail > .feature-list .box {
    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;

    border-radius: 28px !important;
    overflow: hidden !important;

    background: linear-gradient(180deg, #fffdfa 0%, #fbf6ef 100%) !important;
    border: 1px solid rgba(138, 79, 40, 0.08) !important;

    box-shadow:
      0 22px 48px rgba(22, 32, 51, 0.08),
      0 8px 18px rgba(22, 32, 51, 0.04),
      inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;

    transition:
      transform 0.32s ease,
      box-shadow 0.32s ease,
      border-color 0.32s ease !important;
  }

  #recent_posts_with_thumbnail > .feature-list .box:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(212, 137, 28, 0.22) !important;
    box-shadow:
      0 30px 64px rgba(22, 32, 51, 0.13),
      0 12px 24px rgba(22, 32, 51, 0.07),
      inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
  }

  #recent_posts_with_thumbnail .feature-list figure,
  #recent_posts_with_thumbnail .feature-list .box > a:first-child {
    display: block !important;
    height: 265px !important;
    max-height: 265px !important;
    overflow: hidden !important;
  }

  #recent_posts_with_thumbnail .feature-list figure img,
  #recent_posts_with_thumbnail .feature-list .box img {
    display: block !important;
    width: 100% !important;
    height: 265px !important;
    max-height: 265px !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 !important;
    float: none !important;
    transition: transform 0.42s ease, filter 0.32s ease !important;
  }

  #recent_posts_with_thumbnail > .feature-list .box:hover img {
    transform: scale(1.045) !important;
    filter: saturate(1.04) contrast(1.02) !important;
  }

  #recent_posts_with_thumbnail .bottom-content {
    height: 235px !important;
    min-height: 235px !important;
    max-height: 235px !important;

    padding: 54px 24px 24px !important;
    text-align: center !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    overflow: hidden !important;
    background: linear-gradient(180deg, #fffdfa 0%, #fbf6ef 100%) !important;
  }

  #recent_posts_with_thumbnail .icon-box {
    width: 86px !important;
    height: 86px !important;
    min-width: 86px !important;
    min-height: 86px !important;

    margin: -98px auto 24px !important;
    padding: 0 !important;

    border-radius: 999px !important;
    background: linear-gradient(135deg, #ff9d22 0%, #e98513 100%) !important;
    box-shadow:
      0 16px 28px rgba(232, 133, 19, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  }

  #recent_posts_with_thumbnail .icon-box span {
    font-size: 12px !important;
    line-height: 1 !important;
    color: #fff7ec !important;
  }

  #recent_posts_with_thumbnail .rpwwt-post-title,
  #recent_posts_with_thumbnail .rpwwt-post-title a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;

    max-height: 62px !important;
    overflow: hidden !important;

    margin: 0 0 14px !important;

    color: #2f2924 !important;
    font-size: 24px !important;
    line-height: 1.28 !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  #recent_posts_with_thumbnail .rpwwt-post-excerpt {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;

    max-height: 72px !important;
    overflow: hidden !important;

    margin: 0 !important;

    color: #70645a !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    text-align: center !important;
  }
}

/* tablet card: smaller but still premium */
@media (min-width: 768px) and (max-width: 1024px) {
  #rpwwt-recent-posts-widget-with-thumbnails-9 {
    max-width: 100% !important;
    padding-top: 48px !important;
    padding-bottom: 72px !important;
  }

  #rpwwt-recent-posts-widget-with-thumbnails-9 > h2.section-title,
  #rpwwt-recent-posts-widget-with-thumbnails-9 .section-title {
    margin-bottom: 34px !important;
    font-size: 36px !important;
    line-height: 1.15 !important;
  }

  #recent_posts_with_thumbnail {
    gap: 28px !important;
    align-items: stretch !important;
  }

  #recent_posts_with_thumbnail > .feature-list {
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 280px !important;
  }

  #recent_posts_with_thumbnail > .feature-list .box {
    height: 445px !important;
    min-height: 445px !important;
    max-height: 445px !important;

    border-radius: 24px !important;
    overflow: hidden !important;

    background: linear-gradient(180deg, #fffdfa 0%, #fbf6ef 100%) !important;
    border: 1px solid rgba(138, 79, 40, 0.08) !important;

    box-shadow:
      0 18px 38px rgba(22, 32, 51, 0.08),
      0 6px 14px rgba(22, 32, 51, 0.04),
      inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
  }

  #recent_posts_with_thumbnail .feature-list figure,
  #recent_posts_with_thumbnail .feature-list .box > a:first-child {
    display: block !important;
    height: 230px !important;
    max-height: 230px !important;
    overflow: hidden !important;
  }

  #recent_posts_with_thumbnail .feature-list figure img,
  #recent_posts_with_thumbnail .feature-list .box img {
    display: block !important;
    width: 100% !important;
    height: 230px !important;
    max-height: 230px !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 !important;
    float: none !important;
  }

  #recent_posts_with_thumbnail .bottom-content {
    height: 215px !important;
    min-height: 215px !important;
    max-height: 215px !important;

    padding: 48px 20px 20px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    text-align: center !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, #fffdfa 0%, #fbf6ef 100%) !important;
  }

  #recent_posts_with_thumbnail .icon-box {
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    min-height: 76px !important;

    margin: -88px auto 20px !important;
    padding: 0 !important;

    border-radius: 999px !important;
    background: linear-gradient(135deg, #ff9d22 0%, #e98513 100%) !important;
    box-shadow:
      0 14px 24px rgba(232, 133, 19, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  }

  #recent_posts_with_thumbnail .icon-box span {
    font-size: 10px !important;
    line-height: 1 !important;
    color: #fff7ec !important;
  }

  #recent_posts_with_thumbnail .rpwwt-post-title,
  #recent_posts_with_thumbnail .rpwwt-post-title a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;

    max-height: 54px !important;
    overflow: hidden !important;

    margin: 0 0 12px !important;

    color: #2f2924 !important;
    font-size: 20px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  #recent_posts_with_thumbnail .rpwwt-post-excerpt {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;

    max-height: 48px !important;
    overflow: hidden !important;

    margin: 0 !important;

    color: #70645a !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    text-align: center !important;
  }
}

/* =========================================================
   MMOCC - Featured Projects FINAL: hide categories + fix badge position
   Put at VERY END of style.css
   ========================================================= */

/* 1) Hide categories / description / excerpt */
#recent_posts_with_thumbnail .rpwwt-post-categories,
#recent_posts_with_thumbnail .rpwwt-post-excerpt,
#recent_posts_with_thumbnail .rpwwt-post-date,
#recent_posts_with_thumbnail .rpwwt-post-author,
#recent_posts_with_thumbnail .rpwwt-post-comments,
#recent_posts_with_thumbnail .bottom-content p {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Card base */
#recent_posts_with_thumbnail > .feature-list .box {
  position: relative !important;
  overflow: hidden !important;
  background: #fffdfa !important;
}

/* Image area */
#recent_posts_with_thumbnail .feature-list figure,
#recent_posts_with_thumbnail .feature-list .box > a:first-child {
  display: block !important;
  overflow: hidden !important;
  margin: 0 !important;
}

/* Bottom content becomes badge/title area */
#recent_posts_with_thumbnail .bottom-content {
  position: relative !important;
  overflow: visible !important;
  text-align: center !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  background: #fffdfa !important;
}

/* 2) Badge fixed position: exactly on image/bottom boundary */
#recent_posts_with_thumbnail .icon-box {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;

  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  transform: translate(-50%, -50%) !important;

  margin: 0 !important;
  padding: 0 !important;

  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  background: linear-gradient(135deg, #ff9d22 0%, #e98513 100%) !important;
  box-shadow:
    0 14px 26px rgba(232, 133, 19, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;

  z-index: 20 !important;
}

#recent_posts_with_thumbnail .icon-box span {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #fff7ec !important;
  text-align: center !important;
  font-family: "Oswald", sans-serif !important;
}

/* Title only */
#recent_posts_with_thumbnail .rpwwt-post-title,
#recent_posts_with_thumbnail .rpwwt-post-title a {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;

  overflow: hidden !important;
  text-align: center !important;
  text-decoration: none !important;

  color: #2f2924 !important;
  font-family: "Oswald", sans-serif !important;
  font-weight: 700 !important;

  margin-left: auto !important;
  margin-right: auto !important;
}

/* Laptop / desktop */
@media (min-width: 1025px) {
  #recent_posts_with_thumbnail > .feature-list {
    flex: 0 0 320px !important;
    width: 320px !important;
    max-width: 320px !important;
  }

  #recent_posts_with_thumbnail > .feature-list .box {
    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
    border-radius: 28px !important;
  }

  #recent_posts_with_thumbnail .feature-list figure,
  #recent_posts_with_thumbnail .feature-list .box > a:first-child,
  #recent_posts_with_thumbnail .feature-list figure img,
  #recent_posts_with_thumbnail .feature-list .box img {
    height: 260px !important;
    max-height: 260px !important;
  }

  #recent_posts_with_thumbnail .feature-list figure img,
  #recent_posts_with_thumbnail .feature-list .box img {
    width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  #recent_posts_with_thumbnail .bottom-content {
    height: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
    padding: 72px 22px 22px !important;
  }

  #recent_posts_with_thumbnail .icon-box {
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    min-height: 82px !important;
  }

  #recent_posts_with_thumbnail .icon-box span {
    font-size: 12px !important;
    line-height: 1 !important;
  }

  #recent_posts_with_thumbnail .rpwwt-post-title,
  #recent_posts_with_thumbnail .rpwwt-post-title a {
    max-height: 64px !important;
    font-size: 25px !important;
    line-height: 1.28 !important;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  #recent_posts_with_thumbnail > .feature-list {
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 280px !important;
  }

  #recent_posts_with_thumbnail > .feature-list .box {
    height: 375px !important;
    min-height: 375px !important;
    max-height: 375px !important;
    border-radius: 24px !important;
  }

  #recent_posts_with_thumbnail .feature-list figure,
  #recent_posts_with_thumbnail .feature-list .box > a:first-child,
  #recent_posts_with_thumbnail .feature-list figure img,
  #recent_posts_with_thumbnail .feature-list .box img {
    height: 225px !important;
    max-height: 225px !important;
  }

  #recent_posts_with_thumbnail .feature-list figure img,
  #recent_posts_with_thumbnail .feature-list .box img {
    width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  #recent_posts_with_thumbnail .bottom-content {
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    padding: 64px 18px 18px !important;
  }

  #recent_posts_with_thumbnail .icon-box {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
  }

  #recent_posts_with_thumbnail .icon-box span {
    font-size: 10px !important;
    line-height: 1 !important;
  }

  #recent_posts_with_thumbnail .rpwwt-post-title,
  #recent_posts_with_thumbnail .rpwwt-post-title a {
    max-height: 54px !important;
    font-size: 21px !important;
    line-height: 1.3 !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  #recent_posts_with_thumbnail > .feature-list {
    flex: 0 0 190px !important;
    width: 190px !important;
    max-width: 190px !important;
  }

  #recent_posts_with_thumbnail > .feature-list .box {
    height: 275px !important;
    min-height: 275px !important;
    max-height: 275px !important;
    border-radius: 20px !important;
  }

  #recent_posts_with_thumbnail .feature-list figure,
  #recent_posts_with_thumbnail .feature-list .box > a:first-child,
  #recent_posts_with_thumbnail .feature-list figure img,
  #recent_posts_with_thumbnail .feature-list .box img {
    height: 175px !important;
    max-height: 175px !important;
  }

  #recent_posts_with_thumbnail .feature-list figure img,
  #recent_posts_with_thumbnail .feature-list .box img {
    width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  #recent_posts_with_thumbnail .bottom-content {
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    padding: 44px 10px 12px !important;
  }

  #recent_posts_with_thumbnail .icon-box {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
  }

  #recent_posts_with_thumbnail .icon-box span {
    font-size: 8px !important;
    line-height: 1 !important;
  }

  #recent_posts_with_thumbnail .rpwwt-post-title,
  #recent_posts_with_thumbnail .rpwwt-post-title a {
    max-height: 42px !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
  }
}

/* =========================================================
   MMOCC - Mobile drawer flag perfect center FINAL
   Fix img.trp-flag-image not sitting exactly inside flex item
   Put at VERY END of style.css
   ========================================================= */

@media (max-width: 1024px) {
  /* language row */
  nav.mobile-menu ul.modal-menu li.mmocc-mobile-lang-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 14px 0 16px !important;

    background: #ffffff !important;
    border-bottom: 1px solid #e5e5e5 !important;
    box-sizing: border-box !important;
  }

  /* hide title */
  nav.mobile-menu ul.modal-menu li.mmocc-mobile-lang-item .mmocc-mobile-lang-title {
    display: none !important;
  }

  /* language list row */
  nav.mobile-menu ul.modal-menu li.mmocc-mobile-lang-item .mmocc-mobile-lang-slot,
  nav.mobile-menu ul.modal-menu li.mmocc-mobile-lang-item .mmocc-mobile-lang-list {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 14px !important;
    width: 100% !important;

    margin: 0 !important;
    padding: 5px !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    line-height: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* IMPORTANT: each language link = exact circle holder */
  nav.mobile-menu ul.modal-menu li.mmocc-mobile-lang-item .mmocc-mobile-lang-list > a {
    position: relative !important;

    display: block !important;
    flex: 0 0 26px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;

    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;

    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1px solid rgba(229, 231, 235, 0.95) !important;

    overflow: hidden !important;
    box-sizing: border-box !important;

    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    text-decoration: none !important;

    box-shadow: 0 3px 8px rgba(17, 24, 39, 0.10) !important;
  }

  /* text / span hide */
  nav.mobile-menu ul.modal-menu li.mmocc-mobile-lang-item .mmocc-mobile-lang-list > a span {
    display: none !important;
  }

  /* IMPORTANT: plugin flag image absolute center */
  nav.mobile-menu ul.modal-menu li.mmocc-mobile-lang-item .mmocc-mobile-lang-list > a img,
  nav.mobile-menu ul.modal-menu li.mmocc-mobile-lang-item .mmocc-mobile-lang-list > a img.trp-flag-image {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: absolute !important;
    top: 50% !important;
    left: 50% !important;

    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;

    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;

    margin: 0 !important;
    padding: 0  !important;

    transform: translate(-50%, -50%) !important;

    flex: 0 0 22px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;

    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center center !important;

    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    filter: none !important;

    image-rendering: auto !important;
    box-sizing: border-box !important;
  }

  /* current language ring */
  nav.mobile-menu ul.modal-menu li.mmocc-mobile-lang-item .mmocc-mobile-lang-list > a.mmocc-lang-current,
  nav.mobile-menu ul.modal-menu li.mmocc-mobile-lang-item .mmocc-mobile-lang-list > a.trp-ls-shortcode-current-language,
  nav.mobile-menu ul.modal-menu li.mmocc-mobile-lang-item .mmocc-mobile-lang-list > a[aria-current="true"] {
    border: 2px solid #d4891c !important;
    background: #ffffff !important;
    box-shadow:
      0 0 0 3px rgba(212, 137, 28, 0.14),
      0 5px 12px rgba(138, 79, 40, 0.16) !important;
  }

  /* active ring border ကြောင့် img မရွေ့အောင် */
  nav.mobile-menu ul.modal-menu li.mmocc-mobile-lang-item .mmocc-mobile-lang-list > a.mmocc-lang-current img,
  nav.mobile-menu ul.modal-menu li.mmocc-mobile-lang-item .mmocc-mobile-lang-list > a.trp-ls-shortcode-current-language img,
  nav.mobile-menu ul.modal-menu li.mmocc-mobile-lang-item .mmocc-mobile-lang-list > a[aria-current="true"] img {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
  }
}
/* =========================================================
   MMOCC - Remove gap between header and breadcrumb background
   Put at VERY END of style.css
   ========================================================= */

body:not(.home) header.cons-agency,
body:not(.home) .site-header.headerone.cons-agency {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* main fix: remove artificial top gap */
body:not(.home) section.breadcrumb {
  margin-top: 0 !important;
  top: auto !important;

  padding-top: 86px !important;
  padding-bottom: 86px !important;

  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* previous admin-bar margin also remove */
body.admin-bar:not(.home) section.breadcrumb {
  margin-top: 0 !important;
}

/* remove possible wrapper spacing */
body:not(.home) #content,
body:not(.home) .site-content,
body:not(.home) .page-content,
body:not(.home) .site-main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* =========================================================
   MMOCC - Hero Learn More network icon animation FINAL
   Replace cat paw animation
   Put at VERY END of style.css
   ========================================================= */

/* remove old cat paw cursor */
.home .sp-banner-wrapper .mmocc-paw-cursor,
.home .banner-slider .mmocc-paw-cursor,
.mmocc-paw-cursor {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* target existing hero button */
.home .sp-banner-wrapper .btn-area .btn.btn-primary,
.home .banner-slider .slider-content .btn.btn-primary,
.home .banner-slider .slider-content a.btn-primary {
  position: relative !important;
  overflow: hidden !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;

  min-height: 52px !important;
  padding: 0 30px !important;

  border-radius: 12px !important;
  background: linear-gradient(135deg, #d88a3d, #b86829) !important;
  color: #ffffff !important;

  font-family: "Oswald", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;

  box-shadow: 0 10px 24px rgba(154, 86, 34, 0.28) !important;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease !important;
}

.home .sp-banner-wrapper .btn-area .btn.btn-primary:hover,
.home .banner-slider .slider-content .btn.btn-primary:hover,
.home .banner-slider .slider-content a.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px rgba(154, 86, 34, 0.36) !important;
  filter: brightness(1.03) !important;
}

/* remove old arrow icon spacing issue */
.home .sp-banner-wrapper .btn-area .btn.btn-primary > i.fa-arrow-right,
.home .banner-slider .slider-content .btn.btn-primary > i.fa-arrow-right,
.home .banner-slider .slider-content a.btn-primary > i.fa-arrow-right {
  display: none !important;
}

/* label */
.home .sp-banner-wrapper .btn-area .btn.btn-primary .hero-btn-label,
.home .banner-slider .slider-content .btn.btn-primary .hero-btn-label,
.home .banner-slider .slider-content a.btn-primary .hero-btn-label {
  position: relative !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

/* network icon wrapper */
.home .sp-banner-wrapper .btn-area .btn.btn-primary .network-icon,
.home .banner-slider .slider-content .btn.btn-primary .network-icon,
.home .banner-slider .slider-content a.btn-primary .network-icon {
  position: relative !important;
  z-index: 2 !important;

  width: 28px !important;
  height: 20px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 28px !important;
}

/* arrow */
.home .sp-banner-wrapper .btn-area .btn.btn-primary .network-icon i,
.home .banner-slider .slider-content .btn.btn-primary .network-icon i,
.home .banner-slider .slider-content a.btn-primary .network-icon i {
  position: relative !important;
  z-index: 2 !important;

  display: inline-block !important;
  font-size: 15px !important;
  line-height: 1 !important;
  color: #ffffff !important;

  transition: transform 0.25s ease !important;
}

.home .sp-banner-wrapper .btn-area .btn.btn-primary:hover .network-icon i,
.home .banner-slider .slider-content .btn.btn-primary:hover .network-icon i,
.home .banner-slider .slider-content a.btn-primary:hover .network-icon i {
  transform: translateX(4px) !important;
}

/* dots */
.home .sp-banner-wrapper .btn-area .btn.btn-primary .network-icon .dot,
.home .banner-slider .slider-content .btn.btn-primary .network-icon .dot,
.home .banner-slider .slider-content a.btn-primary .network-icon .dot {
  position: absolute !important;
  display: block !important;

  width: 5px !important;
  height: 5px !important;

  border-radius: 50% !important;
  background: #fff4dc !important;
  box-shadow: 0 0 8px rgba(255, 244, 220, 0.9) !important;

  opacity: 0;
  transform: scale(0.6);
  pointer-events: none !important;
}

.home .sp-banner-wrapper .btn-area .btn.btn-primary .network-icon .dot-1,
.home .banner-slider .slider-content .btn.btn-primary .network-icon .dot-1,
.home .banner-slider .slider-content a.btn-primary .network-icon .dot-1 {
  left: 0 !important;
  top: 2px !important;
  animation: networkPulse 1.8s ease-in-out infinite !important;
}

.home .sp-banner-wrapper .btn-area .btn.btn-primary .network-icon .dot-2,
.home .banner-slider .slider-content .btn.btn-primary .network-icon .dot-2,
.home .banner-slider .slider-content a.btn-primary .network-icon .dot-2 {
  left: 5px !important;
  bottom: 1px !important;
  animation: networkPulse 1.8s ease-in-out infinite 0.2s !important;
}

.home .sp-banner-wrapper .btn-area .btn.btn-primary .network-icon .dot-3,
.home .banner-slider .slider-content .btn.btn-primary .network-icon .dot-3,
.home .banner-slider .slider-content a.btn-primary .network-icon .dot-3 {
  left: 11px !important;
  top: 8px !important;
  animation: networkPulse 1.8s ease-in-out infinite 0.4s !important;
}

.home .sp-banner-wrapper .btn-area .btn.btn-primary:hover .network-icon .dot,
.home .banner-slider .slider-content .btn.btn-primary:hover .network-icon .dot,
.home .banner-slider .slider-content a.btn-primary:hover .network-icon .dot {
  opacity: 1;
}

@keyframes networkPulse {
  0% {
    opacity: 0;
    transform: translateX(0) scale(0.6);
  }

  35% {
    opacity: 0.9;
    transform: translateX(4px) scale(1);
  }

  70% {
    opacity: 0.5;
    transform: translateX(10px) scale(0.85);
  }

  100% {
    opacity: 0;
    transform: translateX(16px) scale(0.6);
  }
}

/* =========================================================
   MMOCC - Products submenu current item style FINAL
   Selected submenu item only changes style
   Put at VERY END of style.css
   ========================================================= */

/* submenu normal items */
header.cons-agency .box-header-nav .main-menu > li > ul.sub-menu li > a,
header.cons-agency .box-header-nav .main-menu > li > ul.children li > a {
  display: block !important;

  padding: 14px 18px !important;

  font-family: "Oswald", sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;

  color: #4b5563 !important;
  background: transparent !important;

  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;

  border-radius: 0 !important;
  text-decoration: none !important;
}

/* submenu hover */
header.cons-agency .box-header-nav .main-menu > li > ul.sub-menu li > a:hover,
header.cons-agency .box-header-nav .main-menu > li > ul.children li > a:hover {
  color: #8a4f28 !important;
  background: rgba(243, 167, 109, 0.14) !important;

  font-family: "Oswald", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;

  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* selected/current submenu item */
header.cons-agency .box-header-nav .main-menu > li > ul.sub-menu li.current-menu-item > a,
header.cons-agency .box-header-nav .main-menu > li > ul.sub-menu li.current_page_item > a,
header.cons-agency .box-header-nav .main-menu > li > ul.sub-menu li.current-post-ancestor > a,
header.cons-agency .box-header-nav .main-menu > li > ul.sub-menu li.current-menu-ancestor > a,
header.cons-agency .box-header-nav .main-menu > li > ul.children li.current-menu-item > a,
header.cons-agency .box-header-nav .main-menu > li > ul.children li.current_page_item > a {
  color: #8a4f28 !important;
  background: rgba(243, 167, 109, 0.18) !important;

  font-family: "Oswald", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;

  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* current item hover stays same */
header.cons-agency .box-header-nav .main-menu > li > ul.sub-menu li.current-menu-item > a:hover,
header.cons-agency .box-header-nav .main-menu > li > ul.sub-menu li.current_page_item > a:hover,
header.cons-agency .box-header-nav .main-menu > li > ul.sub-menu li.current-post-ancestor > a:hover,
header.cons-agency .box-header-nav .main-menu > li > ul.sub-menu li.current-menu-ancestor > a:hover {
  color: #8a4f28 !important;
  background: rgba(243, 167, 109, 0.22) !important;
}

/* prevent parent/current top-menu rules from changing all submenu fonts */
header.cons-agency .box-header-nav .main-menu > li.current-menu-item > ul.sub-menu li:not(.current-menu-item):not(.current_page_item) > a,
header.cons-agency .box-header-nav .main-menu > li.current-menu-ancestor > ul.sub-menu li:not(.current-menu-item):not(.current_page_item) > a,
header.cons-agency .box-header-nav .main-menu > li.current_page_parent > ul.sub-menu li:not(.current-menu-item):not(.current_page_item) > a {
  color: #4b5563 !important;
  background: transparent !important;

  font-family: "Oswald", sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;

  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* =========================================================
   MMOCC - Products submenu width fix FINAL
   Fix long item text overflow
   Put at VERY END of style.css
   ========================================================= */

/* make dropdown wider */
header.cons-agency .box-header-nav .main-menu > li > ul.sub-menu,
header.cons-agency .box-header-nav .main-menu > li > ul.children {
  min-width: 330px !important;
  width: 330px !important;
  max-width: none !important;
}

/* make submenu links fill full dropdown width */
header.cons-agency .box-header-nav .main-menu > li > ul.sub-menu li,
header.cons-agency .box-header-nav .main-menu > li > ul.children li {
  width: 100% !important;
}

header.cons-agency .box-header-nav .main-menu > li > ul.sub-menu li > a,
header.cons-agency .box-header-nav .main-menu > li > ul.children li > a {
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  white-space: nowrap !important;
}
/* =========================================================
   MMOCC - Hide Artibot Contact us text bubble ONLY
   Keep orange chat icon visible
   Put at VERY END of style.css
   ========================================================= */

div[class*="artibot-launcher-bubble"],
button[class*="artibot-launcher-bubble"],
[class*="artibot-launcher-bubble--"],
[class*="artibot-launcher-bubble-sans"],
[class*="artibot-launcher-bottom-right"] > div[class*="artibot-launcher-bubble"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;

  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
/* =========================================================
   MMOCC - Footer cards equal padding, no bottom empty gap FINAL
   Put at VERY END of style.css
   ========================================================= */

/* footer whole spacing */
.site-footer {
  padding-top: 46px !important;
  padding-bottom: 0 !important;
}

/* keep two cards side by side, but don't stretch height */
.site-footer .row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 28px !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* footer columns */
.site-footer .col-md-6,
.site-footer .col-sm-6,
.site-footer .col-xs-12 {
  float: none !important;
  width: 454px !important;
  max-width: 454px !important;
  flex: 0 0 454px !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* IMPORTANT: card height auto, remove forced bottom gap */
.site-footer .widget,
.site-footer .widget.widget_text,
.site-footer section.widget,
.site-footer section.widget_text {
  width: 100% !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  padding: 26px 32px 24px !important;
  margin: 0 !important;

  display: block !important;
  box-sizing: border-box !important;
}

/* title spacing same for both cards */
.site-footer .widget-title,
.site-footer .widget h2 {
  margin: 0 0 18px !important;
  padding: 0 !important;
  line-height: 1.1 !important;
}

.site-footer .widget-title::after,
.site-footer .widget h2::after {
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}

/* textwidget reset */
.site-footer .textwidget {
  margin: 0 !important;
  padding: 0 !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  display: block !important;
  box-sizing: border-box !important;
}

/* all paragraph spacing compact */
.site-footer .widget p,
.site-footer .textwidget p {
  margin: 0 0 6px !important;
  padding: 0 !important;
  line-height: 1.55 !important;
}

/* QR spacing */
.site-footer .mmocc-footer-qr,
.site-footer .widget_text img,
.site-footer .textwidget img {
  display: block !important;

  width: 112px !important;
  max-width: 112px !important;
  height: auto !important;

  margin: 12px 0 12px !important;
  padding: 9px !important;
}

/* left card contact lines */
.site-footer .mmocc-footer-contact-lines {
  display: block !important;
  clear: both !important;

  margin: 0 !important;
  padding: 0 !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

.site-footer .mmocc-footer-contact-lines p {
  margin: 0 0 5px !important;
  padding: 0 !important;
  line-height: 1.45 !important;
}

/* right card inner spacing */
.site-footer .textwidget h3,
.site-footer .textwidget h4,
.site-footer .widget h3,
.site-footer .widget h4 {
  margin: 14px 0 8px !important;
  padding: 0 !important;
  line-height: 1.25 !important;
}

.site-footer .textwidget ul,
.site-footer .widget ul {
  margin: 0 !important;
  padding: 0 !important;
}

.site-footer .textwidget li,
.site-footer .widget li {
  margin: 0 0 6px !important;
  padding: 0 !important;
  line-height: 1.5 !important;
}

/* remove empty generated gaps */
.site-footer .widget p:empty,
.site-footer .textwidget p:empty,
.site-footer .widget div:empty,
.site-footer .textwidget div:empty {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.site-footer .widget br + br,
.site-footer .textwidget br + br {
  display: none !important;
}

/* copyright bar closer */
.sub-footer {
  margin-top: 26px !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

/* tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  .site-footer .container {
    max-width: 94% !important;
  }

  .site-footer .row {
    gap: 22px !important;
    align-items: flex-start !important;
  }

  .site-footer .col-md-6,
  .site-footer .col-sm-6,
  .site-footer .col-xs-12 {
    width: calc(50% - 11px) !important;
    max-width: calc(50% - 11px) !important;
    flex: 0 0 calc(50% - 11px) !important;
  }

  .site-footer .widget,
  .site-footer .widget.widget_text,
  .site-footer section.widget,
  .site-footer section.widget_text {
    padding: 24px 26px 22px !important;
  }
}

/* mobile only stack */
@media (max-width: 767px) {
  .site-footer {
    padding-top: 34px !important;
  }

  .site-footer .row {
    display: block !important;
  }

  .site-footer .col-md-6,
  .site-footer .col-sm-6,
  .site-footer .col-xs-12 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin-bottom: 18px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .site-footer .widget,
  .site-footer .widget.widget_text,
  .site-footer section.widget,
  .site-footer section.widget_text {
    padding: 22px 22px 20px !important;
  }

  .sub-footer {
    margin-top: 10px !important;
  }
}
/* =========================================================
   MMOCC - Footer two cards same height FINAL
   Put at VERY END of style.css
   ========================================================= */

@media (min-width: 768px) {
  /* row ကို card height ညီအောင် stretch ပြန်လုပ် */
  .site-footer .row {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 28px !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* column ကို flex container လုပ်မှ widget height 100% အလုပ်လုပ်မယ် */
  .site-footer .col-md-6,
  .site-footer .col-sm-6,
  .site-footer .col-xs-12 {
    display: flex !important;
    align-items: stretch !important;

    width: 454px !important;
    max-width: 454px !important;
    flex: 0 0 454px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* card နှစ်ခု height တူအောင် */
  .site-footer .widget,
  .site-footer .widget.widget_text,
  .site-footer section.widget,
  .site-footer section.widget_text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 255px !important;

    padding: 26px 32px 24px !important;
    margin: 0 !important;

    box-sizing: border-box !important;
  }

  /* content တွေကို အပေါ်ကနေစ */
  .site-footer .textwidget {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* 1024px အောက် tablet မှာ width responsive */
@media (min-width: 768px) and (max-width: 1024px) {
  .site-footer .row {
    gap: 22px !important;
  }

  .site-footer .col-md-6,
  .site-footer .col-sm-6,
  .site-footer .col-xs-12 {
    width: calc(50% - 11px) !important;
    max-width: calc(50% - 11px) !important;
    flex: 0 0 calc(50% - 11px) !important;
  }

  .site-footer .widget,
  .site-footer .widget.widget_text,
  .site-footer section.widget,
  .site-footer section.widget_text {
    min-height: 245px !important;
    padding: 24px 26px 22px !important;
  }
}

/* mobile မှာတော့ card တွေ အပေါ်အောက်ထား */
@media (max-width: 767px) {
  .site-footer .row {
    display: block !important;
  }

  .site-footer .col-md-6,
  .site-footer .col-sm-6,
  .site-footer .col-xs-12 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  .site-footer .widget,
  .site-footer .widget.widget_text,
  .site-footer section.widget,
  .site-footer section.widget_text {
    height: auto !important;
    min-height: 0 !important;
  }
}
/* =========================================================
   MMOCC - Footer widget title underline remove FINAL
   Put at VERY END of style.css
   ========================================================= */

.site-footer .widget-title::before,
.site-footer .widget-title::after,
.site-footer .widget h2::before,
.site-footer .widget h2::after,
.site-footer section.widget .widget-title::before,
.site-footer section.widget .widget-title::after,
.site-footer section.widget h2::before,
.site-footer section.widget h2::after {
  content: none !important;
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;

  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}

/* underline ဖျက်ပြီးနောက် title အောက် spacing ကို ပြန်ညှိ */
.site-footer .widget-title,
.site-footer .widget h2 {
  margin-bottom: 20px !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* =========================================================
   MMOCC - Desktop transparent hero overlay header FINAL
   Background removed, keep logo + menu + language switcher
   Put at VERY END of style.css
   ========================================================= */

@media (min-width: 1025px) {

  :root {
    --mmocc-header-h: 88px;
  }

  /* Header wrapper */
  header.cons-agency {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    height: var(--mmocc-header-h) !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    z-index: 9999 !important;
  }

  /* Main nav bar background remove */
  header.cons-agency .nav-classic {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    min-height: var(--mmocc-header-h) !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border-bottom: 0 !important;
    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    overflow: visible !important;
    z-index: 9999 !important;
  }

  body.admin-bar header.cons-agency .nav-classic {
    top: 32px !important;
  }

  /* Sakura / decorative header layer remove on desktop */
  header.cons-agency .mmocc-header-gradient,
  header.cons-agency .mmocc-sakura-layer,
  header.cons-agency .mmocc-sakura {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Header content align like sample */
  header.cons-agency .nav-classic .container {
    max-width: 1180px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  header.cons-agency .header-middle-inner {
    min-height: var(--mmocc-header-h) !important;
    height: var(--mmocc-header-h) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Logo */
  header.cons-agency .site-branding {
    min-height: var(--mmocc-header-h) !important;
    height: var(--mmocc-header-h) !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
  }

  header.cons-agency .brandinglogo-wrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;

    background: transparent !important;
    box-shadow: none !important;
  }

  header.cons-agency .brandinglogo-wrap .custom-logo-link img.custom-logo,
  header.cons-agency .site-branding img.custom-logo {
    height: 42px !important;
    max-height: 42px !important;
    width: auto !important;
    max-width: none !important;

    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.28)) !important;
  }

  header.cons-agency .mmocc-anniversary-badge img {
    height: 40px !important;
    max-height: 40px !important;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.25)) !important;
  }

  /* Menu container */
  header.cons-agency .nav-menu {
    min-height: var(--mmocc-header-h) !important;
    height: var(--mmocc-header-h) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    flex: 1 1 auto !important;
  }

  header.cons-agency .nav-menu .box-header-nav {
    background: transparent !important;
    box-shadow: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  header.cons-agency .box-header-nav .main-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
  }

  /* Menu links on hero */
  header.cons-agency .box-header-nav .main-menu > .menu-item > a,
  header.cons-agency .box-header-nav .main-menu .page_item a {
    color: #ffffff !important;
    background: transparent !important;

    padding: 9px 8px !important;

    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;

    border-radius: 0 !important;
    box-shadow: none !important;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
  }

  /* Active / hover simple underline style */
  header.cons-agency .box-header-nav .main-menu > .menu-item.current-menu-item > a,
  header.cons-agency .box-header-nav .main-menu > .menu-item:hover > a,
  header.cons-agency .box-header-nav .main-menu .page_item.current-page-item a,
  header.cons-agency .box-header-nav .main-menu .page_item:hover a {
    color: #ffffff !important;
    background: transparent !important;
    opacity: 1 !important;
  }

  header.cons-agency .box-header-nav .main-menu > .menu-item > a::before,
  header.cons-agency .box-header-nav .main-menu .page_item a::before {
    content: "" !important;
    position: absolute !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 2px !important;

    height: 2px !important;
    border-radius: 999px !important;

    background: #ffffff !important;
    opacity: 0 !important;
    transform: scaleX(0.4) !important;

    transition:
      opacity 0.22s ease,
      transform 0.22s ease !important;
  }

  header.cons-agency .box-header-nav .main-menu > .menu-item.current-menu-item > a::before,
  header.cons-agency .box-header-nav .main-menu > .menu-item:hover > a::before,
  header.cons-agency .box-header-nav .main-menu .page_item.current-page-item a::before,
  header.cons-agency .box-header-nav .main-menu .page_item:hover a::before {
    opacity: 1 !important;
    transform: scaleX(1) !important;
  }

  header.cons-agency .box-header-nav .main-menu > .menu-item > a,
  header.cons-agency .box-header-nav .main-menu .page_item a {
    position: relative !important;
  }

  /* Contact Us should NOT look like orange button */
  header.cons-agency .box-header-nav .main-menu > .menu-button-contact > a,
  .menu-button-contact a {
    color: #ffffff !important;
    background: transparent !important;
    background-image: none !important;

    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    border-radius: 999px !important;

    min-height: 36px !important;
    padding: 9px 16px !important;

    box-shadow: none !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
  }

  header.cons-agency .box-header-nav .main-menu > .menu-button-contact:hover > a,
  .menu-button-contact a:hover {
    color: #2f2924 !important;
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: none !important;
  }

  /* Dropdown stays readable */
  header.cons-agency .box-header-nav .main-menu > li > ul.sub-menu,
  header.cons-agency .box-header-nav .main-menu > li > ul.children {
    top: calc(100% + 10px) !important;

    background: rgba(255, 250, 244, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 16px !important;

    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  header.cons-agency .box-header-nav .main-menu > li > ul.sub-menu li > a,
  header.cons-agency .box-header-nav .main-menu > li > ul.children li > a {
    color: #374151 !important;
    text-shadow: none !important;
  }

  /* Language switcher on transparent header */
  #mmocc-lang-slot {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    margin-left: 18px !important;
    flex: 0 0 auto !important;
  }

  #mmocc-lang-slot
    > #trp-floater-ls.mmocc-lang-inside-nav
    #trp-floater-ls-language-list {
    gap: 8px !important;
  }

  

  #mmocc-lang-slot
    > #trp-floater-ls.mmocc-lang-inside-nav
    #trp-floater-ls-language-list
    a:hover {
    color: #2f2924 !important;
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: none !important;
  }

  #mmocc-lang-slot
    > #trp-floater-ls.mmocc-lang-inside-nav
    #trp-floater-ls-language-list
    a.mmocc-lang-current,
  #mmocc-lang-slot
    > #trp-floater-ls.mmocc-lang-inside-nav
    #trp-floater-ls-language-list
    a.trp-ls-shortcode-current-language,
  #mmocc-lang-slot
    > #trp-floater-ls.mmocc-lang-inside-nav
    #trp-floater-ls-language-list
    a[aria-current="true"] {
    color: #ffffff !important;
    background: rgba(218, 86, 10, 0.78) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    text-shadow: none !important;
  }

  /* Hero should start from very top behind header */
  .home header.cons-agency + .sp-banner-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .home header.cons-agency + .sp-banner-wrapper {
    height: 100vh !important;
    min-height: 680px !important;
    max-height: none !important;
  }

  /* Since header overlays hero, move hero text a bit down */
  .home .banner-slider .slider-content,
  .home .banner-slider .slide-item .slider-content,
  .home .banner-slider .slider-item .slider-content {
    padding-top: 170px !important;
  }
  /* Language text same size as menu, flag size unchanged */
#mmocc-lang-slot
  > #trp-floater-ls.mmocc-lang-inside-nav
  #trp-floater-ls-language-list
  a {
  font-family: "Oswald", "Roboto Condensed", Arial, sans-serif !important;

  /* menu font size နဲ့ တူအောင် */
  font-size: 11.5px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;

  color: rgba(255, 244, 225, 0.9) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* flag circle size - keep clean and consistent */
#mmocc-lang-slot
  > #trp-floater-ls.mmocc-lang-inside-nav
  #trp-floater-ls-language-list
  a
  img,
#mmocc-lang-slot
  > #trp-floater-ls.mmocc-lang-inside-nav
  #trp-floater-ls-language-list
  a
  img.trp-flag-image {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;

  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center center !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  outline: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: none !important;
}

/* active/current language text color only */
#mmocc-lang-slot
  > #trp-floater-ls.mmocc-lang-inside-nav
  #trp-floater-ls-language-list
  a.mmocc-lang-current,
#mmocc-lang-slot
  > #trp-floater-ls.mmocc-lang-inside-nav
  #trp-floater-ls-language-list
  a.trp-ls-shortcode-current-language,
#mmocc-lang-slot
  > #trp-floater-ls.mmocc-lang-inside-nav
  #trp-floater-ls-language-list
  a[aria-current="true"] {
  color: #f2b86d !important;
}
}

/* =========================================================
   MMOCC - Transparent header premium menu font/color fix
   Put at VERY END of style.css
   ========================================================= */

@media (min-width: 1025px) {

  /* Desktop menu - smaller, premium, less aggressive */
  header.cons-agency .box-header-nav .main-menu > .menu-item > a,
  header.cons-agency .box-header-nav .main-menu .page_item a {
    font-family: "Oswald", "Roboto Condensed", Arial, sans-serif !important;

    font-size: 11.5px !important;
    font-weight: 300 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.055em !important;

    color: rgba(255, 244, 225, 0.88) !important;
    text-shadow:
      0 2px 8px rgba(0, 0, 0, 0.38),
      0 1px 2px rgba(0, 0, 0, 0.22) !important;

    padding: 8px 7px !important;
    background: transparent !important;
  }

  /* Premium hover/current color */
  header.cons-agency .box-header-nav .main-menu > .menu-item.current-menu-item > a,
  header.cons-agency .box-header-nav .main-menu > .menu-item:hover > a,
  header.cons-agency .box-header-nav .main-menu .page_item.current-page-item a,
  header.cons-agency .box-header-nav .main-menu .page_item:hover a {
    color: #f2b86d !important;
    background: transparent !important;
    text-shadow:
      0 0 14px rgba(242, 184, 109, 0.22),
      0 2px 8px rgba(0, 0, 0, 0.42) !important;
  }

  /* Underline color softer gold */
  header.cons-agency .box-header-nav .main-menu > .menu-item > a::before,
  header.cons-agency .box-header-nav .main-menu .page_item a::before {
    height: 1.5px !important;
    left: 7px !important;
    right: 7px !important;
    bottom: 1px !important;
    background: linear-gradient(
      90deg,
      rgba(242, 184, 109, 0),
      rgba(242, 184, 109, 0.95),
      rgba(242, 184, 109, 0)
    ) !important;
  }

  /* Menu spacing slightly tighter */
  header.cons-agency .box-header-nav .main-menu {
    gap: 11px !important;
  }

  /* Contact button - smaller and premium */
  header.cons-agency .box-header-nav .main-menu > .menu-button-contact > a,
  .menu-button-contact a {
    font-size: 11.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.055em !important;

    color: rgba(255, 244, 225, 0.92) !important;
    border: 1px solid rgba(242, 184, 109, 0.52) !important;
    background: rgba(255, 255, 255, 0.055) !important;

    min-height: 34px !important;
    padding: 8px 15px !important;

    border-radius: 999px !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 6px 18px rgba(0, 0, 0, 0.12) !important;
  }

  header.cons-agency .box-header-nav .main-menu > .menu-button-contact:hover > a,
  .menu-button-contact a:hover {
    color: #1f2937 !important;
    background: rgba(242, 184, 109, 0.92) !important;
    border-color: rgba(242, 184, 109, 0.95) !important;
    text-shadow: none !important;
  }

  /* English and Japanese menu balance */
  html[lang^="en"] header.cons-agency .box-header-nav .main-menu > .menu-item > a,
  html[lang^="ja"] header.cons-agency .box-header-nav .main-menu > .menu-item > a {
    font-size: 11.5px !important;
  }

  /* Japanese menu slightly smaller */
  html[lang^="ja"] header.cons-agency .box-header-nav .main-menu > .menu-item > a,
  body.translatepress-ja header.cons-agency .box-header-nav .main-menu > .menu-item > a,
  body.trp-language-ja header.cons-agency .box-header-nav .main-menu > .menu-item > a {
    font-size: 11px !important;
    letter-spacing: 0.035em !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  /* Myanmar menu needs smaller size because text is wider */
  html[lang^="my"] header.cons-agency .box-header-nav .main-menu > .menu-item > a,
  html[lang^="my"] header.cons-agency .box-header-nav .main-menu .page_item a,
  body.translatepress-my_MM header.cons-agency .box-header-nav .main-menu > .menu-item > a,
  body.translatepress-my_MM header.cons-agency .box-header-nav .main-menu .page_item a,
  body.trp-language-my_MM header.cons-agency .box-header-nav .main-menu > .menu-item > a,
  body.trp-language-my_MM header.cons-agency .box-header-nav .main-menu .page_item a {
    font-family: "pyidaungsu", "Myanmar3", sans-serif !important;

    font-size: 9px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;

    padding-left: 5px !important;
    padding-right: 5px !important;

    color: rgba(255, 244, 225, 0.9) !important;
  }

  body.translatepress-my_MM header.cons-agency .box-header-nav .main-menu,
  body.trp-language-my_MM header.cons-agency .box-header-nav .main-menu,
  html[lang^="my"] header.cons-agency .box-header-nav .main-menu {
    gap: 7px !important;
  }

  html[lang^="my"] header.cons-agency .box-header-nav .main-menu > .menu-button-contact > a,
  body.translatepress-my_MM header.cons-agency .box-header-nav .main-menu > .menu-button-contact > a,
  body.trp-language-my_MM header.cons-agency .box-header-nav .main-menu > .menu-button-contact > a {
    font-size: 9px !important;
    line-height: 1.25 !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  /* Dropdown arrow smaller */
  header.cons-agency
    .box-header-nav
    .main-menu
    > .menu-item-has-children
    > a::after,
  header.cons-agency
    .box-header-nav
    .main-menu
    > .page_item_has_children
    > a::after {
    margin-left: 6px !important;
    border-left-width: 3.5px !important;
    border-right-width: 3.5px !important;
    border-top-width: 5px !important;
    opacity: 0.9 !important;
  }

  /* Language buttons clean: no background, no border, no radius */
#mmocc-lang-slot
  > #trp-floater-ls.mmocc-lang-inside-nav
  #trp-floater-ls-language-list
  a {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: rgba(255, 244, 225, 0.9) !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;

  box-shadow: none !important;
  outline: 0 !important;
}

/* Current language: color only, no box */
#mmocc-lang-slot
  > #trp-floater-ls.mmocc-lang-inside-nav
  #trp-floater-ls-language-list
  a.mmocc-lang-current,
#mmocc-lang-slot
  > #trp-floater-ls.mmocc-lang-inside-nav
  #trp-floater-ls-language-list
  a.trp-ls-shortcode-current-language,
#mmocc-lang-slot
  > #trp-floater-ls.mmocc-lang-inside-nav
  #trp-floater-ls-language-list
  a[aria-current="true"] {
  color: #f2b86d !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;

  box-shadow: none !important;
  outline: 0 !important;
}

/* Hover: no box */
#mmocc-lang-slot
  > #trp-floater-ls.mmocc-lang-inside-nav
  #trp-floater-ls-language-list
  a:hover {
  color: #f2b86d !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
}
/* =========================================================
   MMOCC - Desktop header balanced spacing FINAL
   Fix menu too close to logo and too far from language
   Put at VERY END of style.css
   ========================================================= */

@media (min-width: 1025px) {

  /* Header container */
  header.cons-agency .nav-classic .container {
    max-width: 1880px !important;
    width: 100% !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Use real 3-column layout instead of absolute center */
  header.cons-agency .header-middle-inner {
    position: relative !important;

    display: grid !important;
    grid-template-columns:
      minmax(420px, 520px)
      minmax(0, 1fr)
      minmax(270px, 330px) !important;

    align-items: center !important;
    column-gap: 34px !important;

    width: 100% !important;
    height: var(--mmocc-header-h) !important;
    min-height: var(--mmocc-header-h) !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* Logo area - left */
  header.cons-agency .site-branding {
    position: static !important;
    transform: none !important;

    grid-column: 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    min-width: 0 !important;
    height: var(--mmocc-header-h) !important;
    min-height: var(--mmocc-header-h) !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  header.cons-agency .brandinglogo-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    max-width: 100% !important;
  }

  /* Menu area - center of remaining middle space */
  header.cons-agency .nav-menu {
    position: static !important;
    inset: auto !important;

    grid-column: 2 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: var(--mmocc-header-h) !important;
    min-height: var(--mmocc-header-h) !important;

    margin: 0 !important;
    padding: 0 !important;

    pointer-events: auto !important;
  }

  header.cons-agency .nav-menu .box-header-nav {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    pointer-events: auto !important;
    background: transparent !important;
  }

  header.cons-agency .box-header-nav .main-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 28px !important;
    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  /* Menu text */
  header.cons-agency .box-header-nav .main-menu > .menu-item > a,
  header.cons-agency .box-header-nav .main-menu .page_item a {
    font-size: 11.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;

    padding: 8px 0 !important;

    color: rgba(255, 238, 210, 0.88) !important;
    background: transparent !important;

    text-shadow:
      0 2px 8px rgba(0, 0, 0, 0.42),
      0 0 14px rgba(212, 137, 28, 0.08) !important;
  }

  /* Contact button */
  header.cons-agency .box-header-nav .main-menu > .menu-button-contact > a,
  .menu-button-contact a {
    min-height: 38px !important;
    padding: 9px 20px !important;

    font-size: 11.5px !important;
    letter-spacing: 0.06em !important;

    color: rgba(255, 238, 210, 0.94) !important;
    border: 1px solid rgba(242, 184, 109, 0.56) !important;
    background: rgba(255, 255, 255, 0.055) !important;
    border-radius: 999px !important;
  }

  /* Language area - right */
  #mmocc-lang-slot {
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;

    grid-column: 3 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    z-index: 6 !important;
  }

  #mmocc-lang-slot
    > #trp-floater-ls.mmocc-lang-inside-nav
    #trp-floater-ls-language-list {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
  }

  #mmocc-lang-slot
    > #trp-floater-ls.mmocc-lang-inside-nav
    #trp-floater-ls-language-list
    a {
    height: 36px !important;
    min-width: 58px !important;
    padding: 7px 12px !important;
    font-size: 10.5px !important;
  }
}

/* Medium laptop / 200% zoom protection */
@media (min-width: 1025px) and (max-width: 1550px) {

  header.cons-agency .nav-classic .container {
    padding-left: 34px !important;
    padding-right: 34px !important;
  }

  header.cons-agency .header-middle-inner {
    grid-template-columns:
      minmax(360px, 430px)
      minmax(0, 1fr)
      minmax(235px, 285px) !important;

    column-gap: 26px !important;
  }

  header.cons-agency .brandinglogo-wrap .custom-logo-link img.custom-logo,
  header.cons-agency .site-branding img.custom-logo {
    height: 40px !important;
    max-height: 40px !important;
  }

  header.cons-agency .mmocc-anniversary-badge img {
    height: 38px !important;
    max-height: 38px !important;
  }

  header.cons-agency .box-header-nav .main-menu {
    gap: 22px !important;
  }

  header.cons-agency .box-header-nav .main-menu > .menu-item > a,
  header.cons-agency .box-header-nav .main-menu .page_item a {
    font-size: 10.5px !important;
    letter-spacing: 0.05em !important;
  }

  header.cons-agency .box-header-nav .main-menu > .menu-button-contact > a,
  .menu-button-contact a {
    font-size: 10.5px !important;
    padding-left: 17px !important;
    padding-right: 17px !important;
  }

  #mmocc-lang-slot
    > #trp-floater-ls.mmocc-lang-inside-nav
    #trp-floater-ls-language-list
    a {
    min-width: 52px !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
}
/* =========================================================
   MMOCC - Desktop header balanced spacing FINAL
   Fix menu too close to logo and too far from language
   Put at VERY END of style.css
   ========================================================= */

@media (min-width: 1025px) {

  /* Header container */
  header.cons-agency .nav-classic .container {
    max-width: 1880px !important;
    width: 100% !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Use real 3-column layout instead of absolute center */
  header.cons-agency .header-middle-inner {
    position: relative !important;

    display: grid !important;
    grid-template-columns:
      minmax(420px, 520px)
      minmax(0, 1fr)
      minmax(270px, 330px) !important;

    align-items: center !important;
    column-gap: 34px !important;

    width: 100% !important;
    height: var(--mmocc-header-h) !important;
    min-height: var(--mmocc-header-h) !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* Logo area - left */
  header.cons-agency .site-branding {
    position: static !important;
    transform: none !important;

    grid-column: 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    min-width: 0 !important;
    height: var(--mmocc-header-h) !important;
    min-height: var(--mmocc-header-h) !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  header.cons-agency .brandinglogo-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    max-width: 100% !important;
  }

  /* Menu area - center of remaining middle space */
  header.cons-agency .nav-menu {
    position: static !important;
    inset: auto !important;

    grid-column: 2 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: var(--mmocc-header-h) !important;
    min-height: var(--mmocc-header-h) !important;

    margin: 0 !important;
    padding: 0 !important;

    pointer-events: auto !important;
  }

  header.cons-agency .nav-menu .box-header-nav {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    pointer-events: auto !important;
    background: transparent !important;
  }

  header.cons-agency .box-header-nav .main-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 28px !important;
    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  /* Menu text */
  header.cons-agency .box-header-nav .main-menu > .menu-item > a,
  header.cons-agency .box-header-nav .main-menu .page_item a {
    font-size: 11.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;

    padding: 8px 0 !important;

    color: rgba(255, 238, 210, 0.88) !important;
    background: transparent !important;

    text-shadow:
      0 2px 8px rgba(0, 0, 0, 0.42),
      0 0 14px rgba(212, 137, 28, 0.08) !important;
  }

  /* Contact button */
  header.cons-agency .box-header-nav .main-menu > .menu-button-contact > a,
  .menu-button-contact a {
    min-height: 38px !important;
    padding: 9px 20px !important;

    font-size: 11.5px !important;
    letter-spacing: 0.06em !important;

    color: rgba(255, 238, 210, 0.94) !important;
    border: 1px solid rgba(242, 184, 109, 0.56) !important;
    background: rgba(255, 255, 255, 0.055) !important;
    border-radius: 999px !important;
  }

  /* Language area - right */
  #mmocc-lang-slot {
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;

    grid-column: 3 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    z-index: 6 !important;
  }

  #mmocc-lang-slot
    > #trp-floater-ls.mmocc-lang-inside-nav
    #trp-floater-ls-language-list {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
  }

  #mmocc-lang-slot
    > #trp-floater-ls.mmocc-lang-inside-nav
    #trp-floater-ls-language-list
    a {
    height: 36px !important;
    min-width: 58px !important;
    padding: 7px 12px !important;
    font-size: 10.5px !important;
  }
}

/* Medium laptop / 200% zoom protection */
@media (min-width: 1025px) and (max-width: 1550px) {

  header.cons-agency .nav-classic .container {
    padding-left: 34px !important;
    padding-right: 34px !important;
  }

  header.cons-agency .header-middle-inner {
    grid-template-columns:
      minmax(360px, 430px)
      minmax(0, 1fr)
      minmax(235px, 285px) !important;

    column-gap: 26px !important;
  }

  header.cons-agency .brandinglogo-wrap .custom-logo-link img.custom-logo,
  header.cons-agency .site-branding img.custom-logo {
    height: 40px !important;
    max-height: 40px !important;
  }

  header.cons-agency .mmocc-anniversary-badge img {
    height: 38px !important;
    max-height: 38px !important;
  }

  header.cons-agency .box-header-nav .main-menu {
    gap: 22px !important;
  }

  header.cons-agency .box-header-nav .main-menu > .menu-item > a,
  header.cons-agency .box-header-nav .main-menu .page_item a {
    font-size: 10.5px !important;
    letter-spacing: 0.05em !important;
  }

  header.cons-agency .box-header-nav .main-menu > .menu-button-contact > a,
  .menu-button-contact a {
    font-size: 10.5px !important;
    padding-left: 17px !important;
    padding-right: 17px !important;
  }

  #mmocc-lang-slot
    > #trp-floater-ls.mmocc-lang-inside-nav
    #trp-floater-ls-language-list
    a {
    min-width: 52px !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
}

/* =========================================================
   MMOCC - Remove TRP language wrapper background/border FINAL
   Put at VERY END of style.css
   ========================================================= */

#mmocc-lang-slot .trp-language-wrap,
#mmocc-lang-slot .trp-language-wrap-top,
#mmocc-lang-slot div.trp-language-wrap.trp-language-wrap-top,
#trp-floater-ls .trp-language-wrap,
#trp-floater-ls .trp-language-wrap-top,
#trp-floater-ls div.trp-language-wrap.trp-language-wrap-top {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 0 !important;
}
/* =========================================================
   MMOCC - Language switcher remove background + border ONLY
   EN / JA / MY all visible
   Put at VERY END of style.css
   ========================================================= */

@media (min-width: 1025px) {

  /* wrapper clean */
  #mmocc-lang-slot,
  #mmocc-lang-slot #trp-floater-ls,
  #mmocc-lang-slot #trp-floater-ls-language-list,
  #mmocc-lang-slot .trp-language-wrap,
  #mmocc-lang-slot .trp-language-wrap-top,
  #mmocc-lang-slot .trp-language-switcher-container {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    margin: 0 !important;
  }

  /* keep language row layout */
  #mmocc-lang-slot #trp-floater-ls-language-list,
  #mmocc-lang-slot .trp-language-wrap,
  #mmocc-lang-slot .trp-language-wrap-top {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 18px !important;

    padding: 0 !important;
    overflow: visible !important;
  }

  /* ALL language buttons: remove background / border */
  #mmocc-lang-slot a,
  #mmocc-lang-slot #trp-floater-ls-language-list a,
  #mmocc-lang-slot .trp-language-wrap a,
  #mmocc-lang-slot .trp-language-wrap-top a,
  #mmocc-lang-slot a.mmocc-lang-current,
  #mmocc-lang-slot a.trp-ls-shortcode-current-language,
  #mmocc-lang-slot a[aria-current="true"],
  #trp-floater-ls.mmocc-lang-inside-nav a,
  #trp-floater-ls.mmocc-lang-inside-nav #trp-floater-ls-language-list a,
  #trp-floater-ls.mmocc-lang-inside-nav .trp-language-wrap a,
  #trp-floater-ls.mmocc-lang-inside-nav .trp-language-wrap-top a,
  #trp-floater-ls.mmocc-lang-inside-nav a.mmocc-lang-current,
  #trp-floater-ls.mmocc-lang-inside-nav a.trp-ls-shortcode-current-language,
  #trp-floater-ls.mmocc-lang-inside-nav a[aria-current="true"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    color: rgba(255, 238, 210, 0.92) !important;
    font-family: "Oswald", sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;

    text-decoration: none !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.38) !important;

    animation: none !important;
    transform: none !important;
  }

  /* active language color only, no box */
  #mmocc-lang-slot a.mmocc-lang-current,
  #mmocc-lang-slot a.trp-ls-shortcode-current-language,
  #mmocc-lang-slot a[aria-current="true"],
  #trp-floater-ls.mmocc-lang-inside-nav a.mmocc-lang-current,
  #trp-floater-ls.mmocc-lang-inside-nav a.trp-ls-shortcode-current-language,
  #trp-floater-ls.mmocc-lang-inside-nav a[aria-current="true"] {
    color: #f2b86d !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* hover color only, no box */
  #mmocc-lang-slot a:hover,
  #trp-floater-ls.mmocc-lang-inside-nav a:hover {
    color: #f2b86d !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* flag image clean */
  #mmocc-lang-slot a img,
  #trp-floater-ls.mmocc-lang-inside-nav a img,
  #mmocc-lang-slot a img.trp-flag-image,
  #trp-floater-ls.mmocc-lang-inside-nav a img.trp-flag-image {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center center !important;

    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    filter: none !important;
  }

  /* remove pseudo decorations */
  #mmocc-lang-slot a::before,
  #mmocc-lang-slot a::after,
  #mmocc-lang-slot .trp-language-wrap::before,
  #mmocc-lang-slot .trp-language-wrap::after,
  #mmocc-lang-slot .trp-language-wrap-top::before,
  #mmocc-lang-slot .trp-language-wrap-top::after {
    content: none !important;
    display: none !important;
  }
}

/* =========================================================
   MMOCC - Language switcher NO background / NO border FINAL
   ========================================================= */

@media (min-width: 1025px) {
  #mmocc-lang-slot,
  #mmocc-lang-slot *,
  #trp-floater-ls.mmocc-lang-inside-nav,
  #trp-floater-ls.mmocc-lang-inside-nav * {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;

    border-radius: 0 !important;
  }

  #mmocc-lang-slot,
  #mmocc-lang-slot #trp-floater-ls-language-list,
  #mmocc-lang-slot .trp-language-wrap,
  #mmocc-lang-slot .trp-language-wrap-top {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 18px !important;

    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #mmocc-lang-slot a,
  #mmocc-lang-slot #trp-floater-ls-language-list a,
  #mmocc-lang-slot .trp-language-wrap a,
  #mmocc-lang-slot .trp-language-wrap-top a,
  #trp-floater-ls.mmocc-lang-inside-nav a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: rgba(255, 238, 210, 0.92) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.38) !important;

    animation: none !important;
    transform: none !important;
  }

  #mmocc-lang-slot a:hover,
  #mmocc-lang-slot a.mmocc-lang-current,
  #mmocc-lang-slot a.trp-ls-shortcode-current-language,
  #mmocc-lang-slot a[aria-current="true"] {
    color: #f2b86d !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #mmocc-lang-slot img,
  #mmocc-lang-slot img.trp-flag-image {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;

    border-radius: 50% !important;
    object-fit: cover !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    filter: none !important;
  }

  #mmocc-lang-slot a::before,
  #mmocc-lang-slot a::after,
  #mmocc-lang-slot .trp-language-wrap::before,
  #mmocc-lang-slot .trp-language-wrap::after,
  #mmocc-lang-slot .trp-language-wrap-top::before,
  #mmocc-lang-slot .trp-language-wrap-top::after {
    content: none !important;
    display: none !important;
  }
}
/* =========================================================
   MMOCC - Featured Projects hover gray radius fix FINAL
   Put at VERY END of style.css
   ========================================================= */

#recent_posts_with_thumbnail > .feature-list,
#recent_posts_with_thumbnail > .feature-list .box {
  border-radius: 20px !important;
  overflow: hidden !important;
}

/* hover shadow/background also rounded */
#recent_posts_with_thumbnail > .feature-list .box:hover {
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* top image area */
#recent_posts_with_thumbnail .feature-list figure,
#recent_posts_with_thumbnail .feature-list .box > a:first-child {
  border-radius: 10px 10px 0 0 !important;
  overflow: hidden !important;
}

/* image itself */
#recent_posts_with_thumbnail .feature-list figure img,
#recent_posts_with_thumbnail .feature-list .box img {
  border-radius: 10px 10px 0 0 !important;
}

/* bottom gray/white content area */
#recent_posts_with_thumbnail .bottom-content {
  border-radius: 0 0 10px 10px !important;
  overflow: visible !important;
}

/* remove square pseudo layers if theme/plugin creates hover bg */
#recent_posts_with_thumbnail > .feature-list .box::before,
#recent_posts_with_thumbnail > .feature-list .box::after,
#recent_posts_with_thumbnail .bottom-content::before,
#recent_posts_with_thumbnail .bottom-content::after {
  border-radius: inherit !important;
}

/* force all hover generated layers to follow card radius */
#recent_posts_with_thumbnail > .feature-list .box:hover::before,
#recent_posts_with_thumbnail > .feature-list .box:hover::after {
  border-radius: 10px !important;
}
/* =========================================================
   MMOCC - Products and Services dropdown slow open/close FINAL
   Target: #menu-item-3576 only
   Put at VERY END of style.css
   ========================================================= */

@media (min-width: 1025px) {
  /* dropdown normal/closed state */
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576 > ul.sub-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: translateY(16px) scale(0.98) !important;
    transform-origin: top center !important;

    transition:
      opacity 0.42s ease,
      transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0.42s !important;
  }

  /* dropdown open/hover state */
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576:hover > ul.sub-menu,
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576:focus-within > ul.sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: translateY(0) scale(1) !important;

    transition:
      opacity 0.46s ease,
      transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0s !important;
  }

  /* submenu item fade-in effect */
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576 > ul.sub-menu > li {
    opacity: 0 !important;
    transform: translateY(8px) !important;

    transition:
      opacity 0.34s ease,
      transform 0.34s ease !important;
  }

  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576:hover > ul.sub-menu > li,
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576:focus-within > ul.sub-menu > li {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* small stagger delay for smoother dropdown feeling */
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576:hover > ul.sub-menu > li:nth-child(1) {
    transition-delay: 0.15s !important;
  }

  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576:hover > ul.sub-menu > li:nth-child(2) {
    transition-delay: 0.20s !important;
  }

  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576:hover > ul.sub-menu > li:nth-child(3) {
    transition-delay: 0.25s !important;
  }

  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576:hover > ul.sub-menu > li:nth-child(4) {
    transition-delay: 0.30s !important;
  }
}
/* =========================================================
   MMOCC - Products dropdown stay-open hover bridge FINAL
   Target: #menu-item-3576 only
   Put at VERY END of style.css
   ========================================================= */

@media (min-width: 1025px) {
  /* parent menu item ကို hover area တိုးပေး */
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576 {
    position: relative !important;
  }

  /* main menu နဲ့ dropdown ကြားက gap ကို invisible bridge နဲ့ ဖုံး */
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    left: -20px !important;
    right: -20px !important;
    top: 100% !important;

    height: 24px !important;

    background: transparent !important;
    pointer-events: auto !important;
    z-index: 10000 !important;
  }

  /* dropdown ကို gap မများအောင် အပေါ်နည်းနည်းတင် */
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576 > ul.sub-menu {
    top: calc(100% + 4px) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform: translateY(14px) scale(0.98) !important;
    transform-origin: top center !important;

    transition:
      opacity 0.45s ease 0.12s,
      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.12s,
      visibility 0s linear 0.65s !important;
  }

  /* hover/focus ဖြစ်တဲ့အချိန် dropdown ဖွင့် */
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576:hover > ul.sub-menu,
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576:focus-within > ul.sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: translateY(0) scale(1) !important;

    transition:
      opacity 0.42s ease 0s,
      transform 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0s,
      visibility 0s linear 0s !important;
  }

  /* submenu items ကို click လုပ်လို့ရအောင် */
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576 > ul.sub-menu,
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576 > ul.sub-menu * {
    pointer-events: auto !important;
  }

  /* item fade effect ကို close မှာ delay မဖြစ်အောင် reset */
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576 > ul.sub-menu > li {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* =========================================================
   MMOCC - Products dropdown standard size FINAL
   Target: #menu-item-3576 only
   Put at VERY END of style.css
   ========================================================= */

@media (min-width: 1025px) {
  /* popup/dropdown box size standard */
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576 > ul.sub-menu {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;

    padding: 8px 0 !important;
    border-radius: 12px !important;

    background: rgba(255, 250, 244, 0.96) !important;
  }

  /* submenu item spacing standard */
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576 > ul.sub-menu > li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* submenu text standard size / not too bold */
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576 > ul.sub-menu > li > a {
    width: 100% !important;
    box-sizing: border-box !important;

    padding: 10px 16px !important;

    font-family: "Oswald", "Roboto Condensed", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;

    color: #374151 !important;
    background: transparent !important;

    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;

    border-radius: 0 !important;
  }

  /* hover မှာလည်း bold မဖြစ်အောင် */
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576 > ul.sub-menu > li > a:hover,
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576 > ul.sub-menu > li.current-menu-item > a,
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576 > ul.sub-menu > li.current_page_item > a,
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576 > ul.sub-menu > li.current-menu-ancestor > a {
    font-size: 14px !important;
    font-weight: 500 !important;

    color: #8a4f28 !important;
    background: rgba(243, 167, 109, 0.14) !important;
  }

  /* long text ကြောင့် popup အရမ်းမကြီးအောင် */
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576 > ul.sub-menu > li > a {
    min-height: auto !important;
  }
}
/* =========================================================
   MMOCC - Products dropdown compact standard FINAL
   Target: #menu-item-3576 only
   Put at VERY END of style.css
   ========================================================= */

@media (min-width: 1025px) {
  /* popup box ကို နည်းနည်းကျဉ်းပြီး height လျှော့ */
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576 > ul.sub-menu,
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576 > ul.children {
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;

    padding: 6px 0 !important;
    border-radius: 12px !important;
  }

  /* item row height လျှော့ */
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576 > ul.sub-menu > li,
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576 > ul.children > li {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* text ကို standard / smaller / not bold */
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576 > ul.sub-menu > li > a,
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576 > ul.children > li > a,
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576 > ul.sub-menu li a,
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576 > ul.children li a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;

    padding: 8px 14px !important;

    font-family: "Roboto Condensed", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 0.8 !important;

    color: #374151 !important;
    background: transparent !important;

    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;

    min-height: 0 !important;
    height: auto !important;
  }

  /* hover/current မှာလည်း မကြီး မထူအောင် */
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576 > ul.sub-menu > li > a:hover,
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576 > ul.children > li > a:hover,
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576 > ul.sub-menu > li.current-menu-item > a,
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576 > ul.sub-menu > li.current_page_item > a,
  header.cons-agency .box-header-nav .main-menu > li#menu-item-3576 > ul.sub-menu > li.current-menu-ancestor > a {
    font-family: "Roboto Condensed", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;

    color: #8a4f28 !important;
    background: rgba(243, 167, 109, 0.12) !important;
  }
}
/* =========================================================
   MMOCC - Featured Projects smaller desktop cards
   Put at VERY END of style.css
   ========================================================= */

@media (min-width: 1025px) {
  /* container width ကို နည်းနည်းကျဉ်း */
  #rpwwt-recent-posts-widget-with-thumbnails-9 {
    max-width: 1080px !important;
    padding-top: 52px !important;
    padding-bottom: 64px !important;
  }

  /* title spacing */
  #rpwwt-recent-posts-widget-with-thumbnails-9 > h2.section-title,
  #rpwwt-recent-posts-widget-with-thumbnails-9 .section-title {
    margin-bottom: 30px !important;
    font-size: 40px !important;
  }

  /* cards ကြား gap */
  #recent_posts_with_thumbnail {
    gap: 26px !important;
  }

  /* card width smaller */
  #recent_posts_with_thumbnail > .feature-list {
    flex: 0 0 260px !important;
    width: 260px !important;
    max-width: 260px !important;
  }

  /* card height smaller */
  #recent_posts_with_thumbnail > .feature-list .box {
    height: 340px !important;
    min-height: 340px !important;
    max-height: 340px !important;
    border-radius: 22px !important;
  }

  /* image area smaller */
  #recent_posts_with_thumbnail .feature-list figure,
  #recent_posts_with_thumbnail .feature-list .box > a:first-child,
  #recent_posts_with_thumbnail .feature-list figure img,
  #recent_posts_with_thumbnail .feature-list .box img {
    height: 210px !important;
    max-height: 210px !important;
  }

  #recent_posts_with_thumbnail .feature-list figure img,
  #recent_posts_with_thumbnail .feature-list .box img {
    width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* bottom title area smaller */
  #recent_posts_with_thumbnail .bottom-content {
    height: 130px !important;
    min-height: 130px !important;
    max-height: 130px !important;
    padding: 54px 16px 16px !important;
  }

  /* orange badge smaller */
  #recent_posts_with_thumbnail .icon-box {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
  }

  #recent_posts_with_thumbnail .icon-box span {
    font-size: 10px !important;
  }

  /* title smaller */
  #recent_posts_with_thumbnail .rpwwt-post-title,
  #recent_posts_with_thumbnail .rpwwt-post-title a {
    max-height: 52px !important;
    font-size: 21px !important;
    line-height: 1.25 !important;
  }
}
/* =========================================================
   MMOCC - Featured Projects manual slider control
   Keep marquee + allow user to review skipped cards
   Put at VERY END of style.css
   ========================================================= */

/* slider controls wrapper */
.mmocc-featured-controls {
  width: min(760px, calc(100% - 32px)) !important;
  margin: 28px auto 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;

  position: relative !important;
  z-index: 10 !important;
}

/* range slider */
.mmocc-featured-range {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 6px !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  border-radius: 999px !important;
  background: linear-gradient(90deg, #d4891c 0%, #f2c27d 50%, #fff7ec 100%) !important;
  outline: none !important;
  cursor: pointer !important;

  box-shadow:
    inset 0 1px 3px rgba(138, 79, 40, 0.18),
    0 8px 18px rgba(22, 32, 51, 0.06) !important;
}

/* Chrome / Edge thumb */
.mmocc-featured-range::-webkit-slider-thumb {
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;

  background: #d4891c !important;
  border: 3px solid #fffaf3 !important;
  box-shadow:
    0 6px 16px rgba(138, 79, 40, 0.25),
    0 0 0 4px rgba(212, 137, 28, 0.14) !important;

  cursor: grab !important;
}

.mmocc-featured-range:active::-webkit-slider-thumb {
  cursor: grabbing !important;
}

/* Firefox thumb */
.mmocc-featured-range::-moz-range-thumb {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;

  background: #d4891c !important;
  border: 3px solid #fffaf3 !important;
  box-shadow:
    0 6px 16px rgba(138, 79, 40, 0.25),
    0 0 0 4px rgba(212, 137, 28, 0.14) !important;

  cursor: grab !important;
}

/* buttons */
.mmocc-featured-btn {
  flex: 0 0 auto !important;

  min-width: 46px !important;
  height: 38px !important;
  padding: 0 14px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 1px solid rgba(138, 79, 40, 0.16) !important;
  border-radius: 999px !important;

  background: linear-gradient(180deg, #fffaf3 0%, #f5eadc 100%) !important;
  color: #8a4f28 !important;

  font-family: "Oswald", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  cursor: pointer !important;
  box-shadow:
    0 8px 18px rgba(22, 32, 51, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;

  transition:
    transform 0.22s ease,
    background 0.22s ease,
    color 0.22s ease !important;
}

.mmocc-featured-btn:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, #d4891c 0%, #8a4f28 100%) !important;
  color: #ffffff !important;
}

/* user control mode: stop marquee and let JS move the row */
#recent_posts_with_thumbnail.mmocc-user-control {
  animation: none !important;
  transition: transform 0.28s ease !important;
}

/* auto mode */
#recent_posts_with_thumbnail.mmocc-auto-running {
  animation-play-state: running !important;
}

/* mobile */
@media (max-width: 767px) {
  .mmocc-featured-controls {
    width: calc(100% - 28px) !important;
    margin-top: 20px !important;
    gap: 8px !important;
  }

  .mmocc-featured-btn {
    min-width: 38px !important;
    height: 34px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  .mmocc-featured-range::-webkit-slider-thumb {
    width: 20px !important;
    height: 20px !important;
  }

  .mmocc-featured-range::-moz-range-thumb {
    width: 20px !important;
    height: 20px !important;
  }
}
/* =========================================================
   MMOCC - Featured Projects controls: hide range + auto
   Put at VERY END of style.css
   ========================================================= */

/* Hide slider bar and Auto button */
.mmocc-featured-range,
.mmocc-featured-auto {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* controls wrapper only for prev/next buttons */
.mmocc-featured-controls {
  width: auto !important;
  margin: 24px auto 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;

  position: relative !important;
  z-index: 20 !important;
}

/* prev / next buttons */
.mmocc-featured-btn {
  flex: 0 0 auto !important;

  width: 48px !important;
  min-width: 48px !important;
  height: 40px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 1px solid rgba(138, 79, 40, 0.16) !important;
  border-radius: 999px !important;

  background: linear-gradient(180deg, #fffaf3 0%, #f5eadc 100%) !important;
  color: #8a4f28 !important;

  font-family: "Oswald", sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  cursor: pointer !important;

  box-shadow:
    0 8px 18px rgba(22, 32, 51, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;

  transition:
    transform 0.22s ease,
    background 0.22s ease,
    color 0.22s ease !important;
}

.mmocc-featured-btn:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, #d4891c 0%, #8a4f28 100%) !important;
  color: #ffffff !important;
}

/* Manual preview mode */
#recent_posts_with_thumbnail.mmocc-user-control {
  animation: none !important;
  transition: transform 0.25s ease !important;
}

/* mobile */
@media (max-width: 767px) {
  .mmocc-featured-controls {
    margin-top: 18px !important;
    gap: 14px !important;
  }

  .mmocc-featured-btn {
    width: 42px !important;
    min-width: 42px !important;
    height: 36px !important;
    font-size: 20px !important;
  }
}
/* =========================================================
   MMOCC - Featured Projects prev/next button center fix
   Put at VERY END of style.css
   ========================================================= */

.mmocc-featured-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;

  width: 100% !important;
  margin: 24px auto 0 !important;
  padding: 0 !important;

  line-height: 0 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.mmocc-featured-btn,
button.mmocc-featured-btn,
.mmocc-featured-controls .mmocc-featured-btn {
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;

  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 1px solid rgba(138, 79, 40, 0.16) !important;
  border-radius: 999px !important;

  background: linear-gradient(180deg, #fffaf3 0%, #f5eadc 100%) !important;
  color: #8a4f28 !important;

  font-family: Arial, sans-serif !important;
  font-size: 0 !important;
  font-weight: 700 !important;
  line-height: 0 !important;

  text-align: center !important;
  text-indent: 0 !important;

  cursor: pointer !important;
  box-sizing: border-box !important;
  overflow: hidden !important;

  box-shadow:
    0 8px 18px rgba(22, 32, 51, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

/* Use pseudo content instead of raw button text, so icon is perfectly centered */
.mmocc-featured-btn {
  color: transparent !important;
}

.mmocc-featured-btn::before {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #8a4f28 !important;
  font-family: Arial, sans-serif !important;
  font-size: 25px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  text-align: center !important;

  transform: translateY(-1px) !important;
}

.mmocc-featured-prev::before {
  content: "‹" !important;
}

.mmocc-featured-next::before {
  content: "›" !important;
}

.mmocc-featured-btn:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, #d4891c 0%, #8a4f28 100%) !important;
}

.mmocc-featured-btn:hover::before {
  color: #ffffff !important;
}

/* remove any hidden original text influence */
.mmocc-featured-btn,
.mmocc-featured-btn * {
  vertical-align: middle !important;
}

/* mobile */
@media (max-width: 767px) {
  .mmocc-featured-controls {
    margin-top: 18px !important;
    gap: 14px !important;
  }

  .mmocc-featured-btn,
  button.mmocc-featured-btn,
  .mmocc-featured-controls .mmocc-featured-btn {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;

    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
  }

  .mmocc-featured-btn::before {
    font-size: 23px !important;
    transform: translateY(-1px) !important;
  }
}
/* =========================================================
   MMOCC - Tablet/Mobile header black only
   Laptop/Desktop keeps current style
   Put at VERY END of style.css
   ========================================================= */

@media (max-width: 1024px) {
  header.cons-agency,
  header.cons-agency .nav-classic {
    background: #050505 !important;
    background-color: #050505 !important;
    background-image: none !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22) !important;
  }

  /* decorative layer ကို အမဲ theme နဲ့ blend ဖြစ်အောင် */
  header.cons-agency .mmocc-header-gradient {
    background:
      radial-gradient(circle at 18% 20%, rgba(212, 137, 28, 0.16), transparent 26%),
      linear-gradient(90deg, #050505 0%, #111111 48%, #050505 100%) !important;
  }

  /* MENU text */
  header.cons-agency button.toggle,
  header.cons-agency button.nav-toggle,
  header.cons-agency button.mobile-nav-toggle,
  header.cons-agency button.mmocc-fixed-mobile-toggle,
  header.cons-agency button.mmocc-fixed-mobile-toggle > span.mmocc-toggle-label,
  header.cons-agency button.mmocc-fixed-mobile-toggle > span.mmocc-toggle-icon {
    color: #ffffff !important;
  }

  /* Logo ပိုမြင်အောင် */
  header.cons-agency .site-branding img.custom-logo,
  header.cons-agency .brandinglogo-wrap .custom-logo-link img.custom-logo {
    filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.16)) !important;
  }

  header.cons-agency .mmocc-anniversary-badge img {
    filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.12)) !important;
  }

  /* Sakura petals အမဲ background ပေါ်မှာ နည်းနည်းပေါ်အောင် */
  header.cons-agency .mmocc-sakura {
    opacity: 0.75 !important;
    background: linear-gradient(135deg, #ffd3b0 0%, #d4891c 100%) !important;
  }
}
/* =========================================================
   MMOCC - Hide only sparkle-tabs we-tab-area
   Keep mobile menu categories/items visible
   Put at VERY END of style.css
   ========================================================= */

@media (max-width: 1024px) {
  /* Hide ONLY the MENU tab strip */
  .menu-modal .sparkle-tabs.we-tab-area,
  .menu-modal div.sparkle-tabs.we-tab-area {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;

    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* Make sure menu content remains visible */
  .menu-modal .sparkle-tab-content,
  .menu-modal .sparkle-tab-content.active,
  .menu-modal #sparkle-content-menu1,
  .menu-modal nav.mobile-menu,
  .menu-modal nav.mobile-menu ul.modal-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    height: auto !important;
    max-height: none !important;

    margin-top: 0 !important;
    padding-top: 0 !important;

    overflow: visible !important;
    pointer-events: auto !important;
  }

  /* Remove blank space where the tab area was */
  .menu-modal .sparkle-tab-wrap,
  .menu-modal .menu-top {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}
/* =========================================================
   MMOCC - Mobile modal menu same background color fix
   Put at VERY END of style.css
   ========================================================= */

@media (max-width: 1024px) {
  /* modal drawer parent wrappers */
  .menu-modal,
  .menu-modal.active,
  .menu-modal.show-modal,
  .menu-modal .menu-modal-inner,
  .menu-modal .menu-wrapper,
  .menu-modal .menu-top,
  .menu-modal .sparkle-tab-content,
  .menu-modal .sparkle-tab-content.active,
  .menu-modal #sparkle-content-menu1,
  .menu-modal nav.mobile-menu {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
  }

  /* actual menu list */
  .menu-modal nav.mobile-menu ul.modal-menu,
  .menu-modal ul.modal-menu,
  nav.mobile-menu ul.modal-menu {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    box-shadow: none !important;
  }

  /* each menu row */
  .menu-modal nav.mobile-menu ul.modal-menu > li,
  nav.mobile-menu ul.modal-menu > li {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border-bottom: 1px solid #e5e5e5 !important;
    box-shadow: none !important;
  }

  /* menu links */
  .menu-modal nav.mobile-menu ul.modal-menu > li > a,
  nav.mobile-menu ul.modal-menu > li > a {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;

    color: #222b36 !important;
    opacity: 1 !important;

    min-height: 52px !important;
    padding: 0 26px !important;

    display: flex !important;
    align-items: center !important;

    border: 0 !important;
    box-shadow: none !important;
  }

  /* submenu arrow box ကိုလည်း same white */
  .menu-modal nav.mobile-menu ul.modal-menu button.sub-menu-toggle,
  nav.mobile-menu ul.modal-menu button.sub-menu-toggle {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;

    color: #222b36 !important;

    border-left: 1px solid #e5e5e5 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  /* hover/current မှာပဲ အနည်းငယ် color ပြောင်း */
  .menu-modal nav.mobile-menu ul.modal-menu > li:hover > a,
  .menu-modal nav.mobile-menu ul.modal-menu > li.current-menu-item > a,
  nav.mobile-menu ul.modal-menu > li:hover > a,
  nav.mobile-menu ul.modal-menu > li.current-menu-item > a {
    background: #f8f3ec !important;
    background-color: #f8f3ec !important;
    color: #8a4f28 !important;
  }

  .menu-modal nav.mobile-menu ul.modal-menu > li:hover button.sub-menu-toggle,
  nav.mobile-menu ul.modal-menu > li:hover button.sub-menu-toggle {
    background: #f8f3ec !important;
    background-color: #f8f3ec !important;
    color: #8a4f28 !important;
  }
}
/* =========================================================
   MMOCC - Mobile menu drawer full background + lighter font
   Put at VERY END of style.css
   ========================================================= */

@media (max-width: 1024px) {
  /* whole left drawer background */
  .menu-modal .menu-modal-inner.modal-inner,
  .menu-modal .menu-modal-inner,
  .menu-modal .modal-inner,
  .menu-modal .menu-wrapper,
  .menu-modal .section-inner,
  .menu-modal .menu-top,
  .menu-modal .sparkle-tab-content,
  .menu-modal .sparkle-tab-content.active,
  .menu-modal #sparkle-content-menu1,
  .menu-modal nav.mobile-menu,
  .menu-modal ul.modal-menu {
    background: #e8f8ff !important;
    background-color: #e8f8ff !important;
    background-image: none !important;
  }

  /* menu rows */
  .menu-modal nav.mobile-menu ul.modal-menu > li,
  nav.mobile-menu ul.modal-menu > li {
    background: #e8f8ff !important;
    background-color: #e8f8ff !important;
    background-image: none !important;

    border-bottom: 1px solid rgba(34, 43, 54, 0.08) !important;
  }

  /* menu text - not bold + smaller */
  .menu-modal nav.mobile-menu ul.modal-menu > li > a,
  nav.mobile-menu ul.modal-menu > li > a {
    background: #e8f8ff !important;
    background-color: #e8f8ff !important;
    background-image: none !important;

    color: #31495c !important;

    font-family: "Oswald", "Roboto Condensed", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;

    min-height: 48px !important;
    padding: 0 26px !important;

    display: flex !important;
    align-items: center !important;

    border: 0 !important;
    box-shadow: none !important;
  }

  /* submenu arrow area */
  .menu-modal nav.mobile-menu ul.modal-menu button.sub-menu-toggle,
  nav.mobile-menu ul.modal-menu button.sub-menu-toggle {
    background: #e8f8ff !important;
    background-color: #e8f8ff !important;
    background-image: none !important;

    color: #31495c !important;

    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;

    border-left: 1px solid rgba(34, 43, 54, 0.08) !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  /* hover / current item */
  .menu-modal nav.mobile-menu ul.modal-menu > li:hover > a,
  .menu-modal nav.mobile-menu ul.modal-menu > li.current-menu-item > a,
  .menu-modal nav.mobile-menu ul.modal-menu > li.current_page_item > a,
  nav.mobile-menu ul.modal-menu > li:hover > a,
  nav.mobile-menu ul.modal-menu > li.current-menu-item > a,
  nav.mobile-menu ul.modal-menu > li.current_page_item > a {
    background: #d7f0fa !important;
    background-color: #d7f0fa !important;

    color: #8a4f28 !important;
    font-weight: 400 !important;
  }

  .menu-modal nav.mobile-menu ul.modal-menu > li:hover button.sub-menu-toggle,
  nav.mobile-menu ul.modal-menu > li:hover button.sub-menu-toggle {
    background: #d7f0fa !important;
    background-color: #d7f0fa !important;
    color: #8a4f28 !important;
  }

  /* language row background same as drawer */
  nav.mobile-menu ul.modal-menu li.mmocc-mobile-lang-item {
    background: #e8f8ff !important;
    background-color: #e8f8ff !important;
    border-bottom: 1px solid rgba(34, 43, 54, 0.08) !important;
  }
}
/* =========================================================
   MMOCC - Mobile drawer submenu font small + not bold FINAL
   Put at VERY END of style.css
   ========================================================= */

@media (max-width: 1024px) {
  /* Products and Services opened submenu wrapper */
  .menu-modal nav.mobile-menu ul.modal-menu ul.sub-menu,
  .menu-modal nav.mobile-menu ul.modal-menu ul.sub-menu.toggling-target,
  .menu-modal nav.mobile-menu ul.modal-menu ul.sub-menu.toggling-target.active,
  nav.mobile-menu ul.modal-menu ul.sub-menu,
  nav.mobile-menu ul.modal-menu ul.sub-menu.toggling-target,
  nav.mobile-menu ul.modal-menu ul.sub-menu.toggling-target.active {
    background: #e8f8ff !important;
    background-color: #e8f8ff !important;
    background-image: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    box-shadow: none !important;
  }

  /* submenu li rows */
  .menu-modal nav.mobile-menu ul.modal-menu ul.sub-menu > li,
  .menu-modal nav.mobile-menu ul.modal-menu ul.sub-menu.toggling-target.active > li,
  nav.mobile-menu ul.modal-menu ul.sub-menu > li,
  nav.mobile-menu ul.modal-menu ul.sub-menu.toggling-target.active > li {
    background: #e8f8ff !important;
    background-color: #e8f8ff !important;
    background-image: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border-bottom: 1px solid rgba(34, 43, 54, 0.06) !important;
    box-shadow: none !important;
  }

  /* submenu link font: smaller + not bold */
  .menu-modal nav.mobile-menu ul.modal-menu ul.sub-menu > li > a,
  .menu-modal nav.mobile-menu ul.modal-menu ul.sub-menu.toggling-target > li > a,
  .menu-modal nav.mobile-menu ul.modal-menu ul.sub-menu.toggling-target.active > li > a,
  nav.mobile-menu ul.modal-menu ul.sub-menu > li > a,
  nav.mobile-menu ul.modal-menu ul.sub-menu.toggling-target > li > a,
  nav.mobile-menu ul.modal-menu ul.sub-menu.toggling-target.active > li > a {
    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 40px !important;

    margin: 0 !important;
    padding: 0 26px 0 34px !important;

    background: #e8f8ff !important;
    background-color: #e8f8ff !important;
    background-image: none !important;

    color: #31495c !important;

    font-family: "Oswald", "Roboto Condensed", Arial, sans-serif !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    white-space: normal !important;
  }

  /* current / active submenu item also not bold */
  .menu-modal nav.mobile-menu ul.modal-menu ul.sub-menu > li.current-menu-item > a,
  .menu-modal nav.mobile-menu ul.modal-menu ul.sub-menu > li.current_page_item > a,
  .menu-modal nav.mobile-menu ul.modal-menu ul.sub-menu > li:hover > a,
  nav.mobile-menu ul.modal-menu ul.sub-menu > li.current-menu-item > a,
  nav.mobile-menu ul.modal-menu ul.sub-menu > li.current_page_item > a,
  nav.mobile-menu ul.modal-menu ul.sub-menu > li:hover > a {
    background: #d7f0fa !important;
    background-color: #d7f0fa !important;

    color: #8a4f28 !important;

    font-size: 10px !important;
    font-weight: 400 !important;
  }

  /* submenu text inside span/strong also force */
  .menu-modal nav.mobile-menu ul.modal-menu ul.sub-menu > li > a *,
  nav.mobile-menu ul.modal-menu ul.sub-menu > li > a * {
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
  }
}
/* =========================================================
   MMOCC - Why Choose cards below hero
   Inserted after .sp-banner-wrapper
   ========================================================= */

.home .mmocc-why-choose-section {
  position: relative !important;
  z-index: 20 !important;

  margin: 0 !important;
  padding: 34px 0 46px !important;

  background:
    radial-gradient(circle at 16% 16%, rgba(240, 160, 75, 0.08), transparent 22%),
    radial-gradient(circle at 84% 18%, rgba(212, 137, 28, 0.06), transparent 20%),
    linear-gradient(180deg, #f7f3ec 0%, #efe7dc 100%) !important;

  overflow: hidden !important;
}

.home .mmocc-why-choose-section::before {
  content: "";
  position: absolute;
  left: -4%;
  top: -82px;
  width: 108%;
  height: 132px;
  background: #f7f3ec;
  border-bottom-left-radius: 50% 100%;
  border-bottom-right-radius: 50% 100%;
  pointer-events: none;
  z-index: 0;
}

.home .mmocc-why-choose-inner {
  position: relative !important;
  z-index: 2 !important;

  width: min(1180px, calc(100% - 40px)) !important;
  margin: 0 auto !important;
}

.home .mmocc-section-heading {
  text-align: center !important;
  margin: 0 0 24px !important;
}

.home .mmocc-section-heading h2 {
  margin: 0 !important;
  color: #332b26 !important;
  font-family: "Oswald", "Roboto Condensed", Arial, sans-serif !important;
  font-size: clamp(28px, 3vw, 42px) !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.home .mmocc-section-heading span {
  display: block !important;
  width: 96px !important;
  height: 3px !important;
  margin: 14px auto 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent 0%, #d4891c 45%, #d4891c 55%, transparent 100%) !important;
  position: relative !important;
}

/* .home .mmocc-section-heading span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #d4891c;
} */

.home .mmocc-why-cards {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

.home .mmocc-why-card {
  min-height: 206px !important;
  padding: 24px 18px 22px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  text-align: center !important;

  background: rgba(255, 253, 250, 0.96) !important;
  border: 1px solid rgba(138, 79, 40, 0.10) !important;
  border-radius: 16px !important;

  box-shadow:
    0 14px 30px rgba(17, 24, 39, 0.07),
    0 4px 10px rgba(17, 24, 39, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;

  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease !important;
}

.home .mmocc-why-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(212, 137, 28, 0.26) !important;
  box-shadow:
    0 22px 44px rgba(17, 24, 39, 0.11),
    0 8px 18px rgba(17, 24, 39, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.home .mmocc-why-icon {
  width: 58px !important;
  height: 58px !important;
  margin: 0 0 14px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #102a52 !important;
  font-size: 34px !important;
  line-height: 1 !important;

  background: linear-gradient(180deg, #fffaf2 0%, #f3e5d2 100%) !important;
  border: 2px solid rgba(212, 137, 28, 0.45) !important;
  border-radius: 50% !important;

  box-shadow: 0 8px 18px rgba(138, 79, 40, 0.10) !important;
}

.home .mmocc-why-badge {
  font-family: "Oswald", sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #102a52 !important;
}

.home .mmocc-why-card h3 {
  margin: 0 0 10px !important;
  color: #111827 !important;

  font-family: "Oswald", "Roboto Condensed", Arial, sans-serif !important;
  font-size: 17px !important;
  line-height: 1.28 !important;
  font-weight: 700 !important;
}

.home .mmocc-why-card p {
  margin: 0 !important;
  color: #3f4652 !important;

  font-family: "Roboto Condensed", Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
}

/* Move Featured Projects closer/cleaner after new cards */
.home .mmocc-why-choose-section + section.cons_light_feature.team-list.style1 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Tablet */
@media (max-width: 1024px) {
  .home .mmocc-why-choose-section {
    padding: 30px 0 40px !important;
  }

  .home .mmocc-why-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .home .mmocc-why-card {
    min-height: 190px !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .home .mmocc-why-choose-inner {
    width: min(100% - 28px, 460px) !important;
  }

  .home .mmocc-section-heading h2 {
    font-size: 26px !important;
  }

  .home .mmocc-why-cards {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .home .mmocc-why-card {
    min-height: 0 !important;
    padding: 22px 18px !important;
  }

  .home .mmocc-why-card h3 {
    font-size: 16px !important;
  }

  .home .mmocc-why-card p {
    font-size: 13px !important;
  }
}
html[lang^="my"] .mmocc-why-choose-section,
body.translatepress-my_MM .mmocc-why-choose-section,
body.trp-language-my_MM .mmocc-why-choose-section {
  font-family: "pyidaungsu", "Myanmar3", sans-serif !important;
}

html[lang^="my"] .mmocc-section-heading h2,
body.translatepress-my_MM .mmocc-section-heading h2,
body.trp-language-my_MM .mmocc-section-heading h2,
html[lang^="my"] .mmocc-why-card h3,
body.translatepress-my_MM .mmocc-why-card h3,
body.trp-language-my_MM .mmocc-why-card h3,
html[lang^="my"] .mmocc-why-card p,
body.translatepress-my_MM .mmocc-why-card p,
body.trp-language-my_MM .mmocc-why-card p {
  font-family: "pyidaungsu", "Myanmar3", sans-serif !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}

html[lang^="ja"] .mmocc-why-choose-section,
body.translatepress-ja .mmocc-why-choose-section,
body.trp-language-ja .mmocc-why-choose-section {
  font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif !important;
}
/* =========================================================
   MMOCC - Why Choose section subtitle
   TranslatePress editable text under heading
   ========================================================= */

.home .mmocc-section-heading .mmocc-section-subtitle {
  display: block !important;
  max-width: 720px !important;

  margin: 14px auto 0 !important;
  padding: 0 16px !important;

  color: #5f6673 !important;

  font-family: "Roboto Condensed", Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;

  text-align: center !important;
}

.home .mmocc-section-heading {
  margin-bottom: 34px !important;
}

/* Japanese subtitle */
html[lang^="ja"] .home .mmocc-section-heading .mmocc-section-subtitle,
body.translatepress-ja .home .mmocc-section-heading .mmocc-section-subtitle,
body.trp-language-ja .home .mmocc-section-heading .mmocc-section-subtitle {
  font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif !important;
  line-height: 1.7 !important;
}

/* Myanmar subtitle */
html[lang^="my"] .home .mmocc-section-heading .mmocc-section-subtitle,
body.translatepress-my_MM .home .mmocc-section-heading .mmocc-section-subtitle,
body.trp-language-my_MM .home .mmocc-section-heading .mmocc-section-subtitle {
  font-family: "pyidaungsu", "Myanmar3", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.85 !important;
  letter-spacing: 0 !important;
}

/* Mobile */
@media (max-width: 767px) {
  .home .mmocc-section-heading .mmocc-section-subtitle {
    max-width: 94% !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
    margin-top: 12px !important;
  }

  .home .mmocc-section-heading {
    margin-bottom: 26px !important;
  }
}
/* =========================================================
   MMOCC - Read More button hover color override
   Hover initial: #CE9E51
   Hover before:  #F8931F
   Put at VERY END of style.css
   ========================================================= */

body .site-content section a.btn.btn-primary,
body .site-content section .btn.btn-primary {
  position: relative !important;
  overflow: hidden !important;

  background: #CE9E51 !important;
  background-color: #CE9E51 !important;
  background-image: none !important;

  color: #ffffff !important;
  border-color: #CE9E51 !important;

  z-index: 1 !important;
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease !important;
}

body .site-content section a.btn.btn-primary::before,
body .site-content section .btn.btn-primary::before {
  content: "" !important;

  position: absolute !important;
  inset: 0 !important;

  background: #F8931F !important;
  background-color: #F8931F !important;
  background-image: none !important;

  transform: translateX(-100%) !important;
  transition: transform 0.35s ease !important;

  z-index: -1 !important;
  pointer-events: none !important;
}

body .site-content section a.btn.btn-primary:hover,
body .site-content section .btn.btn-primary:hover,
body .site-content section a.btn.btn-primary:focus,
body .site-content section .btn.btn-primary:focus {
  background: #CE9E51 !important;
  background-color: #CE9E51 !important;
  background-image: none !important;

  color: #ffffff !important;
  border-color: #CE9E51 !important;

  transform: translateY(-2px) !important;
}

body .site-content section a.btn.btn-primary:hover::before,
body .site-content section .btn.btn-primary:hover::before,
body .site-content section a.btn.btn-primary:focus::before,
body .site-content section .btn.btn-primary:focus::before {
  transform: translateX(0) !important;
}
/* =========================================================
   MMOCC - Our Featured Projects underline by real span
   Same style as Why Choose heading span
   Put at VERY END of style.css
   ========================================================= */

/* title */
body.home #rpwwt-recent-posts-widget-with-thumbnails-9 > h2.section-title {
  position: relative !important;
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 auto 42px !important;
  padding: 0 16px !important;

  text-align: center !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* old pseudo underline/dot တွေအကုန်ပိတ် */
body.home #rpwwt-recent-posts-widget-with-thumbnails-9 > h2.section-title::before,
body.home #rpwwt-recent-posts-widget-with-thumbnails-9 > h2.section-title::after,
body.home #rpwwt-recent-posts-widget-with-thumbnails-9 .section-title::before,
body.home #rpwwt-recent-posts-widget-with-thumbnails-9 .section-title::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* real span underline */
body.home #rpwwt-recent-posts-widget-with-thumbnails-9 > h2.section-title .mmocc-feature-title-line {
  display: block !important;

  width: 96px !important;
  height: 3px !important;

  margin: 16px auto 0 !important;

  position: relative !important;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(248, 147, 31, 0.18) 12%,
    #f8931f 50%,
    rgba(248, 147, 31, 0.18) 88%,
    transparent 100%
  ) !important;

  border-radius: 999px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* center dot */
body.home #rpwwt-recent-posts-widget-with-thumbnails-9 > h2.section-title .mmocc-feature-title-line::after {
  content: "" !important;
  display: block !important;

  position: absolute !important;
  left: 50% !important;
  top: 50% !important;

  width: 10px !important;
  height: 10px !important;

  transform: translate(-50%, -50%) !important;

  background: #d4891c !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 6px rgba(212, 137, 28, 0.12) !important;

  opacity: 1 !important;
  visibility: visible !important;
}

/* mobile */
@media (max-width: 767px) {
  body.home #rpwwt-recent-posts-widget-with-thumbnails-9 > h2.section-title {
    margin-bottom: 32px !important;
  }

  body.home #rpwwt-recent-posts-widget-with-thumbnails-9 > h2.section-title .mmocc-feature-title-line {
    width: 78px !important;
    margin-top: 12px !important;
  }

  body.home #rpwwt-recent-posts-widget-with-thumbnails-9 > h2.section-title .mmocc-feature-title-line::after {
    width: 8px !important;
    height: 8px !important;
    box-shadow: 0 0 0 5px rgba(212, 137, 28, 0.12) !important;
  }
}
/* =========================================================
   MMOCC - Our Featured Projects underline ONLY, no dot
   Put at VERY END of style.css
   ========================================================= */

body.home #rpwwt-recent-posts-widget-with-thumbnails-9 > h2.section-title {
  position: relative !important;
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 auto 42px !important;
  padding: 0 16px !important;

  text-align: center !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* old pseudo underline/dot အကုန်ပိတ် */
body.home #rpwwt-recent-posts-widget-with-thumbnails-9 > h2.section-title::before,
body.home #rpwwt-recent-posts-widget-with-thumbnails-9 > h2.section-title::after,
body.home #rpwwt-recent-posts-widget-with-thumbnails-9 .section-title::before,
body.home #rpwwt-recent-posts-widget-with-thumbnails-9 .section-title::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* line only */
body.home #rpwwt-recent-posts-widget-with-thumbnails-9 > h2.section-title .mmocc-feature-title-line {
  display: block !important;

  width: 96px !important;
  height: 3px !important;

  margin: 16px auto 0 !important;

  position: relative !important;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(248, 147, 31, 0.18) 12%,
    #d4891c 50%,
    rgba(248, 147, 31, 0.18) 88%,
    transparent 100%
  ) !important;

  border-radius: 999px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* dot ကိုဖျက် */
body.home #rpwwt-recent-posts-widget-with-thumbnails-9 > h2.section-title .mmocc-feature-title-line::before,
body.home #rpwwt-recent-posts-widget-with-thumbnails-9 > h2.section-title .mmocc-feature-title-line::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* mobile */
@media (max-width: 767px) {
  body.home #rpwwt-recent-posts-widget-with-thumbnails-9 > h2.section-title {
    margin-bottom: 32px !important;
  }

  body.home #rpwwt-recent-posts-widget-with-thumbnails-9 > h2.section-title .mmocc-feature-title-line {
    width: 78px !important;
    margin-top: 12px !important;
  }
}

/* =========================================================
   MMOCC - Latest News underline ONLY, no dot
   Put at VERY END of style.css
   ========================================================= */

body.home #cl_blog h2.section-title,
body.home #cl_blog .section-title h2 {
  position: relative !important;
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 auto 18px !important;
  padding: 0 16px !important;

  text-align: center !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* old pseudo underline/dot အကုန်ပိတ် */
body.home #cl_blog h2.section-title::before,
body.home #cl_blog h2.section-title::after,
body.home #cl_blog .section-title::before,
body.home #cl_blog .section-title::after,
body.home #cl_blog .section-title h2::before,
body.home #cl_blog .section-title h2::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* line only */
body.home #cl_blog h2.section-title .mmocc-latest-title-line,
body.home #cl_blog .section-title h2 .mmocc-latest-title-line {
  display: block !important;

  width: 96px !important;
  height: 3px !important;

  margin: 16px auto 0 !important;

  position: relative !important;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(248, 147, 31, 0.18) 12%,
    #d4891c 50%,
    rgba(248, 147, 31, 0.18) 88%,
    transparent 100%
  ) !important;

  border-radius: 999px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* dot မထွက်အောင် */
body.home #cl_blog h2.section-title .mmocc-latest-title-line::before,
body.home #cl_blog h2.section-title .mmocc-latest-title-line::after,
body.home #cl_blog .section-title h2 .mmocc-latest-title-line::before,
body.home #cl_blog .section-title h2 .mmocc-latest-title-line::after {
  content: none !important;
  display: none !important;
}

/* Our Blogs subtitle spacing */
body.home #cl_blog .section-title p,
body.home #cl_blog .section-tagline {
  margin-top: 16px !important;
}

/* mobile */
@media (max-width: 767px) {
  body.home #cl_blog h2.section-title,
  body.home #cl_blog .section-title h2 {
    margin-bottom: 14px !important;
  }

  body.home #cl_blog h2.section-title .mmocc-latest-title-line,
  body.home #cl_blog .section-title h2 .mmocc-latest-title-line {
    width: 78px !important;
    margin-top: 12px !important;
  }
}

/* =========================================================
   MMOCC - Remote Work feature icon list
   Put at VERY END of style.css
   ========================================================= */

body.home #free-hand-text-section .container {
  position: relative !important;
  z-index: 2 !important;
}

/* list wrapper */
body.home #free-hand-text-section .mmocc-remote-feature-list {
  display: grid !important;
  grid-template-columns: repeat(2, max-content) !important;
  gap: 12px 34px !important;

  width: fit-content !important;
  max-width: 100% !important;

  margin: 22px 0 24px !important;
  padding: 0 !important;

  list-style: none !important;
}

/* each item */
body.home #free-hand-text-section .mmocc-remote-feature-list li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;

  color: #2f2924 !important;
  font-family: "Roboto Condensed", "pyidaungsu", "Myanmar3", sans-serif !important;
  font-size: 19px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
}

/* remove theme bullets */
body.home #free-hand-text-section .mmocc-remote-feature-list li::before,
body.home #free-hand-text-section .mmocc-remote-feature-list li::after {
  content: none !important;
  display: none !important;
}

/* orange check icon */
body.home #free-hand-text-section .mmocc-remote-feature-icon {
  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;

  border-radius: 50% !important;
  background: #f8931f !important;

  box-shadow:
    0 5px 12px rgba(248, 147, 31, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

/* white check mark */
body.home #free-hand-text-section .mmocc-remote-feature-icon::before {
  content: "" !important;
  display: block !important;

  width: 8px !important;
  height: 5px !important;

  border-left: 2px solid #ffffff !important;
  border-bottom: 2px solid #ffffff !important;

  transform: rotate(-45deg) translate(1px, -1px) !important;
}

/* text */
body.home #free-hand-text-section .mmocc-remote-feature-text {
  display: inline-block !important;
  color: #2f2924 !important;
}

/* Read More spacing */
body.home #free-hand-text-section a.btn.btn-primary,
body.home #free-hand-text-section .btn.btn-primary {
  margin-top: 4px !important;
}

/* tablet */
@media (max-width: 1024px) {
  body.home #free-hand-text-section .mmocc-remote-feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 22px !important;
    width: 100% !important;
    margin: 20px 0 22px !important;
  }

  body.home #free-hand-text-section .mmocc-remote-feature-list li {
    font-size: 17px !important;
  }
}

/* mobile */
@media (max-width: 767px) {
  body.home #free-hand-text-section .mmocc-remote-feature-list {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 18px 0 20px !important;
  }

  body.home #free-hand-text-section .mmocc-remote-feature-list li {
    font-size: 16px !important;
  }

  body.home #free-hand-text-section .mmocc-remote-feature-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
  }
}
/* =========================================================
   MMOCC - Remote Work section font match with Why cards
   Put at VERY END of style.css
   ========================================================= */

.home #free-hand-text-section,
.home #free-hand-text-section .container {
  font-family: "Roboto Condensed", Arial, sans-serif !important;
}

/* Title: like picture 1 card title */
.home #free-hand-text-section h3 {
  font-family: "Oswald", "Roboto Condensed", Arial, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: #232529 !important;
  margin: 0 0 14px !important;
}

/* Paragraph: like picture 1 card paragraph */
.home #free-hand-text-section p {
  font-family: "Roboto Condensed", Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: #374151 !important;
  margin: 0 0 20px !important;
}

/* Feature list text: same as picture 1 paragraph */
.home #free-hand-text-section .mmocc-remote-feature-text {
  font-family: "Roboto Condensed", Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: #374151 !important;
}

/* Icon size also reduce to match smaller text */
.home #free-hand-text-section .mmocc-remote-feature-icon {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  font-size: 10px !important;
}

/* List spacing after font size reduce */
.home #free-hand-text-section .mmocc-remote-feature-list {
  gap: 12px 24px !important;
  margin: 18px 0 22px !important;
}

.home #free-hand-text-section .mmocc-remote-feature-list li {
  gap: 10px !important;
}