/*
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.55 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !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.65 !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;
}

/* =========================================================
   MMOCC - Hero fullscreen + keep slider images + visible curve
   Put at VERY END of style.css
   ========================================================= */

@media (min-width: 1025px) {
  /* Hero wrapper: screen အပြည့် */
  body.home header.cons-agency + .sp-banner-wrapper {
    position: relative !important;

    width: 100% !important;
    min-height: 100vh !important;
    height: 100vh !important;
    max-height: none !important;

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

    overflow: hidden !important;

    /* IMPORTANT: slider background image မပျောက်အောင် transparent မလုပ် */
    background-color: transparent !important;
  }

  /* Owl slider containers */
  body.home header.cons-agency + .sp-banner-wrapper .banner-slider,
  body.home header.cons-agency + .sp-banner-wrapper .owl-stage-outer,
  body.home header.cons-agency + .sp-banner-wrapper .owl-stage,
  body.home header.cons-agency + .sp-banner-wrapper .owl-item,
  body.home header.cons-agency + .sp-banner-wrapper .item,
  body.home header.cons-agency + .sp-banner-wrapper .slide-item,
  body.home header.cons-agency + .sp-banner-wrapper .slider-item {
    min-height: 100vh !important;
    height: 100vh !important;
    max-height: none !important;

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

    position: relative !important;
    overflow: hidden !important;

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

  /* slider ပုံက background-image ဖြစ်တဲ့အခါ ပုံပြန်ပေါ်စေ */
  body.home header.cons-agency + .sp-banner-wrapper .slide-item[style*="background"],
  body.home header.cons-agency + .sp-banner-wrapper .slider-item[style*="background"],
  body.home header.cons-agency + .sp-banner-wrapper .item[style*="background"] {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  /* slider ပုံက img tag ဖြစ်တဲ့အခါ */
  body.home header.cons-agency + .sp-banner-wrapper img,
  body.home header.cons-agency + .sp-banner-wrapper .slide-image,
  body.home header.cons-agency + .sp-banner-wrapper .banner-image {
    display: block !important;

    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;

    object-fit: cover !important;
    object-position: center center !important;

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

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

  /* hero overlay / text ကို image ပေါ်မှာပြန်တင် */
  body.home header.cons-agency + .sp-banner-wrapper .banner-table,
  body.home header.cons-agency + .sp-banner-wrapper .banner-table-cell,
  body.home header.cons-agency + .sp-banner-wrapper .slider-content {
    position: relative !important;
    z-index: 10 !important;
  }

  body.home .banner-slider .slider-content,
  body.home .banner-slider .slide-item .slider-content,
  body.home .banner-slider .slider-item .slider-content {
    padding-top: 170px !important;
    padding-bottom: 150px !important;
  }

  /* Curve */
  body.home header.cons-agency + .sp-banner-wrapper::after {
    content: "" !important;

    position: absolute !important;
    left: -3% !important;
    bottom: -1px !important;

    width: 106% !important;
    height: clamp(105px, 7.8vw, 150px) !important;

    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.10),
        transparent 24%
      ),
      linear-gradient(
        180deg,
        #f6efe5 0%,
        #f3ede4 46%,
        #efe7dc 76%,
        #efe7dc 100%
      ) !important;

    border-top-left-radius: 48% 100% !important;
    border-top-right-radius: 48% 100% !important;

    z-index: 30 !important;
    pointer-events: none !important;
  }

  /* glow */
  body.home header.cons-agency + .sp-banner-wrapper::before {
    content: "" !important;

    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: clamp(70px, 5.8vw, 110px) !important;

    height: clamp(90px, 7vw, 130px) !important;

    background: radial-gradient(
      ellipse at center,
      rgba(240, 160, 75, 0.10) 0%,
      rgba(240, 160, 75, 0.04) 35%,
      rgba(240, 160, 75, 0) 75%
    ) !important;

    z-index: 29 !important;
    pointer-events: none !important;
  }

  /* အောက် section က hero အောက်ကနေ စ */
  body.home section.cons_light_feature.team-list.style1 {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}
/* =========================================================
   MMOCC - Wide screen header golden ratio scale
   Laptop stays normal, 2K / 4K scale up
   Put at VERY END of style.css
   ========================================================= */

/* -------------------------
   2K / large monitor
   1600px and above
   ------------------------- */
@media (min-width: 1600px) {
  :root {
    --mmocc-header-h: 104px;
  }

  header.cons-agency .nav-classic {
    min-height: 104px !important;
  }

  header.cons-agency .nav-classic .container {
    max-width: 1560px !important;
    padding-left: 36px !important;
    padding-right: 36px !important;
  }

  header.cons-agency .header-middle-inner {
    height: 104px !important;
    min-height: 104px !important;

    display: grid !important;
    grid-template-columns: minmax(360px, 430px) minmax(0, 1fr) minmax(210px, 260px) !important;
    align-items: center !important;
    column-gap: 34px !important;
  }

  header.cons-agency .site-branding,
  header.cons-agency .nav-menu {
    height: 104px !important;
    min-height: 104px !important;
  }

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

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

  header.cons-agency .box-header-nav .main-menu {
    gap: 20px !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: 14.6px !important;
    line-height: 1.15 !important;
    padding: 10px 9px !important;
    letter-spacing: 0.025em !important;
  }

  header.cons-agency .box-header-nav .main-menu > .menu-button-contact > a,
  .menu-button-contact a {
    min-height: 42px !important;
    padding: 10px 20px !important;
    font-size: 14.6px !important;
  }

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

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

  #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;
  }
}

/* -------------------------
   2K / QHD true wide
   2200px and above
   ------------------------- */
@media (min-width: 2200px) {
  :root {
    --mmocc-header-h: 118px;
  }

  header.cons-agency .nav-classic {
    min-height: 118px !important;
  }

  header.cons-agency .nav-classic .container {
    max-width: 1880px !important;
    padding-left: 46px !important;
    padding-right: 46px !important;
  }

  header.cons-agency .header-middle-inner {
    height: 118px !important;
    min-height: 118px !important;

    display: grid !important;
    grid-template-columns: minmax(430px, 520px) minmax(0, 1fr) minmax(260px, 330px) !important;
    column-gap: 42px !important;
  }

  header.cons-agency .site-branding,
  header.cons-agency .nav-menu {
    height: 118px !important;
    min-height: 118px !important;
  }

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

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

  header.cons-agency .box-header-nav .main-menu {
    gap: 24px !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: 16px !important;
    line-height: 1.15 !important;
    padding: 11px 10px !important;
    letter-spacing: 0.03em !important;
  }

  header.cons-agency .box-header-nav .main-menu > .menu-button-contact > a,
  .menu-button-contact a {
    min-height: 48px !important;
    padding: 12px 24px !important;
    font-size: 16px !important;
  }

  #mmocc-lang-slot
    > #trp-floater-ls.mmocc-lang-inside-nav
    #trp-floater-ls-language-list
    a {
    font-size: 14px !important;
    gap: 9px !important;
  }

  #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;
  }
}

/* -------------------------
   4K TV / ultra wide
   3000px and above
   ------------------------- */
@media (min-width: 3000px) {
  :root {
    --mmocc-header-h: 136px;
  }

  header.cons-agency .nav-classic {
    min-height: 136px !important;
  }

  header.cons-agency .nav-classic .container {
    max-width: 2360px !important;
    padding-left: 60px !important;
    padding-right: 60px !important;
  }

  header.cons-agency .header-middle-inner {
    height: 136px !important;
    min-height: 136px !important;

    display: grid !important;
    grid-template-columns: minmax(520px, 620px) minmax(0, 1fr) minmax(320px, 400px) !important;
    column-gap: 54px !important;
  }

  header.cons-agency .site-branding,
  header.cons-agency .nav-menu {
    height: 136px !important;
    min-height: 136px !important;
  }

  header.cons-agency .brandinglogo-wrap {
    gap: 14px !important;
  }

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

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

  header.cons-agency .box-header-nav .main-menu {
    gap: 30px !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: 18px !important;
    line-height: 1.15 !important;
    padding: 12px 12px !important;
    letter-spacing: 0.035em !important;
  }

  header.cons-agency .box-header-nav .main-menu > .menu-button-contact > a,
  .menu-button-contact a {
    min-height: 54px !important;
    padding: 14px 30px !important;
    font-size: 18px !important;
  }

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

  #mmocc-lang-slot
    > #trp-floater-ls.mmocc-lang-inside-nav
    #trp-floater-ls-language-list
    a {
    font-size: 15.5px !important;
    gap: 10px !important;
  }

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

/* =========================================================
   MMOCC - FINAL FORCE 2K / 4K header font scale
   Must be the LAST code in style.css
   ========================================================= */

/* 2K / large desktop */
@media (min-width: 1600px) {
  html body.home header.cons-agency .nav-classic .container {
    max-width: 1560px !important;
  }

  html body.home header.cons-agency .header-middle-inner {
    height: 104px !important;
    min-height: 104px !important;
    display: grid !important;
    grid-template-columns: minmax(370px, 430px) minmax(0, 1fr) minmax(210px, 260px) !important;
    align-items: center !important;
    column-gap: 34px !important;
  }

  html body.home header.cons-agency .site-branding,
  html body.home header.cons-agency .nav-menu {
    height: 104px !important;
    min-height: 104px !important;
  }

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

  html body.home header.cons-agency .mmocc-anniversary-badge img {
    height: 50px !important;
    max-height: 50px !important;
  }

  html body.home header.cons-agency ul#menu-primary-main-menu,
  html body.home header.cons-agency .box-header-nav ul#menu-primary-main-menu,
  html body.home header.cons-agency .box-header-nav .main-menu {
    gap: 22px !important;
  }

  html body.home header.cons-agency ul#menu-primary-main-menu > li > a,
  html body.home header.cons-agency .box-header-nav ul#menu-primary-main-menu > li > a,
  html body.home header.cons-agency .box-header-nav .main-menu > li > a,
  html body.home header.cons-agency .box-header-nav .main-menu > .menu-item > a,
  html body.home header.cons-agency .box-header-nav .main-menu .page_item a {
    font-size: 15.8px !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
    letter-spacing: 0.035em !important;
    padding: 11px 10px !important;
  }

  html body.home header.cons-agency ul#menu-primary-main-menu > li.menu-button-contact > a,
  html body.home header.cons-agency .box-header-nav .main-menu > li.menu-button-contact > a,
  html body.home .menu-button-contact a {
    font-size: 15.8px !important;
    min-height: 44px !important;
    padding: 11px 22px !important;
  }

  html body.home #mmocc-lang-slot
    > #trp-floater-ls.mmocc-lang-inside-nav
    #trp-floater-ls-language-list
    a {
    font-size: 14px !important;
    font-weight: 700 !important;
    gap: 8px !important;
  }

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

/* 4K / ultra wide */
@media (min-width: 2200px) {
  html body.home header.cons-agency .nav-classic .container {
    max-width: 2200px !important;
  }

  html body.home header.cons-agency .header-middle-inner {
    height: 124px !important;
    min-height: 124px !important;
    grid-template-columns: minmax(500px, 620px) minmax(0, 1fr) minmax(300px, 380px) !important;
    column-gap: 54px !important;
  }

  html body.home header.cons-agency .site-branding,
  html body.home header.cons-agency .nav-menu {
    height: 124px !important;
    min-height: 124px !important;
  }

  html body.home header.cons-agency .brandinglogo-wrap {
    gap: 14px !important;
  }

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

  html body.home header.cons-agency .mmocc-anniversary-badge img {
    height: 62px !important;
    max-height: 62px !important;
  }

  html body.home header.cons-agency ul#menu-primary-main-menu,
  html body.home header.cons-agency .box-header-nav ul#menu-primary-main-menu,
  html body.home header.cons-agency .box-header-nav .main-menu {
    gap: 30px !important;
  }

  html body.home header.cons-agency ul#menu-primary-main-menu > li > a,
  html body.home header.cons-agency .box-header-nav ul#menu-primary-main-menu > li > a,
  html body.home header.cons-agency .box-header-nav .main-menu > li > a,
  html body.home header.cons-agency .box-header-nav .main-menu > .menu-item > a,
  html body.home header.cons-agency .box-header-nav .main-menu .page_item a {
    font-size: 19px !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    padding: 13px 12px !important;
  }

  html body.home header.cons-agency ul#menu-primary-main-menu > li.menu-button-contact > a,
  html body.home header.cons-agency .box-header-nav .main-menu > li.menu-button-contact > a,
  html body.home .menu-button-contact a {
    font-size: 19px !important;
    min-height: 54px !important;
    padding: 14px 30px !important;
  }

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

  html body.home #mmocc-lang-slot
    > #trp-floater-ls.mmocc-lang-inside-nav
    #trp-floater-ls-language-list
    a {
    font-size: 16px !important;
    font-weight: 700 !important;
    gap: 10px !important;
  }

  html body.home #mmocc-lang-slot
    > #trp-floater-ls.mmocc-lang-inside-nav
    #trp-floater-ls-language-list
    a
    img {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
  }
}
/* ==================================================
   Myanmar OCC Footer Full Width Fix
================================================== */

/* Force footer parent containers to full width */
#colophon,
.site-footer,
footer,
#colophon .container,
.site-footer .container,
footer .container,
#footer-widgets,
.footer-widgets,
.footer-widget-wrapper,
.footer-widget-area,
.site-footer .widget-area,
#colophon .widget-area {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  float: none !important;
  clear: both !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  background: #fffaf2 !important;
}

/* Hide widget title */
#colophon .widget-title,
.site-footer .widget-title,
.footer-widgets .widget-title,
.footer-widget-area .widget-title {
  display: none !important;
}

/* Force the widget itself to full width */
#colophon .widget,
.site-footer .widget,
.footer-widgets .widget,
.footer-widget-area .widget,
#footer-widgets .widget {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Main custom footer */
.mmocc-custom-footer {
  width: 100% !important;
  max-width: 100% !important;
  background:
    radial-gradient(circle at 96% 18%, rgba(248,147,31,0.08), transparent 18%),
    radial-gradient(circle at 8% 72%, rgba(248,147,31,0.08), transparent 24%),
    linear-gradient(180deg, #fffaf2 0%, #fff7ed 100%) !important;
  color: #0b2345 !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Decorative patterns */
.mmocc-custom-footer::before {
  content: "";
  position: absolute;
  left: -70px;
  bottom: 150px;
  width: 360px;
  height: 170px;
  opacity: 0.16;
  background: repeating-radial-gradient(
    ellipse at bottom,
    transparent 0,
    transparent 14px,
    #f8931f 15px,
    transparent 17px
  );
  pointer-events: none;
}

.mmocc-custom-footer::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  opacity: 0.2;
  background: repeating-radial-gradient(
    circle,
    transparent 0,
    transparent 12px,
    #f8931f 13px,
    transparent 15px
  );
  pointer-events: none;
}

/* Footer main row */
.mmocc-footer-main {
  width: 100% !important;
  max-width: 1500px !important;
  margin: 0 auto !important;
  padding: 90px 40px 70px !important;
  display: grid !important;
  grid-template-columns: 230px 1fr 1fr 1.12fr !important;
  gap: 34px !important;
  align-items: center !important;
  position: relative !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
}

/* Left logo */
.mmocc-footer-logo-side {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

.mmocc-footer-logo-mark,
.mmocc-bottom-logo {
  width: 72px !important;
  height: 72px !important;
  border: 13px solid #f8931f !important;
  border-right-color: transparent !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

.mmocc-footer-logo-text {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.1 !important;
}

.mmocc-footer-logo-text strong {
  color: #0b2345 !important;
  font-size: 28px !important;
  font-weight: 800 !important;
}

/* Cards */
.mmocc-footer-card {
  background: rgba(255,255,255,0.78) !important;
  border: 1px solid rgba(206,158,81,0.35) !important;
  border-radius: 18px !important;
  padding: 38px !important;
  min-height: 430px !important;
  box-shadow: 0 20px 45px rgba(10,31,68,0.08) !important;
  color: #0b2345 !important;
  box-sizing: border-box !important;
}

/* Heading */
.mmocc-footer-heading {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  margin-bottom: 30px !important;
}

.mmocc-heading-icon {
  width: 52px !important;
  height: 52px !important;
  background: linear-gradient(135deg, #ff9f2f, #f8931f) !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 21px !important;
  flex-shrink: 0 !important;
}

.mmocc-footer-heading h3 {
  margin: 0 !important;
  color: #0b2345 !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.mmocc-footer-heading span + div span {
  display: block !important;
  width: 44px !important;
  height: 3px !important;
  background: #f8931f !important;
  border-radius: 10px !important;
  margin-top: 13px !important;
}

.mmocc-footer-card p {
  color: #4d5c73 !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
}

/* QR */
.mmocc-footer-qr {
  width: 160px !important;
  height: 160px !important;
  border: 1.6px solid #f8931f !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  padding: 14px !important;
  margin: 24px 0 34px !important;
}

.mmocc-footer-qr img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Social icons */
.mmocc-footer-social {
  display: flex !important;
  gap: 22px !important;
  flex-wrap: wrap !important;
}

.mmocc-footer-social a {
  width: 52px !important;
  height: 52px !important;
  border: 1.7px solid #0b2345 !important;
  border-radius: 50% !important;
  color: #0b2345 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
}

.mmocc-footer-social a:hover {
  background: #f8931f !important;
  border-color: #f8931f !important;
  color: #ffffff !important;
}

/* Quick links */
.mmocc-footer-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.mmocc-footer-links li {
  border-bottom: 1px solid rgba(11,35,69,0.13) !important;
  padding: 13px 0 !important;
  margin: 0 !important;
}

.mmocc-footer-links li::before {
  content: "›";
  color: #f8931f !important;
  font-size: 26px !important;
  margin-right: 14px !important;
}

.mmocc-footer-links a {
  color: #0b2345 !important;
  text-decoration: none !important;
  font-size: 18px !important;
  font-weight: 500 !important;
}

.mmocc-footer-links a:hover {
  color: #f8931f !important;
}

/* Contact */
.mmocc-contact-row {
  display: flex !important;
  gap: 20px !important;
  align-items: flex-start !important;
  margin-bottom: 28px !important;
}

.mmocc-contact-icon {
  width: 52px !important;
  height: 52px !important;
  background: rgba(248,147,31,0.12) !important;
  color: #f8931f !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.mmocc-contact-row strong {
  display: block !important;
  color: #0b2345 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  margin-bottom: 7px !important;
}

.mmocc-contact-row p {
  color: #0b2345 !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

.mmocc-contact-row a {
  color: #f8931f !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

/* Bottom footer */
.mmocc-footer-bottom {
  border-top: 2px solid #f8931f !important;
  padding: 34px 40px !important;
  display: grid !important;
  grid-template-columns: 1fr 1.4fr 1fr !important;
  align-items: center !important;
  gap: 30px !important;
  max-width: 1500px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
}

.mmocc-bottom-brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  color: #0b2345 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
}

.mmocc-bottom-logo {
  width: 48px !important;
  height: 48px !important;
  border-width: 9px !important;
}

.mmocc-copyright {
  color: #0b2345 !important;
  font-size: 18px !important;
  text-align: center !important;
}

.mmocc-footer-tagline {
  color: #0b2345 !important;
  font-size: 19px !important;
  text-align: right !important;
}

.mmocc-footer-tagline span {
  color: #f8931f !important;
  padding: 0 10px !important;
}

/* Tablet */
@media (max-width: 1200px) {
  .mmocc-footer-main {
    grid-template-columns: 1fr 1fr !important;
  }

  .mmocc-footer-logo-side {
    grid-column: 1 / -1 !important;
    justify-content: center !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .mmocc-footer-main {
    grid-template-columns: 1fr !important;
    padding: 50px 18px 40px !important;
  }

  .mmocc-footer-card {
    min-height: auto !important;
    padding: 30px 24px !important;
  }

  .mmocc-footer-bottom {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    padding: 30px 18px !important;
  }

  .mmocc-bottom-brand {
    justify-content: center !important;
  }

  .mmocc-footer-tagline {
    text-align: center !important;
  }
}
/* =========================================================
   MMOCC - Premium custom footer FINAL
   Replace old custom footer override with this
   Put at VERY END of style.css
   ========================================================= */

/* remove old theme footer/copyright influence */
#colophon.site-footer,
.site-footer,
footer#colophon {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff8ef !important;
  overflow: hidden !important;
}

#colophon.site-footer > .container,
.site-footer > .container,
#colophon .container,
.site-footer .container,
#colophon .row,
.site-footer .row,
#colophon .row > [class*="col-"],
.site-footer .row > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  float: none !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#colophon .widget,
.site-footer .widget,
#colophon .widget_custom_html,
.site-footer .widget_custom_html,
#colophon .custom-html-widget,
.site-footer .custom-html-widget {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.site-footer .widget-title,
#colophon .widget-title {
  display: none !important;
}

/* hide old brown copyright bar */
.sub-footer,
.site-info,
.footer-copyright,
.bottom-footer,
.copyright,
footer .copyright,
footer[class*="copyright"] {
  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;
}

/* main premium footer shell */
.mmocc-custom-footer {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  background:
    radial-gradient(circle at 8% 24%, rgba(255, 157, 34, 0.12), transparent 22%),
    radial-gradient(circle at 92% 18%, rgba(255, 157, 34, 0.10), transparent 20%),
    radial-gradient(circle at 50% 110%, rgba(11, 35, 69, 0.08), transparent 38%),
    linear-gradient(180deg, #fffdf8 0%, #fff6ea 52%, #f8ead8 100%) !important;

  color: #0b2345 !important;
  box-sizing: border-box !important;
}

/* soft decorative pattern */
.mmocc-custom-footer::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
  background:
    repeating-radial-gradient(circle at 4% 82%,
      rgba(248, 147, 31, 0.18) 0 1px,
      transparent 2px 18px),
    repeating-radial-gradient(circle at 96% 12%,
      rgba(248, 147, 31, 0.16) 0 1px,
      transparent 2px 18px);
  opacity: 0.45 !important;
}

/* content layout */
.mmocc-footer-main {
  width: 100% !important;
  max-width: 1520px !important;
  margin: 0 auto !important;
  padding: 72px 48px 64px !important;

  display: grid !important;
  grid-template-columns: 260px minmax(270px, 1fr) minmax(270px, 1fr) minmax(360px, 1.18fr) !important;
  gap: 34px !important;
  align-items: stretch !important;

  box-sizing: border-box !important;
}

/* left logo block */
.mmocc-footer-logo-side {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;

  min-height: 420px !important;
  padding: 34px 20px !important;

  border-radius: 28px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.22)) !important;
  border: 1px solid rgba(248, 147, 31, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

.mmocc-footer-logo-mark,
.mmocc-bottom-logo {
  width: 76px !important;
  height: 76px !important;
  border: 14px solid #f8931f !important;
  border-right-color: transparent !important;
  border-radius: 50% !important;
  flex: 0 0 auto !important;
  box-shadow: 0 12px 26px rgba(248, 147, 31, 0.20) !important;
}

.mmocc-footer-logo-text strong {
  display: block !important;
  font-family: "Oswald", Arial, sans-serif !important;
  color: #0b2345 !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: 0.02em !important;
}

/* premium cards */
.mmocc-footer-card {
  position: relative !important;
  min-height: 420px !important;
  padding: 38px 38px 34px !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,250,243,0.86) 100%) !important;
  border: 1px solid rgba(190, 139, 70, 0.26) !important;
  border-radius: 28px !important;

  box-shadow:
    0 28px 70px rgba(11, 35, 69, 0.10),
    0 10px 24px rgba(138, 79, 40, 0.06),
    inset 0 1px 0 rgba(255,255,255,0.82) !important;

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

.mmocc-footer-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 5px !important;
   opacity: 0.55 !important;
  border-radius: 22px 22px 0 0 !important;
  box-shadow: none !important;
  /* background: linear-gradient(90deg, #f8931f, #f4b35e, #8a4f28) !important; */
  /* opacity: 0.95 !important; */
}

.mmocc-footer-card::after {
  content: "" !important;
  position: absolute !important;
  right: -80px !important;
  bottom: -90px !important;
  width: 210px !important;
  height: 210px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(248,147,31,0.13), transparent 68%) !important;
  pointer-events: none !important;
}

.mmocc-footer-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(248, 147, 31, 0.42) !important;
  box-shadow:
    0 36px 86px rgba(11, 35, 69, 0.14),
    0 14px 28px rgba(138, 79, 40, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.88) !important;
}

/* heading */
.mmocc-footer-heading {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  margin: 0 0 30px !important;
}

.mmocc-heading-icon {
  width: 54px !important;
  height: 54px !important;
  flex: 0 0 54px !important;

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

  border-radius: 18px !important;
  background:
    linear-gradient(135deg, #ff9d22 0%, #f07f13 100%) !important;
  color: #ffffff !important;
  font-size: 22px !important;

  box-shadow:
    0 14px 28px rgba(248, 147, 31, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;
}

.mmocc-footer-heading h3 {
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Oswald", Arial, sans-serif !important;
  color: #0b2345 !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
}

.mmocc-footer-heading span + div span {
  display: block !important;
  width: 48px !important;
  height: 3px !important;
  margin-top: 14px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #f8931f, #f4b35e) !important;
}

/* text */
.mmocc-footer-card p,
.mmocc-contact-row p {
  margin: 0 !important;
  color: #4b5d78 !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
}

/* QR */
.mmocc-footer-qr {
  width: 154px !important;
  height: 154px !important;
  margin: 24px 0 28px !important;
  padding: 14px !important;

  background: #ffffff !important;
  border: 1.5px solid rgba(248,147,31,0.55) !important;
  border-radius: 22px !important;

  box-shadow:
    0 16px 34px rgba(11,35,69,0.10),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;

  box-sizing: border-box !important;
}

.mmocc-footer-qr img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* social */
.mmocc-footer-social {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.mmocc-footer-social a {
  width: 48px !important;
  height: 48px !important;

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

  border: 1px solid rgba(11,35,69,0.28) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.62) !important;
  color: #0b2345 !important;

  font-size: 16px !important;
  font-weight: 800 !important;
  text-decoration: none !important;

  box-shadow: 0 8px 18px rgba(11,35,69,0.06) !important;
  transition: all 0.25s ease !important;
}

.mmocc-footer-social a:hover {
  color: #ffffff !important;
  background: #f8931f !important;
  border-color: #f8931f !important;
  transform: translateY(-4px) !important;
}

/* quick links */
.mmocc-footer-links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mmocc-footer-links li {
  list-style: none !important;
  margin: 0 !important;
  padding: 13px 0 !important;
  border-bottom: 1px solid rgba(11,35,69,0.11) !important;
}

.mmocc-footer-links li::before {
  content: "›" !important;
  display: inline-block !important;
  margin-right: 13px !important;
  color: #f8931f !important;
  font-size: 25px !important;
  line-height: 1 !important;
  transform: translateY(2px) !important;
}

.mmocc-footer-links a {
  color: #0b2345 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: color 0.22s ease !important;
}

.mmocc-footer-links a:hover {
  color: #f8931f !important;
}

/* contact card */
.mmocc-contact-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 18px !important;
  margin: 0 0 24px !important;
}

.mmocc-contact-icon {
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px !important;

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

  border-radius: 18px !important;
  background: linear-gradient(180deg, #fff6eb, #f3eadf) !important;
  color: #f8931f !important;
  font-size: 20px !important;

  box-shadow:
    0 12px 24px rgba(11,35,69,0.08),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

.mmocc-contact-row strong {
  display: block !important;
  margin: 0 0 7px !important;
  color: #0b2345 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

.mmocc-contact-row a {
  color: #f8931f !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

/* bottom section */
.mmocc-footer-bottom {
  width: calc(100% - 96px) !important;
  max-width: 1520px !important;
  margin: 0 auto !important;
  padding: 34px 0 38px !important;

  display: grid !important;
  grid-template-columns: 1fr 1.3fr 1fr !important;
  align-items: center !important;
  gap: 30px !important;

  border-top: 2px solid rgba(248,147,31,0.75) !important;
  box-sizing: border-box !important;
}

.mmocc-bottom-brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  color: #0b2345 !important;
  font-family: "Oswald", Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
}

.mmocc-bottom-logo {
  width: 46px !important;
  height: 46px !important;
  border-width: 9px !important;
}

.mmocc-copyright {
  color: #0b2345 !important;
  font-size: 17px !important;
  text-align: center !important;
}

.mmocc-footer-tagline {
  color: #0b2345 !important;
  font-size: 18px !important;
  text-align: right !important;
}

.mmocc-footer-tagline span {
  color: #f8931f !important;
  padding: 0 9px !important;
}

/* 2K / 4K premium scale */
@media (min-width: 1800px) {
  .mmocc-footer-main,
  .mmocc-footer-bottom {
    max-width: 1680px !important;
  }

  .mmocc-footer-main {
    grid-template-columns: 300px minmax(320px, 1fr) minmax(320px, 1fr) minmax(420px, 1.2fr) !important;
    gap: 42px !important;
    padding-top: 88px !important;
    padding-bottom: 78px !important;
  }

  .mmocc-footer-card,
  .mmocc-footer-logo-side {
    min-height: 470px !important;
  }

  .mmocc-footer-heading h3 {
    font-size: 32px !important;
  }

  .mmocc-footer-card p,
  .mmocc-contact-row p,
  .mmocc-footer-links a {
    font-size: 19px !important;
  }
}

/* tablet */
@media (max-width: 1200px) {
  .mmocc-footer-main {
    grid-template-columns: 1fr 1fr !important;
    max-width: 960px !important;
    padding: 58px 28px 48px !important;
  }

  .mmocc-footer-logo-side {
    grid-column: 1 / -1 !important;
    min-height: auto !important;
    padding: 28px !important;
  }

  .mmocc-footer-bottom {
    width: calc(100% - 56px) !important;
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  .mmocc-bottom-brand {
    justify-content: center !important;
  }

  .mmocc-footer-tagline {
    text-align: center !important;
  }
}

/* mobile */
@media (max-width: 767px) {
  .mmocc-footer-main {
    grid-template-columns: 1fr !important;
    padding: 44px 18px 36px !important;
    gap: 22px !important;
  }

  .mmocc-footer-card {
    min-height: auto !important;
    padding: 30px 24px !important;
    border-radius: 24px !important;
  }

  .mmocc-footer-heading h3 {
    font-size: 24px !important;
  }

  .mmocc-footer-bottom {
    width: calc(100% - 36px) !important;
    padding: 28px 0 32px !important;
  }
}/* =========================================================
   MMOCC - Hide footer Quick Links card FINAL
   Put at VERY END of style.css
   ========================================================= */

/* Quick Links card ကိုဖျောက် */
.mmocc-footer-main > .mmocc-footer-card:has(.mmocc-footer-links) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Quick Links ဖျောက်ပြီးနောက် layout ကို 3 columns ပြန်ညှိ */
.mmocc-footer-main {
  grid-template-columns: 260px minmax(300px, 1fr) minmax(420px, 1.25fr) !important;
  max-width: 1280px !important;
  gap: 42px !important;
}

/* contact card ကို နည်းနည်းကျယ်အောင် */
.mmocc-footer-main .mmocc-contact-card {
  max-width: none !important;
}

/* 2K / 4K */
@media (min-width: 1800px) {
  .mmocc-footer-main {
    grid-template-columns: 300px minmax(360px, 1fr) minmax(520px, 1.25fr) !important;
    max-width: 1420px !important;
    gap: 52px !important;
  }
}

/* tablet */
@media (max-width: 1200px) {
  .mmocc-footer-main {
    grid-template-columns: 1fr 1fr !important;
    max-width: 900px !important;
  }

  .mmocc-footer-logo-side {
    grid-column: 1 / -1 !important;
  }
}

/* mobile */
@media (max-width: 767px) {
  .mmocc-footer-main {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   MMOCC - Remove theme sub footer + show custom copyright FINAL
   Put at VERY END of style.css
   ========================================================= */

/* Theme default brown sub footer ကို အပြီးဖျောက် */
.sub-footer,
.sub_footer,
div.sub-footer,
div.sub_footer,
footer .sub-footer,
footer .sub_footer,
#colophon .sub-footer,
#colophon .sub_footer {
  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;

  background: transparent !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* custom footer bottom copyright ကို သေချာပေါ်အောင် */
.mmocc-footer-bottom {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;

  width: calc(100% - 96px) !important;
  max-width: 1280px !important;

  margin: 0 auto !important;
  padding: 32px 0 36px !important;

  grid-template-columns: 1fr 1.4fr 1fr !important;
  align-items: center !important;
  gap: 28px !important;

  border-top: 2px solid rgba(248, 147, 31, 0.75) !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

/* copyright text အရောင်ပြန်တင် */
.mmocc-bottom-brand,
.mmocc-bottom-brand strong,
.mmocc-copyright,
.mmocc-footer-tagline {
  color: #0b2345 !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: none !important;
}

.mmocc-bottom-brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;

  font-family: "Oswald", Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}

.mmocc-copyright {
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

.mmocc-footer-tagline {
  text-align: right !important;
  font-size: 17px !important;
  font-weight: 500 !important;
}

.mmocc-footer-tagline span {
  color: #f8931f !important;
  opacity: 1 !important;
  padding: 0 8px !important;
}

/* old site-footer global white color override မထိအောင် */
.site-footer .mmocc-footer-bottom,
.site-footer .mmocc-footer-bottom div,
.site-footer .mmocc-footer-bottom strong,
.site-footer .mmocc-footer-bottom span {
  color: #0b2345 !important;
}

/* mobile */
@media (max-width: 767px) {
  .mmocc-footer-bottom {
    width: calc(100% - 36px) !important;
    grid-template-columns: 1fr !important;
    text-align: center !important;
    padding: 26px 0 30px !important;
  }

  .mmocc-bottom-brand {
    justify-content: center !important;
  }

  .mmocc-footer-tagline {
    text-align: center !important;
  }
}
/* =========================================================
   MMOCC - Hide footer left logo card FINAL
   Put at VERY END of style.css
   ========================================================= */

/* ဘယ်ဘက် MYANMAR OCC logo card ကိုဖျောက် */
.mmocc-footer-main > .mmocc-footer-logo-side,
.mmocc-footer-logo-side {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;

  width: 0 !important;
  min-width: 0 !important;
  max-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;
}

/* logo card ဖျောက်ပြီး Social + Contact နှစ်ခုကို အလယ်တည့်တည့်ပြန်ထား */
.mmocc-footer-main {
  display: grid !important;
  grid-template-columns: minmax(320px, 420px) minmax(420px, 520px) !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 56px !important;

  width: calc(100% - 80px) !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
}

/* social/contact card width stable */
.mmocc-footer-main > .mmocc-footer-card {
  width: 100% !important;
  max-width: none !important;
}

/* footer bottom line width ကို card layout နဲ့ညီအောင် */
.mmocc-footer-bottom {
  width: calc(100% - 80px) !important;
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 2K / 4K screen */
@media (min-width: 1800px) {
  .mmocc-footer-main {
    grid-template-columns: minmax(380px, 460px) minmax(500px, 580px) !important;
    max-width: 1180px !important;
    gap: 72px !important;
  }

  .mmocc-footer-bottom {
    max-width: 1180px !important;
  }
}

/* tablet */
@media (max-width: 1024px) {
  .mmocc-footer-main {
    grid-template-columns: 1fr 1fr !important;
    width: calc(100% - 40px) !important;
    max-width: 900px !important;
    gap: 28px !important;
  }

  .mmocc-footer-bottom {
    width: calc(100% - 40px) !important;
    max-width: 900px !important;
  }
}

/* mobile */
@media (max-width: 767px) {
  .mmocc-footer-main {
    grid-template-columns: 1fr !important;
    width: calc(100% - 28px) !important;
    max-width: 100% !important;
    gap: 22px !important;
  }

  .mmocc-footer-bottom {
    width: calc(100% - 28px) !important;
  }
}
/* =========================================================
   MMOCC - Premium footer background refined FINAL
   Put at VERY END of style.css
   ========================================================= */

/* footer base premium warm background */
.mmocc-custom-footer {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  background:
    radial-gradient(
      ellipse at 50% -18%,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 250, 242, 0.78) 42%,
      transparent 70%
    ),
    radial-gradient(
      ellipse at 50% 105%,
      rgba(248, 147, 31, 0.13) 0%,
      rgba(248, 147, 31, 0.06) 34%,
      transparent 68%
    ),
    linear-gradient(
      180deg,
      #fffdf8 0%,
      #fff8ef 42%,
      #f9ead6 100%
    ) !important;

  color: #0b2345 !important;
}

/* remove old noisy pattern layer */
.mmocc-custom-footer::before,
.mmocc-custom-footer::after,
.mmocc-footer-main::before,
.mmocc-footer-main::after {
  content: "" !important;
  pointer-events: none !important;
}

/* top-left elegant Japanese arc pattern */
.mmocc-custom-footer::before {
  position: absolute !important;
  left: -150px !important;
  top: -170px !important;

  width: 520px !important;
  height: 520px !important;

  z-index: 0 !important;
  opacity: 0.34 !important;

  background:
    repeating-radial-gradient(
      circle at 50% 50%,
      transparent 0 18px,
      rgba(248, 147, 31, 0.26) 19px 20px
    ) !important;

  border-radius: 50% !important;
}

/* top-right refined ring pattern */
.mmocc-custom-footer::after {
  position: absolute !important;
  right: -125px !important;
  top: -105px !important;

  width: 360px !important;
  height: 360px !important;

  z-index: 0 !important;
  opacity: 0.48 !important;

  background:
    repeating-radial-gradient(
      circle at 50% 50%,
      transparent 0 15px,
      rgba(248, 147, 31, 0.30) 16px 17px
    ) !important;

  border-radius: 50% !important;
}

/* left-bottom soft seigaiha wave pattern */
.mmocc-footer-main::before {
  position: absolute !important;
  left: -260px !important;
  bottom: -110px !important;

  width: 620px !important;
  height: 360px !important;

  z-index: -1 !important;
  opacity: 0.22 !important;

  background:
    radial-gradient(circle at 50% 100%, transparent 0 34px, rgba(248,147,31,0.30) 35px 36px, transparent 37px),
    radial-gradient(circle at 25% 100%, transparent 0 34px, rgba(248,147,31,0.26) 35px 36px, transparent 37px),
    radial-gradient(circle at 75% 100%, transparent 0 34px, rgba(248,147,31,0.26) 35px 36px, transparent 37px),
    radial-gradient(circle at 0% 100%, transparent 0 34px, rgba(248,147,31,0.20) 35px 36px, transparent 37px),
    radial-gradient(circle at 100% 100%, transparent 0 34px, rgba(248,147,31,0.20) 35px 36px, transparent 37px) !important;

  background-size: 120px 72px !important;
  background-repeat: repeat !important;
}

/* right-bottom soft mountain shade */
.mmocc-footer-main::after {
  position: absolute !important;
  right: -280px !important;
  bottom: -78px !important;

  width: 680px !important;
  height: 250px !important;

  z-index: -1 !important;
  opacity: 0.55 !important;

  background:
    radial-gradient(
      ellipse at 45% 70%,
      rgba(248, 147, 31, 0.13) 0%,
      rgba(248, 147, 31, 0.06) 36%,
      transparent 68%
    ),
    linear-gradient(
      165deg,
      transparent 0%,
      transparent 36%,
      rgba(248, 147, 31, 0.10) 37%,
      rgba(248, 147, 31, 0.045) 57%,
      transparent 58%
    ) !important;

  border-radius: 50% 50% 0 0 !important;
}

/* premium orange dot, smaller and cleaner */
.mmocc-custom-footer .mmocc-footer-bottom::after {
  content: "" !important;
  position: absolute !important;
  right: -62px !important;
  top: -64px !important;

  width: 18px !important;
  height: 18px !important;

  border-radius: 50% !important;
  background: #f8931f !important;
  box-shadow:
    0 10px 24px rgba(248, 147, 31, 0.28),
    0 0 0 10px rgba(248, 147, 31, 0.05) !important;

  opacity: 0.82 !important;
}

/* cards should float above pattern */
.mmocc-footer-main,
.mmocc-footer-bottom,
.mmocc-footer-card {
  position: relative !important;
  z-index: 2 !important;
}

/* card background more premium */
.mmocc-footer-card {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 251, 246, 0.91) 100%
    ) !important;

  border: 1px solid rgba(186, 128, 62, 0.22) !important;
  box-shadow:
    0 30px 70px rgba(11, 35, 69, 0.10),
    0 10px 22px rgba(138, 79, 40, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;
}

/* make footer feel less empty */
.mmocc-footer-main {
  padding-top: 86px !important;
  padding-bottom: 62px !important;
}

.mmocc-footer-bottom {
  position: relative !important;
  padding-top: 32px !important;
  padding-bottom: 34px !important;
  border-top: 2px solid rgba(248, 147, 31, 0.70) !important;
}

/* 2K / 4K balance */
@media (min-width: 1800px) {
  .mmocc-custom-footer::before {
    left: -180px !important;
    top: -195px !important;
    width: 620px !important;
    height: 620px !important;
  }

  .mmocc-custom-footer::after {
    right: -145px !important;
    top: -120px !important;
    width: 430px !important;
    height: 430px !important;
  }

  .mmocc-footer-main::before {
    left: -320px !important;
    width: 720px !important;
  }

  .mmocc-footer-main::after {
    right: -330px !important;
    width: 760px !important;
  }
}

/* mobile: keep subtle */
@media (max-width: 767px) {
  .mmocc-custom-footer::before {
    left: -230px !important;
    top: -210px !important;
    opacity: 0.22 !important;
  }

  .mmocc-custom-footer::after {
    right: -180px !important;
    top: -120px !important;
    opacity: 0.30 !important;
  }

  .mmocc-footer-main::before,
  .mmocc-footer-main::after,
  .mmocc-custom-footer .mmocc-footer-bottom::after {
    display: none !important;
  }
}
/* =========================================================
   MMOCC - Footer background ring pattern ONLY
   Put at VERY END of style.css
   ========================================================= */

/* footer area ကို ring pattern ချနိုင်အောင် */
.site-footer,
.mmocc-custom-footer {
  position: relative !important;
  overflow: hidden !important;
}

/* အရင် wave / pattern ရှိရင် ဖျောက် */
.mmocc-footer-main::before {
  content: none !important;
  display: none !important;
}

/* Left soft ring */
.mmocc-custom-footer::before {
  content: "" !important;
  position: absolute !important;

  left: -160px !important;
  top: 70px !important;

  width: 430px !important;
  height: 430px !important;

  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;

  opacity: 0.22 !important;

  background:
    repeating-radial-gradient(
      circle,
      transparent 0 18px,
      rgba(248, 147, 31, 0.18) 19px 20px
    ) !important;
}

/* Right big soft ring */
.mmocc-custom-footer::after {
  content: "" !important;
  position: absolute !important;

  right: -130px !important;
  top: -90px !important;

  width: 520px !important;
  height: 520px !important;

  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;

  opacity: 0.24 !important;

  background:
    repeating-radial-gradient(
      circle,
      transparent 0 20px,
      rgba(248, 147, 31, 0.2) 21px 22px
    ) !important;
}

/* content/card တွေ ring အပေါ်မှာပေါ်အောင် */
.mmocc-footer-main,
.mmocc-footer-card,
.mmocc-footer-bottom {
  position: relative !important;
  z-index: 2 !important;
}

/* 4K / 2K မှာ ring အချိုးညီအောင် */
@media (min-width: 1800px) {
  .mmocc-custom-footer::before {
    left: -120px !important;
    top: 80px !important;
    width: 520px !important;
    height: 520px !important;
    opacity: 0.2 !important;
  }

  .mmocc-custom-footer::after {
    right: -100px !important;
    top: -110px !important;
    width: 620px !important;
    height: 620px !important;
    opacity: 0.22 !important;
  }
}

/* mobile မှာ ring ကြီးလွန်းတာလျှော့ */
@media (max-width: 767px) {
  .mmocc-custom-footer::before {
    left: -210px !important;
    top: 120px !important;
    width: 360px !important;
    height: 360px !important;
    opacity: 0.13 !important;
  }

  .mmocc-custom-footer::after {
    right: -210px !important;
    top: -80px !important;
    width: 390px !important;
    height: 390px !important;
    opacity: 0.15 !important;
  }
}
/* =========================================================
   MMOCC - Footer 2 cards smaller size FINAL
   Put at VERY END of style.css
   ========================================================= */

/* footer main layout */
.mmocc-custom-footer .mmocc-footer-main {
  display: grid !important;
  grid-template-columns: 300px 360px 440px !important;
  justify-content: center !important;
  align-items: stretch !important;

  gap: 42px !important;
  max-width: 1220px !important;
  margin: 0 auto !important;

  padding: 64px 24px 48px !important;
  box-sizing: border-box !important;
}

/* logo side width */
.mmocc-custom-footer .mmocc-footer-logo-side {
  width: 300px !important;
  max-width: 300px !important;
  min-height: 420px !important;
}

/* Social + Contact cards smaller */
.mmocc-custom-footer .mmocc-footer-card {
  width: 100% !important;
  max-width: none !important;

  min-height: 420px !important;
  height: auto !important;

  padding: 34px 38px !important;
  border-radius: 22px !important;

  box-sizing: border-box !important;
}

/* Social card exact smaller width */
.mmocc-custom-footer .mmocc-footer-main > .mmocc-footer-card:not(.mmocc-contact-card) {
  max-width: 360px !important;
}

/* Contact card exact smaller width */
.mmocc-custom-footer .mmocc-footer-main > .mmocc-contact-card {
  max-width: 440px !important;
}

/* heading size reduce */
.mmocc-custom-footer .mmocc-footer-heading h3 {
  font-size: 26px !important;
  line-height: 1.12 !important;
  margin: 0 !important;
}

/* heading icon smaller */
.mmocc-custom-footer .mmocc-heading-icon {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  font-size: 20px !important;
}

/* paragraph smaller */
.mmocc-custom-footer .mmocc-footer-card p {
  font-size: 15px !important;
  line-height: 1.55 !important;
}

/* QR smaller */
.mmocc-custom-footer .mmocc-footer-qr {
  width: 108px !important;
  height: 108px !important;
  padding: 10px !important;
  margin-top: 18px !important;
  margin-bottom: 18px !important;
}

.mmocc-custom-footer .mmocc-footer-qr img {
  width: 88px !important;
  height: 88px !important;
  object-fit: contain !important;
}

/* social icons smaller */
.mmocc-custom-footer .mmocc-footer-social {
  gap: 14px !important;
}

.mmocc-custom-footer .mmocc-footer-social a {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  font-size: 13px !important;
}

/* contact row spacing smaller */
.mmocc-custom-footer .mmocc-contact-row {
  gap: 18px !important;
  margin-bottom: 22px !important;
}

.mmocc-custom-footer .mmocc-contact-icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  font-size: 18px !important;
}

.mmocc-custom-footer .mmocc-contact-row strong {
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.mmocc-custom-footer .mmocc-contact-row p,
.mmocc-custom-footer .mmocc-contact-row a {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

/* bottom section width match */
.mmocc-custom-footer .mmocc-footer-bottom {
  max-width: 1160px !important;
  margin: 0 auto !important;
  padding: 24px 24px 34px !important;
}

/* 2K / 4K screen မှာ အရမ်းကြီးမသွားအောင် */
@media (min-width: 1800px) {
  .mmocc-custom-footer .mmocc-footer-main {
    grid-template-columns: 300px 360px 440px !important;
    max-width: 1240px !important;
    gap: 46px !important;
  }

  .mmocc-custom-footer .mmocc-footer-card {
    min-height: 420px !important;
  }
}

/* tablet */
@media (max-width: 1024px) {
  .mmocc-custom-footer .mmocc-footer-main {
    grid-template-columns: 1fr 1fr !important;
    max-width: 92% !important;
    gap: 28px !important;
    padding: 48px 18px 38px !important;
  }

  .mmocc-custom-footer .mmocc-footer-logo-side {
    display: none !important;
  }

  .mmocc-custom-footer .mmocc-footer-card,
  .mmocc-custom-footer .mmocc-footer-main > .mmocc-footer-card:not(.mmocc-contact-card),
  .mmocc-custom-footer .mmocc-footer-main > .mmocc-contact-card {
    max-width: 100% !important;
    min-height: 390px !important;
  }
}

/* mobile */
@media (max-width: 767px) {
  .mmocc-custom-footer .mmocc-footer-main {
    display: block !important;
    max-width: 100% !important;
    padding: 36px 16px 28px !important;
  }

  .mmocc-custom-footer .mmocc-footer-card {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;

    padding: 28px 24px !important;
    margin-bottom: 22px !important;
  }

  .mmocc-custom-footer .mmocc-footer-heading h3 {
    font-size: 23px !important;
  }
}

/* =========================================================
   MMOCC - Footer 2 cards EXTRA SMALL FINAL OVERRIDE
   Put at VERY END of style.css
   ========================================================= */

/* Desktop / Laptop / 2K / 4K */
@media (min-width: 1025px) {

  .mmocc-custom-footer .mmocc-footer-main,
  .site-footer .mmocc-custom-footer .mmocc-footer-main {
    display: grid !important;

    /* logo card ဖျောက်ထားတဲ့အတွက် 2 cards ပဲထား */
    grid-template-columns: 300px 390px !important;

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

    gap: 52px !important;
    max-width: 820px !important;

    padding: 54px 20px 38px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* left logo card hidden */
  .mmocc-custom-footer .mmocc-footer-logo-side,
  .site-footer .mmocc-custom-footer .mmocc-footer-logo-side {
    display: none !important;
  }

  /* all cards base */
  .mmocc-custom-footer .mmocc-footer-card,
  .site-footer .mmocc-custom-footer .mmocc-footer-card {
    width: 100% !important;
    max-width: none !important;

    height: auto !important;
    min-height: 350px !important;
    max-height: 350px !important;

    padding: 26px 30px !important;
    border-radius: 20px !important;

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

  /* social card */
  .mmocc-custom-footer .mmocc-footer-main > .mmocc-footer-card:not(.mmocc-contact-card),
  .site-footer .mmocc-custom-footer .mmocc-footer-main > .mmocc-footer-card:not(.mmocc-contact-card) {
    width: 300px !important;
    max-width: 300px !important;
  }

  /* contact card */
  .mmocc-custom-footer .mmocc-footer-main > .mmocc-contact-card,
  .site-footer .mmocc-custom-footer .mmocc-footer-main > .mmocc-contact-card {
    width: 390px !important;
    max-width: 390px !important;
  }

  /* heading */
  .mmocc-custom-footer .mmocc-footer-heading,
  .site-footer .mmocc-custom-footer .mmocc-footer-heading {
    gap: 12px !important;
    margin-bottom: 22px !important;
  }

  .mmocc-custom-footer .mmocc-footer-heading h3,
  .site-footer .mmocc-custom-footer .mmocc-footer-heading h3 {
    font-size: 22px !important;
    line-height: 1.08 !important;
    letter-spacing: 0.02em !important;
  }

  .mmocc-custom-footer .mmocc-heading-icon,
  .site-footer .mmocc-custom-footer .mmocc-heading-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    font-size: 17px !important;
  }

  /* normal text */
  .mmocc-custom-footer .mmocc-footer-card p,
  .site-footer .mmocc-custom-footer .mmocc-footer-card p {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  /* QR */
  .mmocc-custom-footer .mmocc-footer-qr,
  .site-footer .mmocc-custom-footer .mmocc-footer-qr {
    width: 92px !important;
    height: 92px !important;
    padding: 8px !important;
    margin: 12px 0 14px !important;
    border-radius: 14px !important;
  }

  .mmocc-custom-footer .mmocc-footer-qr img,
  .site-footer .mmocc-custom-footer .mmocc-footer-qr img {
    width: 74px !important;
    height: 74px !important;
  }

  /* social icons */
  .mmocc-custom-footer .mmocc-footer-social,
  .site-footer .mmocc-custom-footer .mmocc-footer-social {
    gap: 10px !important;
  }

  .mmocc-custom-footer .mmocc-footer-social a,
  .site-footer .mmocc-custom-footer .mmocc-footer-social a {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 12px !important;
  }

  /* contact card compact */
  .mmocc-custom-footer .mmocc-contact-row,
  .site-footer .mmocc-custom-footer .mmocc-contact-row {
    gap: 14px !important;
    margin-bottom: 16px !important;
  }

  .mmocc-custom-footer .mmocc-contact-icon,
  .site-footer .mmocc-custom-footer .mmocc-contact-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    font-size: 15px !important;
  }

  .mmocc-custom-footer .mmocc-contact-row strong,
  .site-footer .mmocc-custom-footer .mmocc-contact-row strong {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .mmocc-custom-footer .mmocc-contact-row p,
  .mmocc-custom-footer .mmocc-contact-row a,
  .site-footer .mmocc-custom-footer .mmocc-contact-row p,
  .site-footer .mmocc-custom-footer .mmocc-contact-row a {
    font-size: 12.5px !important;
    line-height: 1.42 !important;
  }

  /* footer bottom also narrower */
  .mmocc-custom-footer .mmocc-footer-bottom,
  .site-footer .mmocc-custom-footer .mmocc-footer-bottom {
    max-width: 860px !important;
    width: calc(100% - 48px) !important;
    padding: 20px 0 28px !important;
  }

  .mmocc-custom-footer .mmocc-bottom-brand,
  .mmocc-custom-footer .mmocc-copyright,
  .mmocc-custom-footer .mmocc-footer-tagline {
    font-size: 13px !important;
  }
}

/* 2K / 4K မှာ လုံးဝပြန်မကြီးအောင် force */
@media (min-width: 1800px) {

  .mmocc-custom-footer .mmocc-footer-main,
  .site-footer .mmocc-custom-footer .mmocc-footer-main {
    grid-template-columns: 300px 390px !important;
    max-width: 820px !important;
    gap: 52px !important;
    padding-top: 54px !important;
    padding-bottom: 38px !important;
  }

  .mmocc-custom-footer .mmocc-footer-card,
  .site-footer .mmocc-custom-footer .mmocc-footer-card {
    min-height: 350px !important;
    max-height: 350px !important;
    padding: 26px 30px !important;
  }

  .mmocc-custom-footer .mmocc-footer-heading h3,
  .site-footer .mmocc-custom-footer .mmocc-footer-heading h3 {
    font-size: 22px !important;
  }

  .mmocc-custom-footer .mmocc-footer-card p,
  .mmocc-custom-footer .mmocc-contact-row p,
  .mmocc-custom-footer .mmocc-contact-row a,
  .site-footer .mmocc-custom-footer .mmocc-footer-card p,
  .site-footer .mmocc-custom-footer .mmocc-contact-row p,
  .site-footer .mmocc-custom-footer .mmocc-contact-row a {
    font-size: 12.5px !important;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  .mmocc-custom-footer .mmocc-footer-main {
    grid-template-columns: 300px 390px !important;
    max-width: 760px !important;
    gap: 28px !important;
  }

  .mmocc-custom-footer .mmocc-footer-logo-side {
    display: none !important;
  }

  .mmocc-custom-footer .mmocc-footer-card {
    min-height: 340px !important;
    max-height: none !important;
    padding: 24px 26px !important;
  }
}
/* =========================================================
   MMOCC - Premium footer icons FINAL
   Put at VERY END of style.css
   ========================================================= */

/* remove emoji feeling, make icons clean */
.mmocc-heading-icon,
.mmocc-contact-icon {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.95), rgba(246,241,234,0.92)) !important;
  border: 1px solid rgba(212, 137, 28, 0.18) !important;

  box-shadow:
    0 12px 24px rgba(17, 24, 39, 0.10),
    0 4px 10px rgba(17, 24, 39, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;

  overflow: hidden !important;
}

/* heading icons */
.mmocc-heading-icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 16px !important;
}

/* contact row icons */
.mmocc-contact-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 50% !important;
}

/* soft premium shine */
.mmocc-heading-icon::before,
.mmocc-contact-icon::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.95), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,0.35), rgba(255,255,255,0)) !important;
  pointer-events: none !important;
}

/* SVG icon mask common */
.mmocc-heading-icon::after,
.mmocc-contact-icon::after {
  content: "" !important;
  position: relative !important;
  z-index: 2 !important;

  display: block !important;
  width: 22px !important;
  height: 22px !important;

  background: linear-gradient(135deg, #f0a04b 0%, #8a4f28 100%) !important;

  mask-repeat: no-repeat !important;
  mask-position: center !important;
  mask-size: contain !important;

  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  -webkit-mask-size: contain !important;
}

.mmocc-contact-icon::after {
  width: 20px !important;
  height: 20px !important;
}

/* heading: social users */
.mmocc-icon-users::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 11C18.2091 11 20 9.20914 20 7C20 4.79086 18.2091 3 16 3C13.7909 3 12 4.79086 12 7C12 9.20914 13.7909 11 16 11Z' fill='black'/%3E%3Cpath d='M8 12C10.2091 12 12 10.2091 12 8C12 5.79086 10.2091 4 8 4C5.79086 4 4 5.79086 4 8C4 10.2091 5.79086 12 8 12Z' fill='black' opacity='0.72'/%3E%3Cpath d='M8 14C4.68629 14 2 16.0147 2 18.5V20C2 20.5523 2.44772 21 3 21H13C13.5523 21 14 20.5523 14 20V18.5C14 16.0147 11.3137 14 8 14Z' fill='black'/%3E%3Cpath d='M16 13C14.9317 13 13.938 13.2286 13.1118 13.6206C14.2675 14.6913 15 16.0213 15 17.5V19H21C21.5523 19 22 18.5523 22 18V17.5C22 15.0147 19.3137 13 16 13Z' fill='black' opacity='0.72'/%3E%3C/svg%3E") !important;
          mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 11C18.2091 11 20 9.20914 20 7C20 4.79086 18.2091 3 16 3C13.7909 3 12 4.79086 12 7C12 9.20914 13.7909 11 16 11Z' fill='black'/%3E%3Cpath d='M8 12C10.2091 12 12 10.2091 12 8C12 5.79086 10.2091 4 8 4C5.79086 4 4 5.79086 4 8C4 10.2091 5.79086 12 8 12Z' fill='black' opacity='0.72'/%3E%3Cpath d='M8 14C4.68629 14 2 16.0147 2 18.5V20C2 20.5523 2.44772 21 3 21H13C13.5523 21 14 20.5523 14 20V18.5C14 16.0147 11.3137 14 8 14Z' fill='black'/%3E%3Cpath d='M16 13C14.9317 13 13.938 13.2286 13.1118 13.6206C14.2675 14.6913 15 16.0213 15 17.5V19H21C21.5523 19 22 18.5523 22 18V17.5C22 15.0147 19.3137 13 16 13Z' fill='black' opacity='0.72'/%3E%3C/svg%3E") !important;
}

/* heading: quick links */
.mmocc-icon-link::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 13.5C8.11929 12.1193 8.11929 9.88071 9.5 8.5L12.3284 5.67157C13.8905 4.10948 16.4232 4.10948 17.9853 5.67157C19.5474 7.23367 19.5474 9.76633 17.9853 11.3284L16.5 12.8137' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M14.5 10.5C15.8807 11.8807 15.8807 14.1193 14.5 15.5L11.6716 18.3284C10.1095 19.8905 7.57683 19.8905 6.01472 18.3284C4.45262 16.7663 4.45262 14.2337 6.01472 12.6716L7.5 11.1863' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") !important;
          mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 13.5C8.11929 12.1193 8.11929 9.88071 9.5 8.5L12.3284 5.67157C13.8905 4.10948 16.4232 4.10948 17.9853 5.67157C19.5474 7.23367 19.5474 9.76633 17.9853 11.3284L16.5 12.8137' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M14.5 10.5C15.8807 11.8807 15.8807 14.1193 14.5 15.5L11.6716 18.3284C10.1095 19.8905 7.57683 19.8905 6.01472 18.3284C4.45262 16.7663 4.45262 14.2337 6.01472 12.6716L7.5 11.1863' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

/* heading: contact phone */
.mmocc-icon-phone-main::after,
.mmocc-icon-phone::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.62 10.79C8.06 13.62 10.38 15.93 13.21 17.38L15.41 15.18C15.68 14.91 16.08 14.82 16.43 14.94C17.55 15.31 18.75 15.5 20 15.5C20.55 15.5 21 15.95 21 16.5V20C21 20.55 20.55 21 20 21C10.61 21 3 13.39 3 4C3 3.45 3.45 3 4 3H7.5C8.05 3 8.5 3.45 8.5 4C8.5 5.25 8.69 6.45 9.06 7.57C9.17 7.92 9.09 8.31 8.81 8.59L6.62 10.79Z' fill='black'/%3E%3C/svg%3E") !important;
          mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.62 10.79C8.06 13.62 10.38 15.93 13.21 17.38L15.41 15.18C15.68 14.91 16.08 14.82 16.43 14.94C17.55 15.31 18.75 15.5 20 15.5C20.55 15.5 21 15.95 21 16.5V20C21 20.55 20.55 21 20 21C10.61 21 3 13.39 3 4C3 3.45 3.45 3 4 3H7.5C8.05 3 8.5 3.45 8.5 4C8.5 5.25 8.69 6.45 9.06 7.57C9.17 7.92 9.09 8.31 8.81 8.59L6.62 10.79Z' fill='black'/%3E%3C/svg%3E") !important;
}

/* location */
.mmocc-icon-location::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM12 11.5C10.62 11.5 9.5 10.38 9.5 9C9.5 7.62 10.62 6.5 12 6.5C13.38 6.5 14.5 7.62 14.5 9C14.5 10.38 13.38 11.5 12 11.5Z' fill='black'/%3E%3C/svg%3E") !important;
          mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM12 11.5C10.62 11.5 9.5 10.38 9.5 9C9.5 7.62 10.62 6.5 12 6.5C13.38 6.5 14.5 7.62 14.5 9C14.5 10.38 13.38 11.5 12 11.5Z' fill='black'/%3E%3C/svg%3E") !important;
}

/* mail */
.mmocc-icon-mail::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5H20C21.1 5 22 5.9 22 7V17C22 18.1 21.1 19 20 19H4C2.9 19 2 18.1 2 17V7C2 5.9 2.9 5 4 5ZM12 12.7L20 7.7V7L12 12L4 7V7.7L12 12.7Z' fill='black'/%3E%3C/svg%3E") !important;
          mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5H20C21.1 5 22 5.9 22 7V17C22 18.1 21.1 19 20 19H4C2.9 19 2 18.1 2 17V7C2 5.9 2.9 5 4 5ZM12 12.7L20 7.7V7L12 12L4 7V7.7L12 12.7Z' fill='black'/%3E%3C/svg%3E") !important;
}

/* clock */
.mmocc-icon-clock::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 12.4L16.5 14.48L15.75 15.71L11.5 13.2V7H13V12.4Z' fill='black'/%3E%3C/svg%3E") !important;
          mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 12.4L16.5 14.48L15.75 15.71L11.5 13.2V7H13V12.4Z' fill='black'/%3E%3C/svg%3E") !important;
}

/* contact card row alignment */
.mmocc-contact-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
}

.mmocc-contact-row:hover .mmocc-contact-icon,
.mmocc-footer-heading:hover .mmocc-heading-icon {
  transform: translateY(-2px) !important;
  border-color: rgba(212, 137, 28, 0.32) !important;
  box-shadow:
    0 16px 30px rgba(17, 24, 39, 0.13),
    0 6px 14px rgba(17, 24, 39, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.mmocc-heading-icon,
.mmocc-contact-icon {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease !important;
}

/* social icons premium circle */
.mmocc-footer-social {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

.mmocc-footer-social a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;

  border-radius: 50% !important;

  font-family: Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #8a4f28 !important;
  text-decoration: none !important;

  background:
    linear-gradient(180deg, #ffffff 0%, #f8f2eb 100%) !important;
  border: 1px solid rgba(212, 137, 28, 0.16) !important;

  box-shadow:
    0 8px 18px rgba(17, 24, 39, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;

  transition:
    transform 0.25s ease,
    color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease !important;
}

.mmocc-footer-social a:hover {
  transform: translateY(-3px) !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #f0a04b 0%, #8a4f28 100%) !important;
  box-shadow:
    0 12px 24px rgba(138, 79, 40, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.28) !important;
}

/* mobile size */
@media (max-width: 767px) {
  .mmocc-heading-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 14px !important;
  }

  .mmocc-contact-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }

  .mmocc-heading-icon::after {
    width: 20px !important;
    height: 20px !important;
  }

  .mmocc-contact-icon::after {
    width: 18px !important;
    height: 18px !important;
  }

  .mmocc-footer-social a {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }
}
/* =========================================================
   MMOCC - Footer QR code bigger FINAL
   Put at VERY END of style.css
   ========================================================= */

/* QR ဘောင်ကိုကြီးမယ် */
.site-footer .mmocc-custom-footer .mmocc-footer-qr,
.mmocc-custom-footer .mmocc-footer-qr {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 132px !important;
  max-width: 132px !important;
  height: 132px !important;
  max-height: 132px !important;

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

  background: #ffffff !important;
  border-radius: 18px !important;
  border: 1px solid rgba(212, 137, 28, 0.18) !important;

  box-shadow:
    0 14px 28px rgba(17, 24, 39, 0.12),
    0 5px 12px rgba(17, 24, 39, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;

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

/* QR code image ကိုကြီးမယ် */
.site-footer .mmocc-custom-footer .mmocc-footer-qr img,
.mmocc-custom-footer .mmocc-footer-qr img {
  display: block !important;

  width: 108px !important;
  max-width: 108px !important;
  height: 108px !important;
  max-height: 108px !important;

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

  object-fit: contain !important;
  border-radius: 8px !important;

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

  animation: none !important;
  transform: none !important;
}

/* hover မှာ မရွေ့စေချင်ရင် */
.site-footer .mmocc-footer-card:hover .mmocc-footer-qr img,
.site-footer .widget:hover .mmocc-footer-qr img {
  transform: none !important;
}

/* =========================================================
   MMOCC - REAL 2K / 4K 100% ZOOM VISUAL SCALE FIX
   Works with Windows display scale / high DPI monitors
   Put at VERY END of style.css
   ========================================================= */

:root {
  --mmocc-screen-scale: 1;
  --mmocc-wide-container: 1180px;
}

/* 2K / 4K with Windows scaling: CSS viewport may still be 1600~1920 */
@media (min-width: 1500px) and (min-resolution: 1.25dppx) {
  :root {
    --mmocc-screen-scale: 1.22;
    --mmocc-wide-container: 1440px;
    --mmocc-large-scale: 1.22;
    --mmocc-home-max: 1440px;
  }
}

/* 4K with 150% / 175% / 200% display scale */
@media (min-width: 1700px) and (min-resolution: 1.5dppx) {
  :root {
    --mmocc-screen-scale: 1.38;
    --mmocc-wide-container: 1640px;
    --mmocc-large-scale: 1.38;
    --mmocc-home-max: 1640px;
  }
}

/* True 4K browser viewport, when Windows scale is 100% */
@media (min-width: 2400px) {
  :root {
    --mmocc-screen-scale: 1.45;
    --mmocc-wide-container: 1720px;
    --mmocc-large-scale: 1.45;
    --mmocc-home-max: 1720px;
  }
}

/* Very large 4K / TV */
@media (min-width: 3200px) {
  :root {
    --mmocc-screen-scale: 1.62;
    --mmocc-wide-container: 1920px;
    --mmocc-large-scale: 1.62;
    --mmocc-home-max: 1920px;
  }
}


/* =========================================================
   COMMON CONTAINERS
   ========================================================= */

@media (min-width: 1500px) {
  body.home .container,
  body.home section .container,
  body.home .cl-section-wrap,
  body.home #rpwwt-recent-posts-widget-with-thumbnails-9,
  body.home #cl_blog.cons_light_blog-list-area > .container,
  body.home #free-hand-text-section .container,
  body.home .mmocc-footer-main,
  body.home .mmocc-footer-bottom {
    max-width: var(--mmocc-wide-container) !important;
  }
}


/* =========================================================
   WHY CHOOSE - 2K / 4K visual enlarge, no overlap
   ========================================================= */

@media (min-width: 1500px) {
  body.home .mmocc-why-choose-section {
    padding-top: calc(62px * var(--mmocc-screen-scale)) !important;
    padding-bottom: calc(70px * var(--mmocc-screen-scale)) !important;
  }

  body.home .mmocc-why-choose-inner {
    width: min(var(--mmocc-wide-container), calc(100% - 80px)) !important;
    max-width: var(--mmocc-wide-container) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.home .mmocc-section-heading {
    margin-bottom: calc(34px * var(--mmocc-screen-scale)) !important;
  }

  body.home .mmocc-section-heading h2 {
    font-size: calc(42px * var(--mmocc-screen-scale)) !important;
    line-height: 1.12 !important;
  }

  body.home .mmocc-section-heading .mmocc-section-subtitle {
    max-width: calc(720px * var(--mmocc-screen-scale)) !important;
    font-size: calc(15px * var(--mmocc-screen-scale)) !important;
    line-height: 1.55 !important;
  }

  body.home .mmocc-why-cards {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: calc(20px * var(--mmocc-screen-scale)) !important;
    align-items: stretch !important;
  }

  body.home .mmocc-why-card {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    min-height: calc(206px * var(--mmocc-screen-scale)) !important;
    padding:
      calc(24px * var(--mmocc-screen-scale))
      calc(18px * var(--mmocc-screen-scale))
      calc(22px * var(--mmocc-screen-scale)) !important;

    border-radius: calc(12px * var(--mmocc-screen-scale)) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body.home .mmocc-why-icon {
    width: calc(58px * var(--mmocc-screen-scale)) !important;
    height: calc(58px * var(--mmocc-screen-scale)) !important;
    min-width: calc(58px * var(--mmocc-screen-scale)) !important;
    min-height: calc(58px * var(--mmocc-screen-scale)) !important;
    font-size: calc(30px * var(--mmocc-screen-scale)) !important;
  }

  body.home .mmocc-why-badge {
    font-size: calc(22px * var(--mmocc-screen-scale)) !important;
  }

  body.home .mmocc-why-card h3 {
    font-size: calc(17px * var(--mmocc-screen-scale)) !important;
    line-height: 1.28 !important;
    margin-bottom: calc(10px * var(--mmocc-screen-scale)) !important;
    white-space: normal !important;
  }

  body.home .mmocc-why-card p {
    font-size: calc(13px * var(--mmocc-screen-scale)) !important;
    line-height: 1.55 !important;
    white-space: normal !important;
  }
}


/* =========================================================
   FEATURED PROJECTS - 2K / 4K visual enlarge
   ========================================================= */

@media (min-width: 1500px) {
  body.home section.cons_light_feature.team-list.style1 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body.home #rpwwt-recent-posts-widget-with-thumbnails-9 {
    max-width: var(--mmocc-wide-container) !important;
    padding-top: calc(58px * var(--mmocc-screen-scale)) !important;
    padding-bottom: calc(78px * var(--mmocc-screen-scale)) !important;
  }

  body.home #rpwwt-recent-posts-widget-with-thumbnails-9 > h2.section-title,
  body.home #rpwwt-recent-posts-widget-with-thumbnails-9 .section-title {
    font-size: calc(42px * var(--mmocc-screen-scale)) !important;
    margin-bottom: calc(34px * var(--mmocc-screen-scale)) !important;
  }

  body.home #recent_posts_with_thumbnail {
    gap: calc(28px * var(--mmocc-screen-scale)) !important;
  }

  body.home #recent_posts_with_thumbnail > .feature-list {
    flex: 0 0 calc(260px * var(--mmocc-screen-scale)) !important;
    width: calc(260px * var(--mmocc-screen-scale)) !important;
    max-width: calc(260px * var(--mmocc-screen-scale)) !important;
  }

  body.home #recent_posts_with_thumbnail > .feature-list .box {
    height: calc(365px * var(--mmocc-screen-scale)) !important;
    min-height: calc(365px * var(--mmocc-screen-scale)) !important;
    max-height: calc(365px * var(--mmocc-screen-scale)) !important;
    border-radius: calc(22px * var(--mmocc-screen-scale)) !important;
  }

  body.home #recent_posts_with_thumbnail .feature-list figure,
  body.home #recent_posts_with_thumbnail .feature-list .box > a:first-child,
  body.home #recent_posts_with_thumbnail .feature-list figure img,
  body.home #recent_posts_with_thumbnail .feature-list .box img {
    height: calc(230px * var(--mmocc-screen-scale)) !important;
    max-height: calc(230px * var(--mmocc-screen-scale)) !important;
  }

  body.home #recent_posts_with_thumbnail .bottom-content {
    height: calc(135px * var(--mmocc-screen-scale)) !important;
    min-height: calc(135px * var(--mmocc-screen-scale)) !important;
    max-height: calc(135px * var(--mmocc-screen-scale)) !important;
    padding:
      calc(56px * var(--mmocc-screen-scale))
      calc(16px * var(--mmocc-screen-scale))
      calc(16px * var(--mmocc-screen-scale)) !important;
  }

  body.home #recent_posts_with_thumbnail .icon-box {
    width: calc(64px * var(--mmocc-screen-scale)) !important;
    height: calc(64px * var(--mmocc-screen-scale)) !important;
    min-width: calc(64px * var(--mmocc-screen-scale)) !important;
    min-height: calc(64px * var(--mmocc-screen-scale)) !important;
  }

  body.home #recent_posts_with_thumbnail .rpwwt-post-title,
  body.home #recent_posts_with_thumbnail .rpwwt-post-title a {
    font-size: calc(20px * var(--mmocc-screen-scale)) !important;
    line-height: 1.28 !important;
    max-height: calc(56px * var(--mmocc-screen-scale)) !important;
  }

  body.home .mmocc-featured-controls {
    margin-top: calc(28px * var(--mmocc-screen-scale)) !important;
    gap: calc(16px * var(--mmocc-screen-scale)) !important;
  }

  body.home .mmocc-featured-btn,
  body.home button.mmocc-featured-btn {
    width: calc(48px * var(--mmocc-screen-scale)) !important;
    min-width: calc(48px * var(--mmocc-screen-scale)) !important;
    max-width: calc(48px * var(--mmocc-screen-scale)) !important;
    height: calc(40px * var(--mmocc-screen-scale)) !important;
    min-height: calc(40px * var(--mmocc-screen-scale)) !important;
    max-height: calc(40px * var(--mmocc-screen-scale)) !important;
  }

  body.home .mmocc-featured-btn::before {
    font-size: calc(25px * var(--mmocc-screen-scale)) !important;
  }
}


/* =========================================================
   LATEST NEWS - 2K / 4K visual enlarge
   ========================================================= */

@media (min-width: 1500px) {
  body.home #cl_blog.cons_light_blog-list-area {
    padding-top: calc(78px * var(--mmocc-screen-scale)) !important;
    padding-bottom: calc(96px * var(--mmocc-screen-scale)) !important;
  }

  body.home #cl_blog.cons_light_blog-list-area > .container {
    max-width: var(--mmocc-wide-container) !important;
  }

  body.home #cl_blog .section-title {
    margin-bottom: calc(38px * var(--mmocc-screen-scale)) !important;
  }

  body.home #cl_blog .section-title h2,
  body.home #cl_blog h2.section-title {
    font-size: calc(42px * var(--mmocc-screen-scale)) !important;
    line-height: 1.12 !important;
  }

  body.home #cl_blog .section-title p {
    font-size: calc(16px * var(--mmocc-screen-scale)) !important;
  }

  body.home #cl_blog li {
    margin-bottom: calc(30px * var(--mmocc-screen-scale)) !important;
  }

  body.home #cl_blog li article.article {
    border-radius: calc(24px * var(--mmocc-screen-scale)) !important;
  }

  body.home #cl_blog .blog-post-thumbnail img {
    min-height: calc(285px * var(--mmocc-screen-scale)) !important;
  }

  body.home #cl_blog .box {
    padding: calc(34px * var(--mmocc-screen-scale)) !important;
  }

  body.home #cl_blog h3.title {
    font-size: calc(30px * var(--mmocc-screen-scale)) !important;
    line-height: 1.18 !important;
  }

  body.home #cl_blog .entry-content,
  body.home #cl_blog .entry-content p {
    font-size: calc(15px * var(--mmocc-screen-scale)) !important;
    line-height: 1.8 !important;
  }
}


/* =========================================================
   REMOTE WORK - 2K / 4K visual enlarge
   ========================================================= */

@media (min-width: 1500px) {
  body.home #free-hand-text-section {
    min-height: calc(520px * var(--mmocc-screen-scale)) !important;
    padding-top: calc(70px * var(--mmocc-screen-scale)) !important;
    padding-bottom: calc(70px * var(--mmocc-screen-scale)) !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  body.home #free-hand-text-section .container {
    max-width: var(--mmocc-wide-container) !important;
  }

  body.home #free-hand-text-section h3,
  body.home #free-hand-text-section h2 {
    font-size: calc(20px * var(--mmocc-screen-scale)) !important;
    line-height: 1.25 !important;
    margin-bottom: calc(14px * var(--mmocc-screen-scale)) !important;
  }

  body.home #free-hand-text-section p {
    font-size: calc(13px * var(--mmocc-screen-scale)) !important;
    line-height: 1.65 !important;
    margin-bottom: calc(20px * var(--mmocc-screen-scale)) !important;
  }

  body.home #free-hand-text-section .mmocc-remote-feature-list {
    gap:
      calc(12px * var(--mmocc-screen-scale))
      calc(34px * var(--mmocc-screen-scale)) !important;
    margin:
      calc(18px * var(--mmocc-screen-scale))
      0
      calc(22px * var(--mmocc-screen-scale)) !important;
  }

  body.home #free-hand-text-section .mmocc-remote-feature-list li {
    gap: calc(10px * var(--mmocc-screen-scale)) !important;
    font-size: calc(19px * var(--mmocc-screen-scale)) !important;
  }

  body.home #free-hand-text-section .mmocc-remote-feature-icon {
    width: calc(20px * var(--mmocc-screen-scale)) !important;
    height: calc(20px * var(--mmocc-screen-scale)) !important;
    min-width: calc(20px * var(--mmocc-screen-scale)) !important;
    min-height: calc(20px * var(--mmocc-screen-scale)) !important;
  }

  body.home #free-hand-text-section .mmocc-remote-feature-icon::before {
    width: calc(8px * var(--mmocc-screen-scale)) !important;
    height: calc(5px * var(--mmocc-screen-scale)) !important;
    border-left-width: calc(2px * var(--mmocc-screen-scale)) !important;
    border-bottom-width: calc(2px * var(--mmocc-screen-scale)) !important;
  }

  body.home #free-hand-text-section a.btn.btn-primary,
  body.home #free-hand-text-section .btn.btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: calc(122px * var(--mmocc-screen-scale)) !important;
    height: calc(48px * var(--mmocc-screen-scale)) !important;
    min-height: calc(48px * var(--mmocc-screen-scale)) !important;

    padding: 0 calc(26px * var(--mmocc-screen-scale)) !important;
    margin-top: calc(10px * var(--mmocc-screen-scale)) !important;

    font-size: calc(14px * var(--mmocc-screen-scale)) !important;
    line-height: 1 !important;
    white-space: nowrap !important;

    border-radius: calc(6px * var(--mmocc-screen-scale)) !important;
    box-sizing: border-box !important;
  }

  body.home #free-hand-text-section a.btn.btn-primary::before,
  body.home #free-hand-text-section a.btn.btn-primary::after,
  body.home #free-hand-text-section .btn.btn-primary::before,
  body.home #free-hand-text-section .btn.btn-primary::after {
    content: none !important;
    display: none !important;
  }
}


/* =========================================================
   CUSTOM FOOTER - 2K / 4K visual enlarge + circle icons
   ========================================================= */

@media (min-width: 1500px) {
  body.home .mmocc-custom-footer {
    padding-top: calc(44px * var(--mmocc-screen-scale)) !important;
  }

  body.home .mmocc-footer-main {
    max-width: var(--mmocc-wide-container) !important;
    grid-template-columns:
      minmax(calc(300px * var(--mmocc-screen-scale)), calc(360px * var(--mmocc-screen-scale)))
      minmax(calc(390px * var(--mmocc-screen-scale)), calc(470px * var(--mmocc-screen-scale))) !important;
    gap: calc(56px * var(--mmocc-screen-scale)) !important;
    padding-top: calc(54px * var(--mmocc-screen-scale)) !important;
    padding-bottom: calc(38px * var(--mmocc-screen-scale)) !important;
  }

  body.home .mmocc-footer-card {
    min-height: calc(350px * var(--mmocc-screen-scale)) !important;
    padding:
      calc(28px * var(--mmocc-screen-scale))
      calc(30px * var(--mmocc-screen-scale)) !important;
    border-radius: calc(18px * var(--mmocc-screen-scale)) !important;
  }

  body.home .mmocc-footer-heading {
    gap: calc(14px * var(--mmocc-screen-scale)) !important;
  }

  body.home .mmocc-footer-heading h3 {
    font-size: calc(20px * var(--mmocc-screen-scale)) !important;
  }

  body.home .mmocc-footer-card p,
  body.home .mmocc-contact-row,
  body.home .mmocc-contact-row strong,
  body.home .mmocc-contact-row a,
  body.home .mmocc-contact-row span {
    font-size: calc(13px * var(--mmocc-screen-scale)) !important;
    line-height: 1.55 !important;
  }

  body.home .mmocc-footer-qr {
    width: calc(120px * var(--mmocc-screen-scale)) !important;
    max-width: calc(120px * var(--mmocc-screen-scale)) !important;
  }

  body.home .mmocc-footer-qr img {
    width: calc(108px * var(--mmocc-screen-scale)) !important;
    height: calc(108px * var(--mmocc-screen-scale)) !important;
    max-width: calc(108px * var(--mmocc-screen-scale)) !important;
    max-height: calc(108px * var(--mmocc-screen-scale)) !important;
  }

  body.home .mmocc-contact-row {
    gap: calc(14px * var(--mmocc-screen-scale)) !important;
  }

  body.home .mmocc-contact-icon {
    flex: 0 0 calc(36px * var(--mmocc-screen-scale)) !important;
    width: calc(36px * var(--mmocc-screen-scale)) !important;
    height: calc(36px * var(--mmocc-screen-scale)) !important;
    min-width: calc(36px * var(--mmocc-screen-scale)) !important;
    min-height: calc(36px * var(--mmocc-screen-scale)) !important;
    max-width: calc(36px * var(--mmocc-screen-scale)) !important;
    max-height: calc(36px * var(--mmocc-screen-scale)) !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    padding: 0 !important;
  }

  body.home .mmocc-contact-icon::after {
    width: calc(17px * var(--mmocc-screen-scale)) !important;
    height: calc(17px * var(--mmocc-screen-scale)) !important;
  }

  body.home .mmocc-heading-icon {
    flex: 0 0 calc(38px * var(--mmocc-screen-scale)) !important;
    width: calc(38px * var(--mmocc-screen-scale)) !important;
    height: calc(38px * var(--mmocc-screen-scale)) !important;
    min-width: calc(38px * var(--mmocc-screen-scale)) !important;
    min-height: calc(38px * var(--mmocc-screen-scale)) !important;
    max-width: calc(38px * var(--mmocc-screen-scale)) !important;
    max-height: calc(38px * var(--mmocc-screen-scale)) !important;
    aspect-ratio: 1 / 1 !important;
  }

  body.home .mmocc-footer-bottom {
    max-width: var(--mmocc-wide-container) !important;
    padding-top: calc(28px * var(--mmocc-screen-scale)) !important;
    padding-bottom: calc(30px * var(--mmocc-screen-scale)) !important;
  }

  body.home .mmocc-bottom-brand,
  body.home .mmocc-copyright,
  body.home .mmocc-footer-tagline {
    font-size: calc(14px * var(--mmocc-screen-scale)) !important;
  }
}

/* =========================================================
   MMOCC - 4K Footer contact clipping + bottom layout FINAL FIX
   Put at VERY END of style.css
   ========================================================= */

/* footer custom area must not clip contact card */
.mmocc-custom-footer,
.mmocc-custom-footer .container,
.mmocc-custom-footer .row,
.mmocc-custom-footer .textwidget,
.mmocc-custom-footer .mmocc-footer-main,
.mmocc-custom-footer .mmocc-footer-card {
  overflow: visible !important;
}

/* Contact card content အောက်ဆုံး Business Hour မဖြတ်အောင် */
.mmocc-custom-footer .mmocc-footer-card,
.mmocc-custom-footer .mmocc-contact-card {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* contact rows spacing stable */
.mmocc-custom-footer .mmocc-contact-card .mmocc-contact-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;

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

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

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

.mmocc-custom-footer .mmocc-contact-card .mmocc-contact-row:last-child {
  margin-bottom: 0 !important;
}

/* icon ဘဲဥမဖြစ်အောင် circle fixed */
.mmocc-custom-footer .mmocc-contact-icon,
.mmocc-custom-footer .mmocc-heading-icon {
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;

  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;

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

  padding: 0 !important;
  box-sizing: border-box !important;
}

/* contact text တွေ line-height သေချာ */
.mmocc-custom-footer .mmocc-contact-row > div {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.mmocc-custom-footer .mmocc-contact-row strong {
  display: block !important;
  margin: 0 0 3px 0 !important;

  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

.mmocc-custom-footer .mmocc-contact-row p,
.mmocc-custom-footer .mmocc-contact-row a,
.mmocc-custom-footer .mmocc-contact-row span {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;

  font-size: 12px !important;
  line-height: 1.45 !important;

  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Business Hour row အောက်ကနေမဖြတ်အောင် */
.mmocc-custom-footer .mmocc-contact-card .mmocc-contact-row:last-child p {
  padding-bottom: 2px !important;
}


/* =========================================================
   Footer bottom - picture 4 style
   clean line + three columns, no box/highlight look
   ========================================================= */

.mmocc-custom-footer .mmocc-footer-bottom {
  width: min(1180px, calc(100% - 80px)) !important;
  max-width: 1180px !important;

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

  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  column-gap: 36px !important;

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

  border-top: 2px solid rgba(248, 147, 31, 0.82) !important;
  box-shadow: none !important;

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

.mmocc-custom-footer .mmocc-bottom-brand,
.mmocc-custom-footer .mmocc-copyright,
.mmocc-custom-footer .mmocc-footer-tagline {
  margin: 0 !important;
  padding: 0 !important;

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

  color: #0f2a4a !important;
  font-family: "Oswald", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;

  overflow: visible !important;
}

.mmocc-custom-footer .mmocc-bottom-brand {
  justify-self: start !important;
  text-align: left !important;
}

.mmocc-custom-footer .mmocc-copyright {
  justify-self: center !important;
  text-align: center !important;
}

.mmocc-custom-footer .mmocc-footer-tagline {
  justify-self: end !important;
  text-align: right !important;
}


/* =========================================================
   2K / 4K footer specific correction
   ========================================================= */

@media (min-width: 1500px) {
  .mmocc-custom-footer .mmocc-footer-main {
    align-items: flex-start !important;
    padding-bottom: 34px !important;
  }

  .mmocc-custom-footer .mmocc-footer-card,
  .mmocc-custom-footer .mmocc-contact-card {
    min-height: 360px !important;
    padding: 30px 34px 34px !important;
  }

  .mmocc-custom-footer .mmocc-contact-card .mmocc-contact-row {
    margin-bottom: 16px !important;
  }

  .mmocc-custom-footer .mmocc-contact-row strong {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .mmocc-custom-footer .mmocc-contact-row p,
  .mmocc-custom-footer .mmocc-contact-row a,
  .mmocc-custom-footer .mmocc-contact-row span {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  .mmocc-custom-footer .mmocc-footer-bottom {
    width: min(1180px, calc(100% - 80px)) !important;
    max-width: 1180px !important;

    margin-top: 26px !important;
    padding-top: 24px !important;
    padding-bottom: 26px !important;
  }

  .mmocc-custom-footer .mmocc-bottom-brand,
  .mmocc-custom-footer .mmocc-copyright,
  .mmocc-custom-footer .mmocc-footer-tagline {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }
}

/* true 4K viewport မှာ အရမ်းကြီးမသွားအောင် footer bottom ကို ပုံ 4 look နဲ့ထိန်း */
@media (min-width: 2400px) {
  .mmocc-custom-footer .mmocc-footer-bottom {
    max-width: 1280px !important;
    width: min(1280px, calc(100% - 120px)) !important;
  }

  .mmocc-custom-footer .mmocc-footer-card,
  .mmocc-custom-footer .mmocc-contact-card {
    min-height: 380px !important;
  }
}


/* tablet/mobile မှာ footer bottom stack */
@media (max-width: 767px) {
  .mmocc-custom-footer .mmocc-footer-bottom {
    width: calc(100% - 32px) !important;
    grid-template-columns: 1fr !important;
    row-gap: 10px !important;

    margin-top: 18px !important;
    padding: 18px 0 20px !important;
  }

  .mmocc-custom-footer .mmocc-bottom-brand,
  .mmocc-custom-footer .mmocc-copyright,
  .mmocc-custom-footer .mmocc-footer-tagline {
    justify-self: center !important;
    text-align: center !important;
    font-size: 13px !important;
  }
}

/* =========================================================
   MMOCC - Contact icon center inside circle FINAL
   Put at VERY END of style.css
   ========================================================= */

/* icon holder / white circle */
.mmocc-custom-footer .mmocc-contact-icon {
  position: relative !important;

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

  flex: 0 0 50px !important;
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  max-width: 50px !important;
  max-height: 50px !important;

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

  border-radius: 50% !important;
  overflow: visible !important;
  box-sizing: border-box !important;

  line-height: 1 !important;
  text-align: center !important;
}

/* white background circle ကို center fixed */
.mmocc-custom-footer .mmocc-contact-icon::before {
  content: "" !important;

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

  width: 50px !important;
  height: 50px !important;

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

  border-radius: 50% !important;
  background:
    radial-gradient(circle at 30% 20%,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.96) 42%,
      rgba(255, 246, 235, 0.92) 100%
    ) !important;

  border: 1px solid rgba(240, 160, 75, 0.18) !important;
  box-shadow:
    0 10px 22px rgba(138, 79, 40, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;

  z-index: 1 !important;
}

/* orange icon / svg / data icon ကို circle အလယ်တည့်တည့် */
.mmocc-custom-footer .mmocc-contact-icon::after {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;

  width: 22px !important;
  height: 22px !important;

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

  display: block !important;
  margin: 0 !important;
  padding: 0 !important;

  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 22px 22px !important;

  line-height: 1 !important;
  z-index: 2 !important;
}

/* contact row spacing */
.mmocc-custom-footer .mmocc-contact-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
}

/* text side alignment */
.mmocc-custom-footer .mmocc-contact-row > div:not(.mmocc-contact-icon) {
  padding-top: 2px !important;
}
/* =========================================================
   MMOCC - Footer bottom 4K / 2K text align FINAL
   Put at VERY END of style.css
   ========================================================= */

/* footer bottom base */
.mmocc-custom-footer .mmocc-footer-bottom {
  width: 100% !important;
  max-width: 1180px !important;

  margin: 28px auto 0 !important;
  padding: 18px 0 16px !important;

  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  column-gap: 34px !important;

  border-top: 2px solid rgba(248, 147, 31, 0.85) !important;

  box-sizing: border-box !important;
}

/* left text */
.mmocc-custom-footer .mmocc-bottom-brand {
  justify-self: start !important;
  text-align: left !important;
  white-space: nowrap !important;
}

/* center copyright */
.mmocc-custom-footer .mmocc-copyright {
  justify-self: center !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* right tagline */
.mmocc-custom-footer .mmocc-footer-tagline {
  justify-self: end !important;
  text-align: right !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  flex-wrap: nowrap !important;

  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

/* tagline inner span တွေ line မဆင်းအောင် */
.mmocc-custom-footer .mmocc-footer-tagline span {
  display: inline-block !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
}

/* bottom font consistency */
.mmocc-custom-footer .mmocc-footer-bottom,
.mmocc-custom-footer .mmocc-footer-bottom * {
  font-size: 16px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
}

/* 2K / 4K screen မှာ laptop layout အတိုင်း center width မကျဉ်းစေ */
@media (min-width: 1500px) {
  .mmocc-custom-footer .mmocc-footer-bottom {
    width: 1180px !important;
    max-width: 1180px !important;
    grid-template-columns: 1fr auto 1fr !important;
    column-gap: 38px !important;
    padding: 18px 0 16px !important;
  }
}

/* 4K မှာလည်း မချဲ့ မကျဉ်းဘဲ laptop-like fixed footer bottom */
@media (min-width: 2400px) {
  .mmocc-custom-footer .mmocc-footer-bottom {
    width: 1180px !important;
    max-width: 1180px !important;
    min-width: 1180px !important;

    grid-template-columns: 1fr auto 1fr !important;
    column-gap: 38px !important;

    transform: none !important;
    zoom: 1 !important;
  }

  .mmocc-custom-footer .mmocc-footer-bottom,
  .mmocc-custom-footer .mmocc-footer-bottom * {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }
}

/* smaller laptop safety */
@media (min-width: 1025px) and (max-width: 1280px) {
  .mmocc-custom-footer .mmocc-footer-bottom {
    width: calc(100% - 48px) !important;
    max-width: 980px !important;
    column-gap: 24px !important;
  }

  .mmocc-custom-footer .mmocc-footer-bottom,
  .mmocc-custom-footer .mmocc-footer-bottom * {
    font-size: 14px !important;
  }

  .mmocc-custom-footer .mmocc-footer-tagline {
    gap: 10px !important;
  }
}

/* mobile/tablet မှာတော့ stack */
@media (max-width: 767px) {
  .mmocc-custom-footer .mmocc-footer-bottom {
    width: calc(100% - 32px) !important;
    max-width: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    text-align: center !important;
  }

  .mmocc-custom-footer .mmocc-bottom-brand,
  .mmocc-custom-footer .mmocc-copyright,
  .mmocc-custom-footer .mmocc-footer-tagline {
    justify-self: center !important;
    text-align: center !important;
  }
}
/* =========================================================
   MMOCC - Footer contact card 4K bottom cut fix FINAL
   Put at VERY END of style.css
   ========================================================= */

/* Contact card content မပျက်အောင် fixed height ဖြုတ် */
.mmocc-custom-footer .mmocc-footer-card.mmocc-contact-card,
.mmocc-custom-footer .mmocc-contact-card {
  height: auto !important;
  min-height: 350px !important;
  max-height: none !important;

  overflow: visible !important;
  padding-bottom: 34px !important;

  box-sizing: border-box !important;
}

/* card အတွင်း content ကို အပြည့်မြင်အောင် */
.mmocc-custom-footer .mmocc-contact-card .mmocc-contact-row {
  min-height: auto !important;
  height: auto !important;
  overflow: visible !important;
  align-items: flex-start !important;
}

/* Business Hour row အောက်မပျက်အောင် */
.mmocc-custom-footer .mmocc-contact-card .mmocc-contact-row:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 6px !important;
}

/* contact text line-height ကို 4K မှာ compact ထား */
.mmocc-custom-footer .mmocc-contact-card strong,
.mmocc-custom-footer .mmocc-contact-card p,
.mmocc-custom-footer .mmocc-contact-card a,
.mmocc-custom-footer .mmocc-contact-card span {
  line-height: 1.45 !important;
}

/* 2K / 4K screen override */
@media (min-width: 1500px) {
  .mmocc-custom-footer .mmocc-footer-card.mmocc-contact-card,
  .mmocc-custom-footer .mmocc-contact-card {
    height: auto !important;
    min-height: 372px !important;
    max-height: none !important;

    padding: 30px 34px 36px !important;
    overflow: visible !important;
  }
}

/* 4K မှာ card ကို နည်းနည်းမြင့်ပေး */
@media (min-width: 2400px) {
  .mmocc-custom-footer .mmocc-footer-card.mmocc-contact-card,
  .mmocc-custom-footer .mmocc-contact-card {
    height: auto !important;
    min-height: 385px !important;
    max-height: none !important;

    padding-bottom: 40px !important;
    overflow: visible !important;
  }
}
/* =========================================================
   MMOCC - Footer custom cards REAL equal height FINAL
   Put at VERY END of style.css
   ========================================================= */

/* parent row ကို stretch လုပ် */
.mmocc-custom-footer .mmocc-footer-main,
.site-footer .mmocc-custom-footer .mmocc-footer-main {
  display: grid !important;
  grid-template-columns: 300px 390px !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 52px !important;

  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding-bottom: 34px !important;
  box-sizing: border-box !important;
}

/* both cards must use same height */
.mmocc-custom-footer .mmocc-footer-main > .mmocc-footer-card,
.site-footer .mmocc-custom-footer .mmocc-footer-main > .mmocc-footer-card,
.mmocc-custom-footer .mmocc-footer-main > .mmocc-contact-card,
.site-footer .mmocc-custom-footer .mmocc-footer-main > .mmocc-contact-card {
  height: 372px !important;
  min-height: 372px !important;
  max-height: 372px !important;

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

  padding: 30px 34px 34px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* left card width */
.mmocc-custom-footer .mmocc-footer-main > .mmocc-footer-card:not(.mmocc-contact-card),
.site-footer .mmocc-custom-footer .mmocc-footer-main > .mmocc-footer-card:not(.mmocc-contact-card) {
  width: 300px !important;
  max-width: 300px !important;
}

/* right card width */
.mmocc-custom-footer .mmocc-footer-main > .mmocc-contact-card,
.site-footer .mmocc-custom-footer .mmocc-footer-main > .mmocc-contact-card {
  width: 390px !important;
  max-width: 390px !important;
}

/* contact rows compact */
.mmocc-custom-footer .mmocc-contact-card .mmocc-contact-row,
.site-footer .mmocc-custom-footer .mmocc-contact-card .mmocc-contact-row {
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

.mmocc-custom-footer .mmocc-contact-card .mmocc-contact-row:last-child,
.site-footer .mmocc-custom-footer .mmocc-contact-card .mmocc-contact-row:last-child {
  margin-bottom: 0 !important;
}

/* QR card balance */
.mmocc-custom-footer .mmocc-footer-qr,
.site-footer .mmocc-custom-footer .mmocc-footer-qr {
  margin-top: 18px !important;
}

/* 4K / 2K override: previous flex-start ကို ပယ်ပြီး card height တူအောင် ထိန်း */
@media (min-width: 1500px) {
  .mmocc-custom-footer .mmocc-footer-main,
  .site-footer .mmocc-custom-footer .mmocc-footer-main {
    align-items: stretch !important;
    grid-template-columns: 300px 390px !important;
    gap: 52px !important;
  }

  .mmocc-custom-footer .mmocc-footer-main > .mmocc-footer-card,
  .site-footer .mmocc-custom-footer .mmocc-footer-main > .mmocc-footer-card,
  .mmocc-custom-footer .mmocc-footer-main > .mmocc-contact-card,
  .site-footer .mmocc-custom-footer .mmocc-footer-main > .mmocc-contact-card {
    height: 372px !important;
    min-height: 372px !important;
    max-height: 372px !important;
  }
}

/* true 4K မှာလည်း မပြောင်းအောင် */
@media (min-width: 2400px) {
  .mmocc-custom-footer .mmocc-footer-main > .mmocc-footer-card,
  .site-footer .mmocc-custom-footer .mmocc-footer-main > .mmocc-footer-card,
  .mmocc-custom-footer .mmocc-footer-main > .mmocc-contact-card,
  .site-footer .mmocc-custom-footer .mmocc-footer-main > .mmocc-contact-card {
    height: 385px !important;
    min-height: 385px !important;
    max-height: 385px !important;
  }
}

/* mobile မှာတော့ auto ပြန်ထား */
@media (max-width: 767px) {
  .mmocc-custom-footer .mmocc-footer-main,
  .site-footer .mmocc-custom-footer .mmocc-footer-main {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    max-width: 92% !important;
  }

  .mmocc-custom-footer .mmocc-footer-main > .mmocc-footer-card,
  .site-footer .mmocc-custom-footer .mmocc-footer-main > .mmocc-footer-card,
  .mmocc-custom-footer .mmocc-footer-main > .mmocc-contact-card,
  .site-footer .mmocc-custom-footer .mmocc-footer-main > .mmocc-contact-card {
    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}
/* =========================================================
   MMOCC - Footer 2 cards side by side FORCE FINAL
   Put at VERY END of style.css
   ========================================================= */

/* Desktop / Laptop / 2K / 4K */
@media (min-width: 1025px) {
  .site-footer .mmocc-custom-footer .mmocc-footer-main,
  .mmocc-custom-footer .mmocc-footer-main {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

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

    gap: 52px !important;

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

    margin: 0 auto !important;
    padding: 54px 20px 38px !important;

    box-sizing: border-box !important;
  }

  /* logo side မလိုရင် ဖျောက် */
  .site-footer .mmocc-custom-footer .mmocc-footer-logo-side,
  .mmocc-custom-footer .mmocc-footer-logo-side {
    display: none !important;
  }

  /* left card */
  .site-footer .mmocc-custom-footer .mmocc-footer-main > .mmocc-footer-card:not(.mmocc-contact-card),
  .mmocc-custom-footer .mmocc-footer-main > .mmocc-footer-card:not(.mmocc-contact-card) {
    flex: 0 0 300px !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
  }

  /* right card */
  .site-footer .mmocc-custom-footer .mmocc-footer-main > .mmocc-contact-card,
  .mmocc-custom-footer .mmocc-footer-main > .mmocc-contact-card {
    flex: 0 0 390px !important;
    width: 390px !important;
    min-width: 390px !important;
    max-width: 390px !important;
  }

  /* both cards same height */
  .site-footer .mmocc-custom-footer .mmocc-footer-main > .mmocc-footer-card,
  .mmocc-custom-footer .mmocc-footer-main > .mmocc-footer-card {
    height: 372px !important;
    min-height: 372px !important;
    max-height: 372px !important;

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

    padding: 30px 34px 34px !important;
    margin: 0 !important;

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

  /* contact row compact */
  .site-footer .mmocc-custom-footer .mmocc-contact-row,
  .mmocc-custom-footer .mmocc-contact-row {
    margin-bottom: 14px !important;
  }

  .site-footer .mmocc-custom-footer .mmocc-contact-row:last-child,
  .mmocc-custom-footer .mmocc-contact-row:last-child {
    margin-bottom: 0 !important;
  }
}

/* 4K မှာလည်း side-by-side ပဲထား */
@media (min-width: 2400px) {
  .site-footer .mmocc-custom-footer .mmocc-footer-main,
  .mmocc-custom-footer .mmocc-footer-main {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    max-width: 840px !important;
    gap: 52px !important;
  }

  .site-footer .mmocc-custom-footer .mmocc-footer-main > .mmocc-footer-card,
  .mmocc-custom-footer .mmocc-footer-main > .mmocc-footer-card {
    height: 385px !important;
    min-height: 385px !important;
    max-height: 385px !important;
  }
}

/* mobile မှာပဲ အပေါ်အောက်ဖြစ်ခွင့်ပြု */
@media (max-width: 767px) {
  .site-footer .mmocc-custom-footer .mmocc-footer-main,
  .mmocc-custom-footer .mmocc-footer-main {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;

    width: 100% !important;
    max-width: 92% !important;
    gap: 22px !important;

    margin: 0 auto !important;
    padding: 36px 0 28px !important;
  }

  .site-footer .mmocc-custom-footer .mmocc-footer-main > .mmocc-footer-card,
  .mmocc-custom-footer .mmocc-footer-main > .mmocc-footer-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

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

    overflow: visible !important;
  }
}
/* =========================================================
   MMOCC - Footer cards gap closer FINAL
   Put at VERY END of style.css
   ========================================================= */

@media (min-width: 1025px) {
  .site-footer .mmocc-custom-footer .mmocc-footer-main,
  .mmocc-custom-footer .mmocc-footer-main {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

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

    /* card ၂ ခုကြား အကွာအဝေး လျှော့ */
    gap: 28px !important;

    /* 300 + 390 + 28 = 718, padding ပါထည့်ပြီး compact */
    width: 100% !important;
    max-width: 760px !important;

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

    padding-left: 20px !important;
    padding-right: 20px !important;

    box-sizing: border-box !important;
  }

  .site-footer .mmocc-custom-footer .mmocc-footer-main > .mmocc-footer-card:not(.mmocc-contact-card),
  .mmocc-custom-footer .mmocc-footer-main > .mmocc-footer-card:not(.mmocc-contact-card) {
    flex: 0 0 300px !important;
    width: 300px !important;
    max-width: 300px !important;
  }

  .site-footer .mmocc-custom-footer .mmocc-footer-main > .mmocc-contact-card,
  .mmocc-custom-footer .mmocc-footer-main > .mmocc-contact-card {
    flex: 0 0 390px !important;
    width: 390px !important;
    max-width: 390px !important;
  }
}

/* 2K / 4K မှာလည်း gap မကြီးသွားအောင် ထပ် force */
@media (min-width: 1800px) {
  .site-footer .mmocc-custom-footer .mmocc-footer-main,
  .mmocc-custom-footer .mmocc-footer-main {
    gap: 30px !important;
    max-width: 770px !important;
  }
}

/* =========================================================
   MMOCC - Remote / Key Capabilities bar same as Featured Projects
   Put at VERY END of style.css
   ========================================================= */

/* Remote Work Business Solutions title */
body.home #free-hand-text-section h3 {
  position: relative !important;
  display: inline-block !important;

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

  font-family: "Oswald", "Roboto Condensed", Arial, sans-serif !important;
  font-size: 28px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  color: #102a46 !important;
}

/* Featured Projects လို fade bar */
body.home #free-hand-text-section h3::after {
  content: "" !important;

  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;

  width: 96px !important;
  height: 2px !important;

  transform: translateX(-50%) !important;

  background: linear-gradient(
    90deg,
    rgba(248, 147, 31, 0) 0%,
    rgba(248, 147, 31, 0.18) 18%,
    #f8931f 50%,
    rgba(248, 147, 31, 0.18) 82%,
    rgba(248, 147, 31, 0) 100%
  ) !important;

  border-radius: 999px !important;
  box-shadow: none !important;
}


/* Key Capabilities title */
body.home #free-hand-text-section p:has(+ .mmocc-remote-feature-list),
body.home #free-hand-text-section .mmocc-key-title {
  position: relative !important;
  display: inline-block !important;

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

  font-family: "Oswald", "Roboto Condensed", Arial, sans-serif !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  color: #102a46 !important;
}

/* Key Capabilities bar */
body.home #free-hand-text-section p:has(+ .mmocc-remote-feature-list)::after,
body.home #free-hand-text-section .mmocc-key-title::after {
  content: "" !important;

  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;

  width: 96px !important;
  height: 2px !important;

  transform: translateX(-50%) !important;

  background: linear-gradient(
    90deg,
    rgba(248, 147, 31, 0) 0%,
    rgba(248, 147, 31, 0.18) 18%,
    #f8931f 50%,
    rgba(248, 147, 31, 0.18) 82%,
    rgba(248, 147, 31, 0) 100%
  ) !important;

  border-radius: 999px !important;
  box-shadow: none !important;
}


/* old bar effect တွေ override */
body.home #free-hand-text-section h3::before,
body.home #free-hand-text-section p:has(+ .mmocc-remote-feature-list)::before,
body.home #free-hand-text-section .mmocc-key-title::before {
  content: none !important;
  display: none !important;
}


/* mobile */
@media (max-width: 767px) {
  body.home #free-hand-text-section h3 {
    font-size: 24px !important;
    padding-bottom: 14px !important;
  }

  body.home #free-hand-text-section p:has(+ .mmocc-remote-feature-list),
  body.home #free-hand-text-section .mmocc-key-title {
    font-size: 20px !important;
    padding-bottom: 12px !important;
  }

  body.home #free-hand-text-section h3::after,
  body.home #free-hand-text-section p:has(+ .mmocc-remote-feature-list)::after,
  body.home #free-hand-text-section .mmocc-key-title::after {
    width: 86px !important;
    height: 2px !important;
  }
}
/* =========================================================
   MMOCC - Latest News entry content text style
   Put at VERY END of style.css
   ========================================================= */

body.home #cl_blog .entry-content,
body.home #cl_blog .entry-content p {
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #5b4a3c !important;
  font-weight: 400 !important;
  margin: 0 !important;
}

/* 4K / 2K screen */
@media (min-width: 1500px) {
  body.home #cl_blog .entry-content,
  body.home #cl_blog .entry-content p {
    font-size: 18px !important;
    line-height: 1.75 !important;
  }
}
/* =========================================================
   MMOCC - Remote Work READ MORE hover force for 2K / 4K FINAL
   Put at VERY END of style.css
   ========================================================= */

/* normal state */
body.home section#free-hand-text-section a.btn.btn-primary,
body.home #free-hand-text-section a.btn.btn-primary,
body.home section#free-hand-text-section .btn.btn-primary,
body.home #free-hand-text-section .btn.btn-primary {
  position: relative !important;
  z-index: 20 !important;

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

  pointer-events: auto !important;
  cursor: pointer !important;

  min-width: 128px !important;
  height: 48px !important;
  min-height: 48px !important;

  padding: 0 28px !important;
  margin-top: 14px !important;

  color: #ffffff !important;
  background: linear-gradient(135deg, #d79a45 0%, #c88935 100%) !important;

  border: 0 !important;
  border-radius: 7px !important;

  font-family: "Oswald", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;

  box-shadow: none !important;

  transform: translateY(0) !important;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease !important;
}

/* pseudo overlay တွေကြောင့် hover မမြင်ရတာကို ဖျောက် */
body.home section#free-hand-text-section a.btn.btn-primary::before,
body.home section#free-hand-text-section a.btn.btn-primary::after,
body.home #free-hand-text-section a.btn.btn-primary::before,
body.home #free-hand-text-section a.btn.btn-primary::after {
  content: none !important;
  display: none !important;
}

/* hover / focus state */
body.home section#free-hand-text-section a.btn.btn-primary:hover,
body.home section#free-hand-text-section a.btn.btn-primary:focus,
body.home section#free-hand-text-section a.btn.btn-primary:active,
body.home #free-hand-text-section a.btn.btn-primary:hover,
body.home #free-hand-text-section a.btn.btn-primary:focus,
body.home #free-hand-text-section a.btn.btn-primary:active,
body.home section#free-hand-text-section .btn.btn-primary:hover,
body.home #free-hand-text-section .btn.btn-primary:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, #f8931f 0%, #a85f22 100%) !important;

  transform: translateY(-3px) !important;
  filter: brightness(1.04) !important;

  box-shadow:
    0 12px 24px rgba(168, 95, 34, 0.24),
    0 4px 10px rgba(168, 95, 34, 0.12) !important;
}

/* 2K / 4K screen မှာလည်း hover ကို lock */
@media (min-width: 1500px) {
  body.home section#free-hand-text-section a.btn.btn-primary,
  body.home #free-hand-text-section a.btn.btn-primary {
    min-width: 128px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 28px !important;
    background: linear-gradient(135deg, #d79a45 0%, #c88935 100%) !important;
  }

  body.home section#free-hand-text-section a.btn.btn-primary:hover,
  body.home section#free-hand-text-section a.btn.btn-primary:focus,
  body.home #free-hand-text-section a.btn.btn-primary:hover,
  body.home #free-hand-text-section a.btn.btn-primary:focus {
    background: linear-gradient(135deg, #f8931f 0%, #a85f22 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow:
      0 12px 24px rgba(168, 95, 34, 0.24),
      0 4px 10px rgba(168, 95, 34, 0.12) !important;
  }
}

/* =========================================================
   MMOCC - 2K Myanmar navbar overlap fix FINAL
   Put at VERY END of style.css
   ========================================================= */

@media (min-width: 1025px) and (max-width: 1920px) {

  /* Header 3 columns ကို 2K မှာ nav အတွက် space ပိုပေး */
  html[lang^="my"] header.cons-agency .header-middle-inner,
  body.translatepress-my_MM header.cons-agency .header-middle-inner,
  body.trp-language-my_MM header.cons-agency .header-middle-inner {
    grid-template-columns:
      minmax(330px, 430px)
      minmax(0, 1fr)
      minmax(190px, 240px) !important;

    column-gap: 18px !important;
  }

  /* Logo area နည်းနည်းကျဉ်း */
  html[lang^="my"] header.cons-agency .site-branding,
  body.translatepress-my_MM header.cons-agency .site-branding,
  body.trp-language-my_MM header.cons-agency .site-branding {
    min-width: 0 !important;
    max-width: 430px !important;
  }

  html[lang^="my"] header.cons-agency .brandinglogo-wrap .custom-logo-link img.custom-logo,
  html[lang^="my"] header.cons-agency .site-branding img.custom-logo,
  body.translatepress-my_MM header.cons-agency .brandinglogo-wrap .custom-logo-link img.custom-logo,
  body.translatepress-my_MM header.cons-agency .site-branding img.custom-logo,
  body.trp-language-my_MM header.cons-agency .brandinglogo-wrap .custom-logo-link img.custom-logo,
  body.trp-language-my_MM header.cons-agency .site-branding img.custom-logo {
    height: 38px !important;
    max-height: 38px !important;
  }

  html[lang^="my"] header.cons-agency .mmocc-anniversary-badge img,
  body.translatepress-my_MM header.cons-agency .mmocc-anniversary-badge img,
  body.trp-language-my_MM header.cons-agency .mmocc-anniversary-badge img {
    height: 36px !important;
    max-height: 36px !important;
  }

  /* Nav area */
  html[lang^="my"] header.cons-agency .nav-menu,
  body.translatepress-my_MM header.cons-agency .nav-menu,
  body.trp-language-my_MM header.cons-agency .nav-menu {
    min-width: 0 !important;
    width: 100% !important;
  }

  html[lang^="my"] header.cons-agency .box-header-nav,
  body.translatepress-my_MM header.cons-agency .box-header-nav,
  body.trp-language-my_MM header.cons-agency .box-header-nav {
    width: 100% !important;
    min-width: 0 !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 {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;

    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Myanmar menu text: one line + smaller */
  html[lang^="my"] header.cons-agency .box-header-nav .main-menu > .menu-item,
  body.translatepress-my_MM header.cons-agency .box-header-nav .main-menu > .menu-item,
  body.trp-language-my_MM header.cons-agency .box-header-nav .main-menu > .menu-item {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }

  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: 8.6px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;

    padding: 8px 4px !important;

    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    text-wrap: nowrap !important;

    min-width: 0 !important;
    max-width: none !important;
  }

  /* Contact button Myanmar text */
  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: 8.6px !important;
    line-height: 1.2 !important;
    padding: 8px 12px !important;
    min-height: 32px !important;
  }

  /* Dropdown arrow smaller */
  html[lang^="my"] header.cons-agency .box-header-nav .main-menu > .menu-item-has-children > a::after,
  body.translatepress-my_MM header.cons-agency .box-header-nav .main-menu > .menu-item-has-children > a::after,
  body.trp-language-my_MM header.cons-agency .box-header-nav .main-menu > .menu-item-has-children > a::after {
    margin-left: 4px !important;
    border-left-width: 3px !important;
    border-right-width: 3px !important;
    border-top-width: 4px !important;
  }

  /* Language area နည်းနည်းကျဉ်း */
  html[lang^="my"] #mmocc-lang-slot,
  body.translatepress-my_MM #mmocc-lang-slot,
  body.trp-language-my_MM #mmocc-lang-slot {
    margin-left: 10px !important;
    min-width: 0 !important;
  }

  html[lang^="my"] #mmocc-lang-slot > #trp-floater-ls.mmocc-lang-inside-nav #trp-floater-ls-language-list,
  body.translatepress-my_MM #mmocc-lang-slot > #trp-floater-ls.mmocc-lang-inside-nav #trp-floater-ls-language-list,
  body.trp-language-my_MM #mmocc-lang-slot > #trp-floater-ls.mmocc-lang-inside-nav #trp-floater-ls-language-list {
    gap: 7px !important;
  }
}