@media (min-width: 992px) {
    .work-detail-page-related-project-inner-main {
      display: flex;
      align-items: stretch;
      gap: 25px;
      min-height: 1px;
    }
    .work-detail-page-related-project-inner-left,
    .work-detail-page-related-project-inner-right {
      flex-basis: 0;
      flex-grow: 1;
      flex-shrink: 1;
      transition: flex-basis 1s cubic-bezier(0.4, 0, 0.2, 1);
      height: auto;
      min-height: 370px;
      position: relative;
    }
    .work-detail-page-related-project-inner-main .work-detail-page-related-project-inner-left:hover,
    .work-detail-page-related-project-inner-main .work-detail-page-related-project-inner-right:hover {
      flex-basis: 600px;
    }
  }
  @media (min-width: 992px) {
    .work-detail-page-related-project-inner-video-bottom,
    .work-detail-page-related-project-inner-video-top {
      position: static;
      left: auto;
      right: auto;
      top: auto;
      bottom: auto;
      width: auto;
    }
  }
  @media (min-width: 992px) {
    .work-detail-page-related-project-inner-main {
      overflow: hidden;
    }
  }
  @media (min-width: 992px) {
    .work-detail-page-related-project-inner-left,
    .work-detail-page-related-project-inner-right {
      min-height: 370px;
    }
  }
  @media (max-width: 769px) {
  .work-detail-page-related-project-inner-main.aos-init.aos-animate:last-child {
    margin-bottom: 58px;
  }
/* Ensure image fills the full height of the <a> in related project blocks */
.work-detail-page-related-project-inner-main a {
  display: block;
  position: relative;
  height: 100%;
}

.work-detail-page-related-project-inner-main a > div:first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.work-detail-page-related-project-inner-main a > div:first-child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
  }
@font-face {
  font-family: "CenturySchoolbook-Regular";
  src: url('../fonts/font.woff2') format('woff2'), url('../fonts/font.woff') format('woff');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Exposure-[-10]";
  src: url('../fonts/205TF-Exposure-[-10].woff2') format('woff2'), url('../fonts/205TF-Exposure-[-10].woff') format('woff');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Exposure-[-10] italic";
  src: url('../fonts/205TF-Exposure-[-10]Italic.woff2') format('woff2'), url('../fonts/205TF-Exposure-[-10]Italic.woff') format('woff');
  font-weight: 400;
  font-display: swap;
  font-style: italic;
}

@keyframes marquee-scroll {
  0% {
    transform: translate(0);
    -webkit-transform: translateX(0%);
  }

  100% {
    transform: translate(-100%);
    -webkit-transform: translateX(-100%);
  }

}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  margin: 0 !important;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  padding: 0;
  font-size: 1.5rem;
  letter-spacing: 0.06rem;
  font-family: "Exposure-[-10]";
  overflow: unset;
}

html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  overflow-x: unset;
}

ul, ol {
  list-style: none;
}

img, picture {
  display: block;
  max-width: 100%;
  height: auto;
}

.inr-page-ct-logo > a > img {
  max-width: none;
}

a {
  text-decoration: none;
  color: inherit;
}

button, input, select, textarea {
  font: inherit;
  border: none;
  background: none;
  outline: none;
}

*:focus, *:focus-visible, *:focus-within {
  outline: none !important;
  box-shadow: none !important;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

body.holding-page-page {
  background: #000;
}

.hidden {
  display: none;
}

body.holding-page-page {
  overflow: hidden;
}

/*.site-header {
    display: none;
}

.site-footer {
    display: none;
}*/
.mox-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: auto;
  color: white;  /* font-family: 'Helvetica Neue', Arial, sans-serif; */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.mox-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(359.77deg, rgba(255, 255, 255, 0) 0.2%, #303030 99.8%);
  background-blend-mode: multiply;
  z-index: 1;
  pointer-events: none;
  opacity: 0.6;
}

.mox-overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.mox-mission {
  max-width: 567px;
  font-size: 19px;
  line-height: 1.15;
  margin-bottom: 40px;
  font-family: "Exposure-[-10]";
  text-indent: 40px;
  letter-spacing: -0.3px;
  margin-left: 10px;
  color: rgba(255, 255, 255, 0.9);
}

.mox-mission p {
  margin-top: 0;
}

.mox-info {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 14px;
  width: 100%;
  justify-content: flex-end;
}

.mox-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.mox-info>div {
  max-width: 215px;
  width: 100%;
}

.icon-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.mox-info h4 {
  text-transform: uppercase;
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: -0.24px;
  font-weight: 400;
  font-family: "Exposure-[-10]";
  padding: 0 5px;
  position: relative;
  display: inline-block;
}
.mox-info h4::before,
.mox-info h4::after {
  content: '(';
  position: absolute;
  left: 0;
}
.mox-info h4::after {
  content: ')';
  left: auto;
  right: 0;
}
.mox-clients ul li span {
  text-transform: uppercase;
}

.mox-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mox-services .services-link {
  justify-content: space-between;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  line-height: 1.23;
  font-family: 'Exposure-[-10]';
}

.mox-info ul li {
  margin-bottom: 0px;
  line-height: 1;
}

.mox-info ul li a, .mox-info ul li span {

  /* font-family: "CenturySchoolbook-Regular"; */
  font-weight: 400;
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: -0.02px;
}

.mox-info a {
  color: #fff;
  text-decoration: none;
}

.icons {
  width: 15px;
  height: 15px;
  background: #1A1A1A;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
}

.icon-title-grp {
  display: flex;
  gap: 14px;
  align-items: center;
}

.social-icons svg {
  width: 12px;
  height: 12px;
  fill: #fff;
}

.mox-services .services-link {
  display: flex;
  gap: 30px;
}

.mox-social {
  margin-top: 26px;
}

.mox-enquiries {
  margin-top: 29px;
}

.mox-enquiries .icon-title {
  text-transform: uppercase;
  letter-spacing: -0.5px;
  font-family: "Exposure-[-10]";
}

.mox-icon svg,
.mox-icon img {
  width: 100%;
  fill: #fff;
  height: auto;
  margin-bottom: 0;
  display: block;
}

.max-icon svg path {
  fill: #fff;
}

.max-icon+p {
  font-weight: 400;
  font-size: 19px;
  line-height: 23px;
  letter-spacing: -0.32px;
  margin: 0;
}

.mox-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.max-inner {
  display: flex;
  flex-flow: column;
  padding: 20px;
  height: 100vh;
}

.mox-content {
  padding-bottom: 80px;
}

.desktop-img {
  display: block;
}

.mobile-img {
  display: none;
}

.icon-svg-item svg path {
  fill: #fff;
}

.mox-right-icon {
  margin-top: 25px;
}

.mox-right-icon .icon-svg-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.mox-hero .mobile-version {
  display: none;
}

/*.mox-services {
  max-width: 230px !important;
  width: 100% !important;
} */
.svg-heading {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  margin-bottom: -3px;
}

.svg-heading .top-left-block span {
  font-family: 'Exposure-[-10]';
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0;
  text-align: right;
  display: block;
}

body.holding-page-page .intro-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background-color: black;  /* or white if you want white blank screen */
  z-index: 9999;
  pointer-events: none;
  transition: all 0.2s ease;
  display: none;
}

body.holding-page-page .footer-main {
  display: none;
}

html:has(body.holding-page-page) {
  overflow: hidden;
}

body.loading .mobile-header, body.loading .mox-mission, body.loading .mox-clients, body.loading .mox-coverage, body.loading .mox-services, body.loading .mox-icon, body.loading .description-section, body.loading .menu-column, body.loading .logo-section {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Main Topbar Banner Start */
.main-topbar-banner {
  position: relative;
  z-index: 120;
  margin-top: -79px;
}

.main-topbar-banner .desktop-img, .main-topbar-banner .mobile-img {
  width: 100%;
  object-fit: cover;
  display: block;
}

.desk-btm-mox-icon {
  padding: 20px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
  bottom: 0 !important;
}

.desk-btm-mox-icon.animate {
  transform: translateY(0);
  opacity: 1;
}

.desk-btm-mox-icon svg {
  width: 100%;
  fill: #fff;
  height: auto;
  margin-bottom: 0;
  display: block;
}

.desk-btm-text-row * {
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;  /* color: #ffffff; */
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 0;
}

.desk-btm-text-row a:hover {
  text-decoration: underline;
  text-underline-offset: 1px;
}

.info-page .inr-pg-center-logo .inr-ct-page-nm:hover {
  text-decoration: none !important;
}

@media (min-width:767px) {

  .desk-btm-text-row span {
    width: 33.33%;
    flex: 0 0 33.33%;
  }

  .desk-btm-text-row .desk-btm-lt-txt {
    text-align: left;
  }

  .desk-btm-text-row .desk-btm-ct-txt {
    text-align: center;
  }

  .desk-btm-text-row .desk-btm-rt-txt {
    text-align: end;
  }

}

.desk-btm-text-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.main-topbar-banner, .main-topbar-banner .desktop-img, .main-topbar-banner .mobile-img {
  max-height: 100vh;
}

.main-topbar-banner .mobile-img {
  display: none;
}

@media (max-width:767px) {
    .desktop-img {
        display: none;
    }
    .mobile-img {
        display: block;
    }   
  .desk-btm-lt-txt {
    display: none;
  }

  .desk-btm-text-row {
    justify-content: center;
  }

  .desk-btm-rt-txt {
    display: none;
  }

  /* related project section css start */
  .related-project-title-and-all-work-btn {
    margin-bottom: 15px;
  }

  .related-project-title-and-all-work-btn h3 {
    font-size: 28px;
    line-height: 50px;
    letter-spacing: -0.03em;
  }

  .work-detail-page-related-project-inner-main {
    flex-flow: column wrap;
  }

  .work-detail-page-related-project-inner-right .work-detail-page-related-project-inner-right-video, .work-detail-page-related-project-inner-left .work-detail-page-related-project-inner-video, .work-detail-page-related-project-inner-right .work-detail-page-related-project-inner-video {
    opacity: 1;
  }

  .work-detail-page-related-project-inner-video-bottom {
    left: 15px;
    flex-flow: column wrap;
    align-items: flex-start;
    gap: 10px;
    width: calc(100% - 30px);
  }

  .work-detail-page-related-project-inner-video-bottom .work-detail-page-related-project-inner-video-bottom-right>div {
    flex: 1;
  }

  .work-detail-page-related-project-inner-video-bottom-right ul {
    flex-wrap: wrap;
    gap: 3px 5px;
  }

  .work-detail-page-related-project-inner-left, .work-detail-page-related-project-inner-right {
    min-height: 400px;
  }

  /* related project section css end */
}

/*.home-page-page .main-topbar-banner {
  z-index: 100;
}*/

/* Main Topbar Banner End */

/* simple-video-section css start */
.content-video-section {
  padding: 30px 22px 0;
}

.content-video-section .section-content p {
  font-family: "Exposure-[-10]";
  font-weight: 400;
  font-size: 50px;
  line-height: 1.04;
  letter-spacing: -1.5px;
  text-align: center;
  color: #000;
  max-width: 1560px;
  margin: 0 auto;
}

.mox-icon {
  margin-top: auto;
}

.content-video-section .sc-video-block {
  max-width: 1155px;
  width: 100%;
  margin: 0 auto;
  backdrop-filter: blur(4px);
  opacity: 0.9;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 120px;
}

.content-video-section .sc-video-block video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: inherit;  /* -webkit-filter: blur(7px);
  -moz-filter: blur(7px);
  -o-filter: blur(7px);
  -ms-filter: blur(7px);
  filter: blur(7px); */
}

.content-video-section .sc-video-block .video-block {
  position: relative;
  max-width: 100%;
  margin: auto;
  height: 90vh;
}

.content-video-section .sc-video-block .video-block .poster-image {
  opacity: 0;
  width: 100%;
  height: auto;
}

.content-video-section .sc-video-block .video-item {
  aspect-ratio: 16 / 9;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.content-video-section .video-blocks-item .hp-poster-image img {
  width: 100%;
}

.content-video-section .video-list-item {
  margin-top: 30px;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

.content-video-section .video-blocks-item .list-video-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
  display: none;
}

.content-video-section .video-blocks-item {
  position: relative;
  height: 90vh;
}

.content-video-section .video-blocks-item .list-video-item {
  aspect-ratio: 16/9;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.content-video-section .video-blocks-item .list-video-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.content-video-section .video-blocks-item .hp-poster-image {
  width: 100%;
  height: auto;
  opacity: 0;
}

.content-video-section .video-blocks-item .list-video-item video, .content-video-section .video-blocks-item .list-video-item iframe {
  width: 100%;
  max-width: 100%;
}

/* Vimeo cover-wrap inside the content-video-section containers */
.content-video-section .video-item .vimeo-cover-wrap,
.content-video-section .list-video-item .vimeo-cover-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}

/* Iframes ignore object-fit, so oversized + centre to simulate cover */
.content-video-section .video-blocks-item .vimeo-cover-wrap iframe,
.content-video-section .sc-video-block .vimeo-cover-wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  max-width: none;
  aspect-ratio: 16 / 9;
  border: 0;
  pointer-events: none;
}

/* Non-wrapped iframes (legacy fallback) */
.content-video-section .video-blocks-item .list-video-item > iframe {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.content-video-section .video-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  width: 100%;
  padding: 0 24px 0;
  z-index: 2;
}

.content-video-section .video-overlay-ctn {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.content-video-section .vd-overlay-header {
  margin-right: 62px;
  position: relative;
}

.content-video-section .video-overlay {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (min-width:992px) {
  .content-video-section .vd-overlay-header {
    width: 39.867%;
    flex: 0 0 39.867%;
    margin: 0;
  }

}

.content-video-section .vd-overlay-header .sup-head {
  font-family: "Exposure[-10]";
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.03px;
  position: absolute;
  right: -22px;
  top: -4px;
  color: #fff;
}

.content-video-section .vd-overlay-header h2 {
  font-family: "Exposure-[-10]";
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.03px;
  color: #fff;
  margin: 0;
  position: relative;
  width: fit-content;
}

.content-video-section .vd-overlay-subheader {
  margin-right: 10px;
  align-self: flex-start;
}

@media (min-width:992px) {
  .content-video-section .vd-overlay-subheader {
    width: 16.66666667%;
    flex: 0 0 16.66666667%;
    margin-right: 0;
  }

}

@media (min-width:992px) {
  .content-video-section .vd-overlay-list {
    width: 35.43%;
    flex: 0 0 35.43%;
  }

}

@media (min-width:992px) {
  .content-video-section .video-list-item .vd-overlay-btn {
    width: 8.33%;
    flex: 0 0 8.33%;
  }

}

.content-video-section .vd-overlay-subheader .subheading-label, .content-video-section .vd-overlay-list .list-label {
  font-family: "Exposure-[-10]";
  font-weight: 400;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.03px;
  color: #fff;
  display: block;
}

.content-video-section .overlay-scope-list, .content-video-section .vd-client-list {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 3px;
  margin: -6px 0 0;
}

.content-video-section .vd-client-list .vd-client-item, .content-video-section .overlay-scope-list .scope-list-item {
  font-family: "Exposure-[-10]";
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.03px;
  color: #fff;
}

.content-video-section .overlay-scope-list .scope-list-item {
  text-transform: capitalize;
}

.vd-overlay-link svg path {
  stroke: #fff;
}

.vd-overlay-link {
  display: flex;
  height: 30px;
  width: 30px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 60px;
  transition: all 0.2s ease;
}

.vd-overlay-link:hover {
  background: rgba(255, 255, 255, 0.7);
}

.content-video-section .overlay-scope-list .scope-list-item:last-child span {
  display: none;
}

.sc-video-block.trigger-video-animation {
  position: sticky !important;  /* top: 80px; */
  top: 10px;
}

/* simple-video-section css end */

/* custom video section css start */
.video-bg-image-main {
  position: relative;
  overflow: hidden;
  margin-bottom: 120px;
}

.video-bg-image-main .background-main {
  position: relative;
}

.video-bg-image-main .background-main img {
  width: 100%;
  object-fit: cover;
  height: auto;
}

.video-bg-image-main .bg-image-main.bg-poster-img {
  width: 100%;
  height: auto;
  opacity: 0;
}

.video-bg-image-main .bg-video-main {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.video-bg-image-main .bg-video-main .vimeo-cover-wrap {
  width: 100%;
  height: 100%;
}

.video-bg-image-main .bg-video-main .video-item {
  width: 100%;
  height: 100%;
}

.video-bg-image-main .bg-video-main video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-bg-image-main .overlay-marquee.top-marquee {
  top: -20.25px;
  position: absolute;
}

.video-bg-image-main .overlay-marquee.middle-marquee {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.video-bg-image-main .overlay-marquee.bottom-marquee {
  position: absolute;
  bottom: -20px;
}

.video-bg-image-main .overlay-marquee {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.video-bg-image-main .overlay-marquee-main {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  animation: marquee-scroll 45s linear infinite;
}

.video-bg-image-main .overlay-marquee-item {
  display: inline-flex;
  color: #fff;
  white-space: nowrap;
  margin: 0 250px;
  align-items: center;
}

.video-bg-image-main .overlay-marquee-item>* {
  white-space: nowrap;
  font-weight: 400;
  font-size: 48.85px;
  line-height: 40.46px;
  letter-spacing: 0.03px;
  text-align: center;
}

.video-bg-image-main .overlay-marquee-item .middle-marquee-elm {
  white-space: normal !important;
  font-weight: 400;
  font-size: 12.08px;
  line-height: 12.39px;
  letter-spacing: 0.03px;
  text-align: center;
  text-transform: uppercase;
}

.video-bg-image-main .video-control {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 999;
  transform: translate(-50%, -50%);
  height: 44px;
  width: 44px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 40px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.video-bg-image-main .video-control:hover {
  background: rgba(0, 0, 0, 0.75);
}

.video-bg-image-main .video-control .control-btn {
  height: 20px;
  width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-bg-image-main .video-control svg {
  height: 100%;
  width: 100%;
  color: #fff;
}

.video-bg-image-main .video-control svg path {
  fill: #fff;
}

.video-bg-image-main .video-control .control-btn.hidden {
  display: none;
}

/* custom video section css end */

/* what we do section css start */
.what-we-do-section-main {
  padding: 100px 20px 83px;  /* padding: 144px 20px 83px; */
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}

.what-we-do-right {
  flex: 3;
  max-width: 50%;
  margin-top: 15px;
  padding-left: 7px;
}

.what-we-do-left {
  flex: 1;
  max-width: 50%;
}

.what-we-do-section-main p {
  max-width: 565px;
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.32px;
  color: #000000;
  text-indent: 30px;
}

.what-we-do-section-main h6 {
  font-weight: 400;
  font-size: 28px;
  line-height: 52px;
  letter-spacing: -0.03em;
  color: #000000;
}

.what-we-do-section-main .learn-more-btn {
  margin-top: 30px;
  transition: all 0.2s ease;
}

.learn-more-btn {
  display: inline-flex;
  align-items: center;
  padding: 6.5px 6px 6.5px 18.5px;
  border-radius: 60px;
  background: #f4f4f4;
  color: #000;
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.02em;
  gap: 10px;
  transition: all 0.3s;
  cursor: pointer;
}

.learn-more-btn:hover {
  opacity: 1;
  background: #000;
  color: #fff;
}

.all-species-welcome-tagline {
  font-size: 150px;
  font-weight: 500;
  color: #000;
  margin: 0;
  line-height: 124px;
  white-space: nowrap;
  letter-spacing: -0.04em;
  text-align: center;
}

.what-we-do-section-main .learn-more-btn:hover {
  background: #000;
  opacity: 1;
}

.what-we-do-section-main .learn-more-btn:hover span {
  color: #fff;
}

/* what we do section ends */

/* Services section starts  */
.species-section {
  display: flex;
  align-items: flex-start;
  padding: 104px 20px 120px;
}

.species-services-left {
  flex: 1;
  max-width: 50%;
}

.trademark {
  font-size: 46.5px;
  vertical-align: super;
  line-height: 38px;
  letter-spacing: -0.04em;
  position: relative;
  top: -40px;
  right: 10px;
}

.species-services-left p {
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.03em;
  color: #000000;
  text-transform: uppercase;
}

.species-services-list {
  flex: 3;
  max-width: 50%;
  padding-left: 6px;
}

.species-services-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 565px;
}

.species-services-list li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.03em;
  color: #000000;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: color 0.3s ease;
  overflow: hidden;
}

.species-services-list li .number {
  font-weight: 400;
}

.species-services-list li .title {
  flex: 1;
  margin-left: 18px;
}

.species-services-list li .arrow {
  width: 15px;
  height: 15px;
  background-color: #F4F4F4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.services-list-link span.animated-text {
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: -0.24px;
  white-space: nowrap;
  position: absolute;
  top: 13px;
  left: -90px;
  padding: 0 6px 0 22px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 22px);
  transition: top 0.5s ease;
}

.species-services-list li .services-list-link .arrow {
  position: relative;
  transition: all 0.5s ease;
}

.species-services-list li .services-list-link .arrow:hover .animated-text {
  top: -3px;
}

.species-services-list li .services-list-link .arrow:hover {
  background: #000;
}

.species-services-list li .services-list-link .arrow:hover svg path {
  stroke: #fff;
}

/* Services section ends */

/* Brand slider starts */
.logoSwiper {
  padding: 40px 0;
  width: 100%;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-box {
  background-color: #f6f6f6;
  border-radius: 7px;
  min-width: 170px;
  width: 100%;
  height: 170px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}

.logo-box img {
  max-width: 85px;
  max-height: 85px;
  object-fit: contain;
}

.home-page-partenr-slider-main {
  overflow-x: hidden;
  margin-bottom: 122px;  /* margin-bottom: 175px; */
}

.home-page-partenr-slider-main .logoSwiper {
  overflow: visible;
  padding: 0 60px;
  box-sizing: border-box;
}

.work-detail-page-project-detail {
  margin-bottom: 90px !important;
}

/* Brand slider ends */

/* News section starts  */
.home-page-latest-news-section-wrapper {
  overflow-x: hidden;
}

.instagram-news p {
  font-weight: 400;
  font-size: 12px;
  line-height: 29.5px;
  letter-spacing: -0.02em;
  color: #000000;
  text-transform: uppercase;
}

.instagram-news {
  display: flex;
  align-items: center;
  gap: 5px;
}

.home-page-latest-news-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 25px 33px 25px;
}

.home-page-latest-news-section h6 {
  font-weight: 400;
  font-size: 28px;
  line-height: 20px;
  letter-spacing: -0.03em;
  color: #000000;
}

.home-page-latest-news-right {
  display: flex;
  align-items: center;
  justify-content: space-between;  /*min-width: 450px;*/
}

.all-news-btn p {
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: -0.02em;
  color: #000000;
}

.all-news-btn span {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f4f4;
  border-radius: 60px;
  width: 24px;
  height: 24px;
}

.all-news-btn:hover {
  opacity: 0.8;
}

.all-news-btn {
  display: flex;
  align-items: center;
  gap: 5px;
}

.home-page-news-slider {
  padding: 0 0 0 25px;
  margin-bottom: 120px;  /* margin-bottom: 170px; */
}

.home-page-news-slider .news-slider {
  overflow: visible;
}

.home-page-news-slider .swiper-slide .slide-text {
  max-width: 400px;
}

.home-page-news-slider .swiper-slide {
  max-width: fit-content;
  background-color: #f6f6f6;
  border-radius: 7px;
  padding: 23px;
  box-sizing: border-box;
  position: relative;
}

.home-page-news-slider .swiper-slide>a.slide-content:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}

.home-page-news-slider .slide-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.home-page-news-slider .slide-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  border-radius: 3px;
}

.home-page-news-slider .swiper-slide:not(.first-slide-content) .slide-image img {
  max-height: 300px;
}

.home-page-news-slider .news-headline {
  font-size: 19px;
  font-weight: 400;
  line-height: 22px;
  color: #000000;
  letter-spacing: 0;  /* margin-top: 16px; */
}

.home-page-news-slider .news-meta {
  font-size: 12px;
  line-height: 12px;
  color: #000000;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 7px;
}
.home-page-news-slider .news-date-label {
  position: relative;
  padding: 0 5px;
}
.home-page-news-slider .news-date-label::before {
  content: '(';
  position: absolute;
  left: 0;
}
.home-page-news-slider .news-date-label::after {
  content: ')';
  position: absolute;
  right: 0;
}

.home-page-news-slider .swiper-slide {
  min-height: 520px;
  display: unset;
}

.home-page-news-slider .first-slide-content {
  position: relative;
}

.home-page-news-slider .first-slide-content .slide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7px;
}

.home-page-news-slider .swiper-slide.first-slide-content {
  min-width: 690px !important;
}

/* .home-page-news-slider .slide-image {
max-width:400px;
} */
.home-page-news-slider .first-slide-content .slide-image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.home-page-news-slider .news-slide-bottom p {
  margin-top: 0;
}

.home-page-news-slider .news-slide-bottom a:hover {
  opacity: 0.8;
}

.home-page-news-slider .news-slide-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  bottom: 23px;
  width: calc(100% - 46px);
  z-index: 2;
}

.home-page-news-slider .first-slide-content h6 {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 28px;
  line-height: 32px;
  color: #ffffff;
  font-weight: 400;
  z-index: 2;
  letter-spacing: 0;
}

.home-page-news-slider .first-slide-content .news-slide-bottom .news-meta {
  color: #ffffff;
}

.news-slider {
  cursor: grab;
}

.news-slider:active {
  cursor: grabbing;
}

.home-page-news-slider .light-arrow-only {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 60px;
}

/* News section ends  */

/* work wih us section css start */
.work-with-us-section {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 35px 24px 110px;  /* padding: 35px 24px 62px; */

  /* padding: 35px 24px 125px; */
}

.work-with-us-section .work-with-us-left {
  max-width: 330px;
  width: 100%;
}

.work-with-us-section .work-with-us-right {
  max-width: 927px;
  width: 100%;
  margin-right: -10px;
}

.work-with-us-section h6 {
  font-size: 28px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.84px;
  color: #000000;
}

.work-with-us-section h4 {
  font-size: 50px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
  color: #000000;
}

/* work wih us section css end */

/* work culture gallery section css start */
.work-culture-section-main .work-culture-gallery {
  position: relative;
}

.work-culture-section-main .work-culture-bg-video {
  max-width: 100%;
  width: 100%;
  max-height: 782px;
  object-fit: cover;
  border-radius: 7px;
  overflow: hidden;
}

/* Single full-width banner image (replaces the old left + right image pair) */
.work-culture-section-main .work-culture-banner-img {
  width: 100%;
  max-height: 782px;
  object-fit: cover;
  border-radius: 7px;
  display: block;
}

.work-culture-section-main .work-culture-images {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}

.work-culture-section-main .work-culture-images.work-culture-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  background: transparent;
}

.work-culture-section-main .work-culture-image-main, .work-culture-section-main .work-culture-image-secondary {
  flex: 1;
  margin-top: -6px;
  width: 50%;
  height: 100%;
}

.work-culture-section-main .work-culture-image-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
}

.work-culture-section-main .work-culture-image-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7px 0 0 7px;
}

.work-culture-section-main .work-culture-image-secondary img {
  max-width: 50%;
  width: 100%;
  display: block;
}

.work-culture-section-main .work-culture-top-text p {
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: -0.02px;
  color: #000000;
}

.work-culture-section-main .work-culture-top-text {

  /* display: flex; */
  display: none;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
  padding: 0 20px;
}

.work-culture-section-main {
  padding: 0 25px;
}

/* work culture gallery section end */
.trigger-video-animation {
  position: sticky !important;  /* top: 80px; */
  top: 10px;
}

/* job vacancy css start */
.vacancies-section-wrapper {
  padding: 115px 25px 138px;
}

.vacancies-section-wrapper .accordion-container {
  max-width: 100%;
}

.vacancies-section-wrapper .accordion-title h2 span {
  position: absolute;
  font-size: 12px;
  line-height: 12px;
  font-weight: 400;
  color: #000000;
  letter-spacing: -0.36px;
  right: -17px;
}

.vacancies-section-wrapper .accordion-title h2 {
  font-size: 28px;
  line-height: 28px;
  font-weight: 400;
  color: #000000;
  letter-spacing: -0.84px;
  margin-bottom: 38px;
  position: relative;
  width: fit-content;
}

.vacancies-section-wrapper .single-accordion-item:not(:last-child) {
  border-bottom: 1px solid #00000020;
}

.vacancies-section-wrapper .accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 14px 0;
  position: relative;
}

.vacancies-section-wrapper .accordion-header p {
  font-size: 19px;
  line-height: 15px;
  font-weight: 400;
  color: #000000;
  letter-spacing: -0.38px;
}

.vacancies-section-wrapper .accordion-header p, .vacancies-section-wrapper .requirements-details-right, .vacancies-section-wrapper .role-details p {
  width: calc(50% - 10px) !important;
}

.vacancies-section-wrapper .accordion-header .role-position, .vacancies-section-wrapper .requirements-details-left, .vacancies-section-wrapper .role-details p.role-title {
  width: calc(50% + 10px) !important;
}

.vacancies-section-wrapper .accordion-header .plus-minus-icon-here {
  position: absolute;
  right: -1px;
  top: 1px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.vacancies-section-wrapper .accordion-header .plus-minus-icon {
  transition: transform 0.3s ease;
}

.vacancies-section-wrapper .accordion-body {
  max-height: 0;
  padding: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
}

.vacancies-section-wrapper .single-accordion-item.active .accordion-body {
  max-height: 2000px;
  padding: 61px 0 92px;
  transition: max-height 0.4s ease, padding 0.4s ease;
}

.vacancies-section-wrapper .role-details p, .vacancies-section-wrapper .requirements-details-left, .vacancies-section-wrapper .requirements-details-right {
  width: 50%;
  font-size: 15px;
  line-height: 21px;
  font-weight: 400;
  color: #000000;
  letter-spacing: 0;
}

.vacancies-section-wrapper .role-details {
  margin-bottom: 25px;
}

.vacancies-section-wrapper .role-details, .vacancies-section-wrapper .requirements-details {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.vacancies-section-wrapper .requirements-details ul {
  list-style-type: disc;
  padding-left: 20px;
  margin: 25px 0;
}

.vacancies-section-wrapper .accordion-header .plus-minus-icon-here .minus-icon {
  display: none;
}

.vacancies-section-wrapper .accordion-header .plus-minus-icon-here .plus-icon {
  display: block;
}

.vacancies-section-wrapper .accordion-header .plus-minus-icon-here.open-accordion .minus-icon {
  display: block;
}

.vacancies-section-wrapper .accordion-header .plus-minus-icon-here.open-accordion .plus-icon {
  display: none;
}

.vacancies-section-wrapper .requirements-details-left, .vacancies-section-wrapper .role-details p:first-child {
  text-transform: uppercase;
}

.requirements-details-right .learn-more-btn {
  max-width: 148px;
  width: 100%;
  justify-content: space-between;
  margin-left: 13px;
}

.vacancies-section-wrapper .role-desc, .vacancies-section-wrapper .requirements-details-right p {
  text-indent: 30px;
}

/*.vacancies-section-wrapper .requirements-details ul li {
  margin-bottom: 3px;
}*/
.requirements-details-right .learn-more-btn .grey-arrow-of-btn svg {
  width: 12px;
  height: 15px;
}

.vacancies-section-wrapper .requirements-details ul li::marker {
  font-size: 12px;
}

/* job vacancy css end */
.text-animation * {
  display: inline !important;
}

/* contact page starts  */

/*.contact-page-main-wrapper {
  background: #000000;
  max-height: 100vh;
  height: 100vh;
  padding: 75px 25px 25px;
  position: relative;
  overflow: hidden;
}*/

.contact-page-top .contact-page-top-left {
  max-width: calc(100% - 382px);
  width: 100%;
}

.contact-page-top-left p {
  font-size: 12px;
  line-height: 15px;
  text-transform: uppercase;
  margin-bottom: 0;
  text-align: left;
  color: #ffffff;
  letter-spacing: normal;
  display: none;
}

.contact-page-top * {
  color: #ffffff;
}

.contact-page-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: #000000;
  padding: 23px 70px 0 0;
  max-width: 100%;
  width: 100%;
}

.contact-page-top .contact-us-page-header span {
  font-size: 28px;
  line-height: 28px;
  position: absolute;
  letter-spacing: -0.02em;
  bottom: 84px;
}

.contact-page-top .contact-us-page-header {
  font-size: 130px;
  line-height: 130px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: -0.03em;
  max-width: 700px;
  position: relative;
}

.contact-page-top .capital-text {
  text-transform: uppercase;
}

.contact-page-top .contact-page-top-right * {
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 0;
}

.contact-page-top a.contact-page-top-email-id {
  font-size: 28px;
  line-height: 20px;
  text-decoration: underline;
  letter-spacing: -0.84px;
}

/*.contact-page-top .contact-page-top-right-single:first-child {
  margin-bottom: 47px !important;
}*/
.contact-page-top .contact-page-top-right-single:not(:last-child) {
  margin-bottom: 42px;
}

.contact-page-top .contact-page-top-right-single:nth-last-child(2) {
  margin-bottom: 0;
}

.contact-page-top .contact-address-social div {
  max-width: calc(50% - 50px);
  width: 100%;
}

.contact-page-top .contact-address-social div:nth-child(even) {
  max-width: calc(50% - 44px);
  width: 100%;
}

.contact-page-top .contact-address-social {
  display: flex;
  align-items: flex-start;
  row-gap: 50px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.contact-page-top .contact-page-social a {
  display: flex;
  align-items: center;
  gap: 13px;
}

.contact-page-top .contact-page-social a svg {
  width: 10px;
  height: 10px;
  position: relative;
  top: -1px;
}

.contact-page-top .contact-page-top-right .capital-text {
  margin-bottom: 4px;
  letter-spacing: 0;
}

.contact-page-top .contact-page-top-right .capital-text {
  position: relative;
  padding: 0 5px;
  display: inline-block;
}

.contact-page-top .contact-page-top-right .capital-text::before, .contact-page-top .contact-page-top-right .capital-text::after {
  content: '(';
  position: absolute;
  left: 0;
}

.contact-page-top .contact-page-top-right .capital-text::after {
  content: ')';
  left: auto;
  right: 0;
}

.contact-page-top .contact-page-top-right .capital-text.capital-heading {
  letter-spacing: -0.24px;
  margin-bottom: 10px;
}

.contact-page-top .underline-text {
  text-decoration: underline;
}

.contact-page-top .contact-page-top-right {
  margin-top: 35px;
  max-width: 382px;
  width: 100%;
}

.contact-page-top .contact-address-social .clock-block {
  margin-top: 14px;
}

.contact-page-top .contact-page-social li:not(:last-child) {
  margin-bottom: 0;
}

.contact-page-top .contact-page-social a svg path {
  fill: #fff;
}

.contact-page-top .contact-page-top-right-single p.only-address-para {
  max-width: 135px;
  width: 100%;
}

.contact-page-top .contact-page-top-right-single ul.contact-page-social li a span {
  letter-spacing: -0.24px !important;
}

.contact-page-bottom-middle {
  display: grid;
  grid-template-columns: repeat(6, auto);
  grid-gap: 10px;  /* grid-gap: 20px; */
}

.contact-page-bottom-single-img img {
  border-radius: 7px;
}

.contact-page-bottom-single-img img, .contact-page-bottom-single-img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.contact-page-bottom-top {
  margin-bottom: 2px;
}

.contact-page-bottom-top a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
}

.contact-page-bottom-top a>span:has(svg) {
  height: 11px;
  width: 11px;
  display: inline-block;
}

.contact-page-bottom-top a>span:has(svg) svg {
  height: 100%;
  width: 100%;
  display: block;
}

.contact-page-bottom-top .capital-text {
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: -0.24px;
}

.contact-page-bottom-bottom * {
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0;
  color: #ffffff;
}

.contact-page-bottom-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-transform: uppercase;
  margin-top: 11px;
}

.contact-page-bottom-bottom span {
  vertical-align: super;
  font-size: 6px;
  line-height: 18px;
  color: #ffffff;
}

.contact-page-bottom-bottom .contact-bottom-right:hover {
  text-decoration: underline;
  text-underline-offset: 1px;
}

.contact-page-bottom {
  position: static;
  bottom: 16px;
  left: 25px;
  width: 100%;  /*max-width: calc(100% - 50px);*/
}

.contact-page .container {
  background: #000000;
  min-height: 100vh;
  height: auto;
  padding: 75px 25px 25px;  /*position: relative;*/
  overflow: auto;
  display: flex;
  justify-content: space-between;
  flex-flow: column wrap;
  gap: 40px;
}

.contact-page-bottom-top svg path {
  fill: #fff;
}

/* contact page ends  */

/* work page animation start */
.hovered-video {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  max-width: 400px;
  width: 100%;
  border-radius: 5px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.menu-hover-video .hovered-video:nth-child(5n + 1) {
  top: 40%;
  left: 5%;
}

.menu-hover-video .hovered-video:nth-child(5n + 2) {
  top: 20%;
  left: 50%;
}

.menu-hover-video .hovered-video:nth-child(5n + 3) {
  top: 20%;
  left: 15%;
}

.menu-hover-video .hovered-video:nth-child(5n + 4) {
  top: 45%;
  left: 30%;
}

.menu-hover-video .hovered-video:nth-child(5n) {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* work page animation end */

/* about/info page start  */
.about-us-page-top {
  padding: 102px 25px 153px;
  background: #000000;
  display: flex;
  align-items: flex-start;
}

.about-us-page-top .about-us-page-top-left-content {
  margin-top: 12px;
  max-width: 80.5%;
}

.about-us-page-top .about-info-title {
  font-size: 12px;
  line-height: 12px;
  font-weight: 400;
  color: #ffffff;
  text-transform: uppercase;
}

.about-us-page-top .about-us-page-main-wrapper {
  background: #000000;
  padding: 45px 25px 0;
}

.about-us-page-top .about-us-page-top-left-content p {
  text-indent: 2em;
  font-size: 15px;
  line-height: 19px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.about-us-page-top .about-us-page-top-right, .about-us-page-top .about-us-page-top-left {
  flex: 1;
  max-width: 50%;
  width: 100%;
}

.about-us-page-top {
  display: flex;
  align-items: flex-start;
}

.about-us-page-top .about-us-page-top-right ul * {
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.about-us-page-top .about-us-page-top-right .about-info-title {
  margin-bottom: 12px;
  letter-spacing: -0.24px;
  position: relative;
  padding: 0 5px;
  display: inline-block;

}
.about-us-page-top .about-us-page-top-right .about-info-title::before,
.about-us-page-top .about-us-page-top-right .about-info-title::after {
    content: '(';
    position: absolute;
    left: 0;
}
.about-us-page-top .about-us-page-top-right .about-info-title::after {
    content: ')';
    left: auto;
    right: 0;
}
/* suppress any remaining inline bracket spans — CSS pseudo-elements handle them site-wide */
.about-info-title .brackets { display: none !important; }

.about-us-page-top .about-us-page-top-right {
  display: flex;
  align-items: flex-start;
}

.about-us-page-top .about-us-page-top-right-clients, .about-us-page-top .about-us-page-top-right-coverage, .about-us-page-top .about-us-page-top-right-services-social {
  flex: 1;
}

.about-us-page-top .about-us-page-top-right-clients li, .about-us-page-top .about-us-page-top-right-clients a {
  text-transform: uppercase;
}

.about-us-page-top .about-us-page-top-right-services-list li span:last-child {
  text-align: right;
  flex: auto;
}

.about-us-page-top .about-us-page-top-right-services-list li {
  display: flex;
  align-items: center;
  gap: 30px;
  text-transform: uppercase;
}

.about-us-page-top .about-us-page-top-right-social {
  margin-top: 53px;
}

.about-us-page-top .about-us-page-top-right-social ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.about-us-page-top .about-us-page-top-right ul li {
  margin-bottom: 0;
  font-family: "CenturySchoolbook-Regular";
}

.about-us-page-top .about-us-page-top-right-services-list li span, .about-us-page-top .about-us-page-top-right-social ul li {
  font-family: "Exposure-[-10]";
}

.about-us-page-top .about-us-page-top-right-social ul li a div {
  display: flex;
  align-items: center;
  gap: 13px;
}

.about-us-page-top .about-us-page-top-left {
  min-width: calc(50% + 12px);
  margin-top: 12px;
}

.about-us-page-top .about-us-page-top-right-services-social>div {
  margin-left: 10px;
}

.about-us-page-top .about-us-page-top-right-social ul li a:hover .icons {
  background: grey;
}

/* about/info page ends  */

/*.about-us-page-top {
  padding-bottom: 150px;
}*/

/* about us page bottom section css start */
.about-us-page-bottom {
  padding: 0 25px 100px;
  background-color: #000;
}

.about-us-page-bottom-top-caption p {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.about-us-page-bottom-top-caption-left, .about-us-page-bottom-top-caption-right {
  flex: 1;
}

.about-us-page-bottom-top-caption {

  /* display: flex; */
  display: none;
  align-items: center;
  margin-bottom: 10px;
}

.about-us-page-bottom-top-caption-right div {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.about-us-page-bottom-top-caption-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: end;
}

.about-us-page-bottom-top-caption {
  margin-bottom: 10px;
}

.about-us-page-bottom-video video {
  width: 100%;
  object-fit: cover;
  height: 100%;
  min-height: 100%;
  display: block;
}

.about-us-page-bottom-video {
  position: relative;
  border-radius: 7px;
  overflow: hidden;
  max-height: 100%;
  height: 100%;
}

.centered-text-to-about-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 400;
  font-size: 50px;
  letter-spacing: -0.03em;
  text-align: center;
  color: #ffffff;
  z-index: 2;
  white-space: normal;
  padding: 0 10px;
}

.about-us-page-bottom {
  padding-bottom: 100px;
}

.about-us-page-bottom-top-caption-right>p {
  flex: 2;
}

/* about us page bottom section css end */

/* related post section css start */
.related-post-section {
  margin: 0 -25px;
}

.related-post-section .related-post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 45px;
  margin-bottom: 10px;
}

.related-post-section .post-card {
  position: relative;
  width: 100%;
  overflow: hidden;  /* max-height: 632px; */

  /* min-height: 632px; */
  height: 580px;
  border-radius: 7px;
  cursor: pointer;
}

/* Fixed height for image and video */
.related-post-section .post-thumbnail-img, .related-post-section .post-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.related-post-section .post-video {
  overflow: hidden;
  border-radius: 7px;
}

.related-post-section .post-thumbnail-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.related-post-section .post-video video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  display: block;
  object-fit: cover;
  border-radius: 7px;

  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}

.related-post-section .post-video .vimeo-cover-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}

.related-post-section .post-card:hover .post-video video,
.related-post-section .post-card:hover .post-video .vimeo-cover-wrap {
  opacity: 1;
}

/* Related post section css end */
body:has(.list-view-active) {
  overflow: hidden;
}

.work-inner-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 25px;
  position: relative;
}

.work-hdr-right {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  color: #000000;
}

.work-hdr-right-toggle {
  display: none;
}

.work-hdr-toggle-switch {
  position: relative;
  width: 27px;
  height: 14.5px;
  background-color: #f6f6f6;
  border-radius: 999px;
  margin-left: 10px;
  transition: background-color 0.3s ease;
}

.inr-pg-center-logo {
  background-color: rgb(213 213 213 / 60%);
  padding-right: 0;
  border-radius: 50px;
  display: flex;
  align-items: center;
  backdrop-filter: blur(10px);
}

.inr-pg-center-logo .inr-page-ct-logo, .home-sticky-hdr .inr-page-ct-logo {
  padding: 6px 11px 6px 21px;
  background-color: rgb(244 244 244 / 70%);
  border-radius: inherit;
  display: flex;
  align-items: center;
  gap: 0 8px;
  backdrop-filter: blur(4px);
}

.inr-pg-center-logo .header-inner-plus-icon, .home-sticky-hdr .header-inner-plus-icon {
  background-color: #fff;
}

.inr-pg-center-logo .inr-ct-page-nm {
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  letter-spacing: normal;
  color: #000000;
  padding: 0 13px 0 10px;
  display: flex;
  align-items: center;
  gap: 0 10px;
}

.inr-ct-page-nm .inner-page-close-menu {
  display: inline-flex;
  cursor: pointer;
  position: relative;
  top: 1px;
}

.home-sticky-hdr {
  padding-right: 0;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 15px;
  left: 0;
  right: 0;
}

body.sticky-header .home-sticky-hdr {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.1s ease, visibility 0.1s ease;
}

.work-page-main {
  padding: 162px 25px 140px 25px;
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-gap: 60px 60px;
  align-items: center;
  justify-content: space-between;
}

.tile-open .work-page-main {
  display: none !important;
}

.work-page-main .single-work {
  position: relative;
  border-radius: 7px;
  transition: all 0.5s;
  width: 366px;
  height: 458px;
  overflow: hidden;
  background-color: #f5f5f5;
}

/* Grey placeholder: keep the box visible while the sequential reveal
   loads assets behind the scenes. The card shell (grey box) paints
   immediately; .single-work-inner fades in only after the primary
   asset has loaded AND it is the card's turn in the reveal queue. */
.work-page-main .single-work[data-reveal-seq] {
  opacity: 1 !important;
  transform: none !important;
}
.work-page-main .single-work .single-work-inner {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.work-page-main .single-work.revealed .single-work-inner {
  opacity: 1;
}

.work-page-main .single-work:nth-child(odd) .single-work-images {
  height: 458px;
}

.work-page-main .single-work .single-work-images img.single-work-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-page-main .single-work .single-work-images video.single-work-main-img,
.work-page-main .single-work .single-work-images iframe.single-work-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Vimeo iframe cover — simulates object-fit: cover for iframes in work grid.
   Iframes ignore object-fit, so we oversise the iframe with aspect-ratio: 16/9,
   centre it, and let overflow: hidden on the wrapper crop the excess. */
.vimeo-cover-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.vimeo-cover-wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  pointer-events: none;
  display: block;
}

/* Primary Vimeo iframes and self-hosted videos: the card-level
   .revealed transition handles the fade, so these stay at full opacity
   within the hidden card. No separate iframe/video fade needed. */
.work-page-main .vimeo-cover-wrap.single-work-main-img iframe,
.work-page-main video.single-work-main-video {
  opacity: 1;
}

.work-page-main .single-work h5 span {
  vertical-align: super;
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  opacity: 50%;
}

.work-page-main .single-work h5 {
  font-size: 19px;
  line-height: 18px;
  font-weight: 400;
  color: #ffffff;
  vertical-align: super;
  position: absolute;
  top: 13px;
  left: 15px;
  z-index: 2;
  letter-spacing: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.work-page-main .single-work.asset-loaded h5 {
  opacity: 1;
}

.work-page-main .single-work .single-work-main-img {
  border-radius: 7px;
  transition: all 0.5s;
  position: absolute;
  top: 0;
  left: 0;
  align-self: center;
  opacity: 1;
  visibility: visible;
}

.work-page-main .single-work-hover-img {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  align-self: center;
  transition: all 0.5s;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7px;
}

.work-page-main .single-work.has-hover-media:hover .single-work-main-img {
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s;
}

.work-page-main .single-work.has-hover-media:hover .single-work-hover-img {
  opacity: 1;
  visibility: visible;
  transition: all 0.5s;
}

.work-page-main .single-work:hover video.single-work-main-video {
  opacity: 1 !important;
  visibility: visible !important;
}

.single-work-images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.single-work .single-work-caption p {
  font-size: 12px;
  line-height: 12px;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: #ffffff;
}

.single-work-caption .cnt-nm {
  margin-top: 1px;
}

.work-page-main .single-work:hover .single-work-caption {
  opacity: 1;
  max-height: unset;
  transform: translateY(0);
}

.single-work-caption {
  position: absolute;
  bottom: 15px;
  left: 15px;
  width: calc(100% - 30px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(20px);
  transition: opacity 0.4s ease, max-height 0.4s ease, transform 0.4s ease;
}

span.light-arrow-only {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff4d;
  border-radius: 60px;
}

.work-page-main .single-work:nth-child(2n) {
  max-height: 204px;
}

/* ── Lone last card: centre it instead of left-aligning it ──────────────
   In a 3-column grid a lone orphan always sits at a 3n+1 position (1, 4,
   7, 10 …).  Force it into column 2 so it reads as a balanced centre card.
   ─────────────────────────────────────────────────────────────────────── */
.work-page-main .single-work:last-child:nth-child(3n+1) {
  grid-column: 2;
}

/* Aspect-ratio correction: the lone card's odd/even parity doesn't match
   the crop expected for the centre column on that particular row.
   6n+1 positions (rows 1, 3, 5 …): card is tall by default; centre of an
   odd row should use the SHORT crop.                                       */
.work-page-main .single-work:last-child:nth-child(6n+1) {
  max-height: 204px;
}
.work-page-main .single-work:last-child:nth-child(6n+1) .single-work-images {
  height: 100%; /* reset the 458px odd-row override */
}
/* 6n+4 positions (rows 2, 4, 6 …): card is short by default; centre of an
   even row should use the TALL crop.                                       */
.work-page-main .single-work:last-child:nth-child(6n+4) {
  max-height: none;
}

/* work page list view  */
.work-page-layout-setup-switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  color: #000000;
}

.work-page-layout-setup-switch-input {
  display: none;
}

.list-view-active .work-page-layout-setup-switch-slider {
  background: #272727;
}

.list-view-active .work-page-layout-setup-switch-slider::before {
  background-color: #ffffff;
}

.work-page-layout-setup-switch-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  background-color: #000;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.work-page-layout-setup-switch-input:checked+.work-page-layout-setup-switch-slider::before {
  transform: translateX(12px);
}

#work-category-dropdown {
  position: relative;
  z-index: 100;
  left: 23px;
  top: 15px;
  border-radius: 25px;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  padding: 11px 35px 10px 13px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background: url("data:image/svg+xml;utf8,\<svg xmlns=!string!width=!string!height=!string!viewBox=!string!fill=!string!>\<circle cx=!string!cy=!string!r=!string!fill=!string!/>\<path d=!string!stroke=!string!stroke-width=!string!stroke-linecap=!string!/>\</svg>") no-repeat right 9px center / 18px auto, #F4F4F4;
}

.work-page-layout-setup-switch-main {
  position: absolute;
  top: 15px;
  right: 24px;
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  z-index: 99;
}

.work-page-list-main * {
  color: #ffffff;
}

.work-page-list-main .work-page-list-box {
  position: relative;
  z-index: 1;
}

.work-page-list-main {
  display: none;
  padding: 100px 25px 140px 25px;
  background: #000000;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

.tile-open .work-page-list-main {
  display: block;
  padding: 87px 25px 140px 25px;
}

.open-menu .home-header-expanded-menu-top .home-img {
  display: none;
}

.home-page-page.open-menu .home-header-expanded-menu-top .home-img+.hdr-tg-rt-txt {
  display: none;
}

.home-page-page.open-menu .home-header-expanded-menu-top .home-img {
  display: block;
  flex: 1;
  min-width: 0;
}

.fixed-bottom-mox-logo img {
  width: 100%;
  object-fit: cover;
}

.list-brand {
  text-transform: uppercase;
}

.work-page-list-view-bg-logo-video video {
  max-height: 80vh;
  width: 100vw;
}

.fixed-bottom-mox-logo {
  position: absolute;
  bottom: 0;
  left: 25px;
  width: calc(100% - 50px);
}

.work-page-list-view li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.work-page-list-view li a {
  display: grid;
  gap: 10px;
  grid-template-columns: 7.8% 16% 24.8% 47.3% 4%;
  align-items: center;
  margin-bottom: 0;
  padding: 0.15em 0;
}

.work-page-list-view li a * {
  font-family: "Exposure-[-10]";
  font-weight: 400;
  font-size: clamp(14px, 1.1vw, 21px);
  line-height: 1;
  letter-spacing: 0;
  margin: 0;
  padding: 0;
}

.list-view-active .work-page-layout-setup-switch-label {
  color: #ffffff;
}

.open-menu .work-page-custom-dropdown {
  display: none;
}

/* Work page ends */
.work-detail-page-banner-caption {
  gap: 20px;
  padding: 0 20px;
}

.work-detail-page-banner-caption-right ul {
  flex-wrap: wrap;
  row-gap: 5px;
}

/* Work detail topbar end  */

/* Work detail overview start */
.work-detail-page-project-detail-inner-left .work-dt-project-title {
  font-size: 24px;
}

.work-detail-page-project-detail-inner-right h2 {
  font-size: 26px;
  line-height: 30px;
}

.work-detail-page-project-detail {
  margin-bottom: 50px;
  padding: 0 20px;
}

/* Work detail overview end */

/* work project section css start */
.work-detail-page-product-images-with-captions {
  gap: 160px;
}

.work-detail-page-product-caption {
  align-items: flex-start;
  gap: 15px;
}

/* work project section css end */

/* related project section css start
.related-project-title-and-all-work-btn {
margin-bottom: 15px;
}

.related-project-title-and-all-work-btn h3 {
font-size: 24px;
}

.work-detail-page-related-project-inner-main {
flex-flow: column wrap;
}

.work-detail-page-related-project-inner-right .work-detail-page-related-project-inner-right-video,
.work-detail-page-related-project-inner-left .work-detail-page-related-project-inner-video,
.work-detail-page-related-project-inner-right .work-detail-page-related-project-inner-video {
opacity: 1;
}

.work-detail-page-related-project-inner-video-bottom {
left: 15px;
flex-flow: column wrap;
align-items: flex-start;
gap: 10px;
width: calc(100% - 30px);
}

.work-detail-page-related-project-inner-video-bottom .work-detail-page-related-project-inner-video-bottom-right>div {
flex: 1;
}

.work-detail-page-related-project-inner-video-bottom-right ul {
flex-wrap: wrap;
gap: 3px 5px;
}

.work-detail-page-related-project-inner-left,
.work-detail-page-related-project-inner-right {
min-height: 400px;
} */

/* related project section css end */

/* .swi-list {
grid-template-columns: repeat(2, 46%);
row-gap: 20px;
margin: 50px 0;
overflow-y: auto;
max-height: calc(100vh - 20px);
height: 100%;
padding: 0 8px 0 0;
}

.swi-list .swi-item:nth-child(3),
.swi-list .swi-item:last-child {
grid-column-start: 1;
grid-column-end: 3;
}

.swi-topbar {
top: 40px;
} */

/* .desk-btm-text-row {
flex-flow: column;
} */


.work-page-main .single-work:hover .single-work-caption .light-arrow-only {
  background: #ffffff4d;
}

/* Latest news start */

/* .home-page-news-slider .swiper-slide {
  max-width: 84.50%;
  min-height: 455px;
} */



.home-page-news-slider .news-headline {
  font-size: 19px;
  line-height: 22px;
}

/* Latest news end */

/* News detail page start */
.news-detail-view {
  flex-flow: row wrap;
}

.news-detail-sidebar {
  padding: 0 20px;
}

.all-news-view {
  height: auto;
  margin-top: 94px;
}

.all-news-title-row h3 {
  font-size: 28px;
  line-height: 28px;
}

.all-news-list {
  margin-top: 30px;
}

.all-news-list .all-news-item.active {
  background-color: inherit;
  border-bottom-color: rgba(255, 255, 255, 0.2);
  border-radius: 0;
}

/* body,html{
overflow-x: hidden !important;
} */
.footer-email .footer-submit span {
  display: none;
}

.news-detail-sidebar {

  /* width: 100%; */

  /* position: relative; */
}

.news-detail-right {
  width: 100%;
  padding: 0 15px;
}

.news-detail-right .news-detail-inner .featured-image-view:first-of-type .featured-image {
  margin: 0 -15px;
}

.featured-image-view .featured-img-btm {
  width: 100%;
  gap: 0 143px;
}

.news-detail-inner .sn-description {
  width: 100%;
  padding-right: 0;
  margin-top: 20px;
}

.news-detail-inner .sn-description h2 {
  font-size: 28px;
  line-height: 32px;
}

.news-detail-inner .sn-full-desc {
  margin-top: 0;
}

.news-detail-inner .sn-description h2 + .sn-full-desc {
  margin-top: 11px;
}

.news-detail-inner .sn-inner-image-content {
  padding: 38px 0 0;
}

.news-detail-inner .sn-full-desc p {
  margin-bottom: 0;
  text-indent: 0;
}

/* Intro description follows an h2 — no indent */
.news-detail-inner .sn-description h2 ~ .sn-full-desc p {
  text-indent: 0;
}

.news-detail-inner .sn-blockquote {
  margin-top: 0;
}

.news-filter-selected .mob-news-filter svg {
  width: 100%;
  height: 100%;
  color: #222222;
}

.news-filter-selected .mob-news-filter svg.filterToggle {
  margin-left: -8px;
}

.sn-news-btm-gird {
  padding: 40px 0;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(1, 1fr);
}

/* When rendered as an ACF block, WP adds a block wrapper class that can
   introduce default block spacing/max-width constraints in block themes. */
.news-detail-view .wp-block-acf-mox-news-image-grid.sn-news-btm-gird {
  margin: 83px 0 0 0;
  max-width: none;
}

body:has(.news-filter-dropdown-options.open) .mob-news-filter .filterToggle {
  display: none;
}

body:has(.news-filter-dropdown-options.open) .mob-news-filter svg, body.tile-open .news-filter-dropdown-options .mob-news-filter svg {
  color: #fff;
}

body:has(.news-filter-dropdown-options.open) .mob-news-filter .filterClose {
  display: block;
  width: 20px;
  height: 20px;
}

.news-filter {
  top: 15px;
}

.news-filter-selected {
  background-color: transparent;
  padding: 0;
}

.mob-news-filter .filterClose {
  display: none;
}

.news-filter-selected .mob-news-filter {
  display: block;
}

.news-filter-selected .mob-news-filter svg {
  width: 100%;
  height: 100%;
  color: #fff;
}

/* News detail page end */

/* Work page header start */
.work-inner-main {
  padding: 14px 20px;
}

.work-page-layout-setup-switch-slider {
  margin-left: 3px;
}

.work-page-layout-setup-switch {
  line-height: 15px;
}

.tile-open .work-page-dropdown-selected {
  background: transparent;
}

.work-page-layout-setup-switch-main {
  right: 20px;
  top: 15px;
}

.work-page-custom-dropdown {
  left: 11px;
  top: 22px;
}

/* work page list view  */
.tile-open {
  overflow: hidden;
}

.work-page-layout-setup-switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  color: #000000;
}

.tile-open .work-page-layout-setup-switch {
  color: #fff;
}

.work-page-layout-setup-switch-slider {
  position: relative;
  width: 27px;
  height: 14.5px;
  background-color: #f6f6f6;
  border-radius: 999px;
  margin-left: 2px;
  transition: background-color 0.3s ease;
}

.work-page-list-view-bg-logo-video {
  max-width: fit-content;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.5;
}

.work-page-list-view {
  position: relative;
  z-index: 2;
}

.work-page-list-view-bg-logo-video video {
  max-height: 80vh;
}

.work-page-list-view ul::-webkit-scrollbar {
  display: none;
}

.work-page-list-view ul {
  max-height: 65vh;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-view-active .work-page-layout-setup-switch-label {
  color: #ffffff !important;
}

.open-menu .work-page-layout-setup-switch-main {
  display: none;
}

.work-page-custom-dropdown {
  display: inline-block;
  position: absolute;
  top: 17px;
  left: 25px;
  z-index: 99;
}

.work-page-dropdown-selected {
  background: #f5f5f5;
  border: none;
  padding: 10px 9px 8px 13px;
  border-radius: 50px;
  font-size: 12px;
  line-height: 9px;
  font-weight: 400;
  color: #000000;
  cursor: pointer;
  position: relative;
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.05s ease 0.05s;
}

.tile-open .work-page-dropdown-selected {
  background: #191919;
  color: #fff;
}

.tile-open .work-page-custom-dropdown .white-bg-arrow-only {
  background: #303030;
}

.tile-open .work-page-custom-dropdown .white-bg-arrow-only svg {
  color: #fff;
}

.tile-open .work-page-layout-setup-switch-slider {
  background-color: #272727;
}

.tile-open .work-page-layout-setup-switch-slider::before {
  background-color: #fff;
}

.work-page-dropdown-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow-y: auto;
  scrollbar-width: none;
  max-height: 0;
  transition: all 0.4s ease;
  z-index: 99;
  background: #f5f5f5;
  border-radius: 0 0 7px 7px;
}

.work-page-custom-dropdown:has(.open) .white-bg-arrow-only svg path {
  stroke: #ffffff;
}

.work-page-custom-dropdown:has(.open) .white-bg-arrow-only {
  background: #000000;
  transform: rotate(180deg);
  transition: all 0.25s ease;
}

.work-page-dropdown-options.open {
  max-height: inherit;
  opacity: 1;
  padding: 4px 0 13px;
}

.work-page-custom-dropdown .white-bg-arrow-only {
  width: 15px;
  height: 15px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  transform: rotate(0);
  transition: all 0.25s ease;
  justify-content: center;
}

.work-page-dropdown-options li {
  list-style: none;
  padding: 3px 12px;
  font-size: 12px;
  line-height: 12px;
  font-weight: 400;
  color: #000000;
  cursor: pointer;
  transition: background 0.2s ease, ease all 0.35s;
}

.work-page-dropdown-options li:hover {
  text-decoration: underline;
}

.work-page-custom-dropdown:has(.open) .work-page-dropdown-selected {
  border-radius: 7px 7px 0 0;
  transition: all 0.2s ease-out -0.2s;
}

body.tile-open .work-page-dropdown-options {
  background: #191919;
}

body.tile-open .work-page-dropdown-options li {
  color: #fff;
}

/* Work page ends */

/* loader css  */
.page-loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.page-loader {
  width: 60px;
  height: 60px;
  border: 6px solid rgba(255, 255, 255, 0.3);
  border-top: 6px solid #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }

}

body:has(.page-loader) {
  overflow: hidden;
}

/* Work filter mobile start */
.work-page-dropdown-selected .mob-work-filter {
  display: none;
  width: 30px;
  height: 30px;
  color: #fff;
}

/* Work filter mobile end */

/* Work detail info start */
.single-work-info {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  padding: 27px 25px 140px 25px;
  background: rgba(0, 0, 0, 0.4);
  height: 100%;
  backdrop-filter: blur(34px);
  -webkit-backdrop-filter: blur(34px);
  max-height: 100%;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  z-index: 99;
  transform: translateY(-100%);
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
}

.open-sw-info {
  overflow: hidden;
}

.open-sw-info .site-header {
  pointer-events: none;
  z-index: 100;
}

.open-sw-info .inr-pg-hdr-info .work-dt-info-btn svg {
  transform: rotate(180deg);
}

.open-sw-info .inr-pg-center-logo, .open-sw-info .inr-pg-hdr-info {
  pointer-events: auto;
}

.open-menu.open-sw-info .site-header {
  pointer-events: auto;
}

.open-sw-info .single-work-info {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.single-work-info * {
  color: #fff;
}

.swi-topbar {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 99;
  top: -10px;
}

.swi-topbar .swi-seq-num {
  font-weight: 400;
  font-size: 19px;
  line-height: 15px;
}

.swi-topbar .swi-info-close {
  cursor: pointer;
  margin-left: auto;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  line-height: normal;
  text-transform: uppercase;
  background: none;
  border: none;
  outline: none;
  padding: 0;
}

.swi-topbar .swi-info-close:focus,
.swi-topbar .swi-info-close:focus-visible {
  outline: none;
  box-shadow: none;
}

.swi-topbar .swi-info-close i {
  width: 38px;
  height: 38px;
  background-color: #E3E3E3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #E3E3E3;
}

.swi-list {
  padding: 36px 0 0;
  display: grid;
  gap: 10px;
  justify-content: space-between;
  grid-template-columns: 12% 20% 24% 25%;
}

.swi-item {
  display: flex;
  flex-direction: column;
}

.swi-item .swi-label {
  font-size: 12px;
  letter-spacing: -0.24px;
  text-transform: uppercase;
  margin-bottom: 18px;
  position: relative;
  padding: 0 5px;
  align-self: flex-start;
}
.swi-scope-num {
  position: relative;
  padding: 0 5px;
}
.swi-item .swi-label::before,
.swi-scope-num::before {
  content: '(';
  position: absolute;
  left: 0;
}
.swi-item .swi-label::after,
.swi-scope-num::after {
  content: ')';
  position: absolute;
  right: 0;
}

.swi-item .swi-title {
  font-size: 19px;
  line-height: 15px;
  letter-spacing: -0.4px;
}

.swi-item .brief-desc p, .swi-item .outcome-desc p {
  font-size: 12px;
  line-height: 15px;
  text-indent: 28px;
  letter-spacing: -0.24px;
}

ul.swi-scope-list li span {
  letter-spacing: -0.24px;
  font-size: 12px;
}

.swi-item:has(.swi-inner) div {
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
}

.swi-item:has(.swi-inner) {
  display: flex;
  flex-direction: column;
  gap: 42px 0;
}

.swi-item:nth-child(3):has(.swi-inner)>div {
  max-width: 326px;
  width: 100%;
}

.swi-scope-list li {
  display: flex;
  gap: 0 5px;
  font-size: 14px;
  line-height: 14px;
  margin-bottom: 2px;
}

.swi-scope-list li a * {
  line-height: inherit;
}

.swi-scope-list li .black-bg-arrow-only {
  margin-left: auto;
  background-color: #E3E3E3;
  width: 15px;
  height: 15px;
  /* #FB-04: arrow hidden while the Scope-tag linking is on hold. The ACF
     `scope.name` text is independent of the `work_category` taxonomy terms,
     so we cannot reliably generate a working href without the data-model
     change (term-picker subfield) discussed with the client. Showing the
     arrow without a working link reads as a broken/unresponsive control.
     Re-enable once each scope row carries an explicit term reference and
     the <a> wrap is restored in single-work.php. */
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.swi-credits-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  line-height: 14px;
}

.single-work-info .swi-credits-list li {
  font-size: 12px;
}

.swi-credits-list li .credit-designation {
  text-transform: uppercase;
  font-size: 11px;
}
.swi-credits-list li .credit-designation.no-caps {
  text-transform: none;
}

/* Work detail info end */

/* Work detail topbar start  */
.work-detail-page-banner-video {
  height: auto;
  max-height: 925px;
  width: 100%;
  object-fit: cover;
}

/* Vimeo iframe in hero banner — wrapper needs its own aspect-ratio so it
   doesn't collapse (the iframe inside is position: absolute). max-height
   from .work-detail-page-banner-video still caps the height; overflow: hidden
   from .vimeo-cover-wrap crops the excess, simulating object-fit: cover. */
.vimeo-cover-wrap.work-detail-page-banner-video {
  aspect-ratio: 16 / 9;
}

/* Fallback for bare iframes (non-cover contexts) */
iframe.work-detail-page-banner-video {
  display: block;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  border: 0;
}

/* #M06-mobile-hero: when a 9×16 mobile override has been uploaded, both
   desktop and mobile markup are rendered side-by-side and we toggle
   visibility per viewport. The mobile variant has aspect-ratio 9/16 so
   iframe / cover wrappers don't collapse. */
.work-detail-page-banner-video.hero-is-mobile { display: none; }
.vimeo-cover-wrap.work-detail-page-banner-video.hero-is-mobile { aspect-ratio: 9 / 16; }
iframe.work-detail-page-banner-video.hero-is-mobile { aspect-ratio: 9 / 16 !important; }
@media (max-width: 767px) {
  .work-detail-page-banner-video.hero-is-desktop { display: none; }
  .work-detail-page-banner-video.hero-is-mobile { display: block; }
}

.work-detail-page-banner-caption * {
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
  color: #000000;
  letter-spacing: -0.24px;
  width: max-content;
}

.work-detail-page-banner-caption {
  display: flex;
  align-items: center;
  margin-top: 20px;
  padding: 0 25px;
  gap: 85px;
}

.work-detail-page-banner-caption-left {
  display: flex;
  justify-content: space-between;
  max-width: calc(50% + 10px);
  width: 100%;
}

.work-detail-page-banner-caption-right, .work-detail-page-project-detail-inner-right {
  flex: auto;
  max-width: calc(50% - 10px);
  width: 100%;
}

ul.scope-list {
  display: flex;
  align-items: center;
  gap: 2px;
}

ul.scope-list li {
  position: relative;
  padding-right: 5px;
}

ul.scope-list li::before {
  /*content: 'http://www.w3.org/2000/svg';*/
  content: '';
  position: absolute;
  left: 0;
  bottom: 2px;
  width: calc(100% - 5px);
  height: 1px;
  background-color: inherit;
}

ul.scope-list li::after {
  /*content: '16';*/
  content: '';
  position: absolute;
  right: 0;
}

ul.scope-list li:last-child:after {
  display: none;
}

.work-detail-page-banner-caption-right ul li {
  text-decoration: underline;
}

.work-detail-page-banner-caption-right ul {
  display: flex;
  align-items: center;
  gap: 2px;
}

.work-detail-page-banner-caption-right {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 209px;
}

.work-detail-page-banner {
  margin-bottom: 137px;
}

.work-detail-page-banner-caption {
  display: flex;
  align-items: center;
  margin-top: 12px;
  padding: 0 25px;
}

.work-detail-page-banner-caption-left, .work-detail-page-project-detail-inner-left {
  flex: 1;
}

.work-detail-page-banner-caption * {
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
  color: #000000;
}

.work-detail-page-banner-caption * .ct-nm {
  text-transform: uppercase;
}

.work-detail-page-banner-caption-right, .work-detail-page-project-detail-inner-right {
  flex: 2;
}

.work-detail-page-project-detail-inner-left {
  max-width: calc(33% + 12px);
}

.work-detail-page-project-detail-inner-right {
  max-width: calc(67% - 12px);
  margin-top: -13px;
}

/* Work detail topbar end  */

/* Work detail overview start */
.work-detail-page-project-detail {
  margin-bottom: 90px;  /* margin-bottom: 163px; */
  padding: 0 25px;
}

.work-detail-page-project-detail-inner {
  display: flex;
}

.work-detail-page-project-detail-inner-left {
  margin-top: -13px;
}

.work-detail-page-project-detail-inner-left p {
  font-size: 12px;
  font-weight: 400;
  color: #000000;
  letter-spacing: -0.03em;
  margin-bottom: 5px;
}

.work-detail-page-project-detail-inner-left .work-dt-project-title {
  font-size: 28px;
  line-height: 28px;
  font-weight: 400;
  color: #000000;
  letter-spacing: -0.03em;
  max-width: 330px;
}

.work-detail-page-project-detail-inner-right h2 {
  font-size: 50px;
  line-height: 52px;
  font-weight: 400;
  color: #000000;
  letter-spacing: -0.03em;
  margin-bottom: 25px;
}

.work-detail-page-project-detail-inner-right h2 p:not(:first-of-type) {
  display: none;
}

span.grey-arrow-of-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 60px;
}

/* Work detail overview end */

/* Work detail image & video scn start */
.work-detail-page-product-images-with-captions {
  padding: 0 25px;
  display: flex;
  flex-direction: column;
  gap: 70px;
}

.work-detail-page-product-image1, .work-detail-page-product-image5 {
  width: 100%;
}

.work-detail-page-product-image1 img, .work-detail-page-product-image2 img, .work-detail-page-product-image3 img, .work-detail-page-product-image4 img,
.work-detail-page-product-landscape-large img, .work-detail-page-product-landscape-medium img, .work-detail-page-product-landscape-small img,
.work-detail-page-product-portrait-large img, .work-detail-page-product-portrait-medium img, .work-detail-page-product-portrait-small img {
  width: 100%;
  height: auto;
  border-radius: 7px;
}

.work-detail-page-product-caption {
  display: flex;
  justify-content: space-between;
}

.work-detail-page-product-caption p {
  font-size: 12px;
  line-height: 14px;
  font-weight: 400;
  color: #000000;
  letter-spacing: -0.02em;
}

.work-detail-page-product-video2 {
  max-width: 687px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 7px;
  clip-path: inset(0 round 7px);
  -webkit-clip-path: inset(0 round 7px);
}

.work-detail-page-product-video2 video,
.work-detail-page-product-video2 iframe {
  border-radius: 7px;
  clip-path: inset(0 round 7px);
  -webkit-clip-path: inset(0 round 7px);
}

.work-detail-page-product-video2-video, .work-detail-page-product-video3-video {
  width: 100%;
  border-radius: 7px;
  line-height: 0;
}

.work-detail-page-product-image2 {
  max-width: 915px;
  margin: 0 auto;
}

.work-detail-page-product-image3 {
  max-width: 50%;
  margin: 0 auto;
}

.work-detail-page-product-image4 {
  max-width: 35%;
  margin: 0 auto;
}

.work-detail-page-product-landscape-large {
  width: 100%;
}

.work-detail-page-product-landscape-medium {
  max-width: 70%;
  margin: 0 auto;
}

.work-detail-page-product-landscape-small {
  max-width: 60%;
  margin: 0 auto;
}

.work-detail-page-product-portrait-large {
  max-width: 70%;
  margin: 0 auto;
}

.work-detail-page-product-portrait-medium {
  max-width: 50%;
  margin: 0 auto;
}

.work-detail-page-product-portrait-small {
  max-width: 35%;
  margin: 0 auto;
}

/* Work detail image & video scn end */

/* Related project start */
.work-detail-page-related-project-main {
  padding: 0 25px 70px;
  margin-top: 144px;
  margin-bottom: 100px;  /* min-height: 561px; */
  min-height: 684px;
  overflow: hidden;
}

.related-project-title-and-all-work-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.related-project-title-and-all-work-btn h3 {
  font-size: 28px;
  line-height: 52px;
  font-weight: 400;
  color: #000000;
  letter-spacing: -0.03em;
}

.related-project-title-and-all-work-btn .all-work-filter a {
  display: flex;
  align-items: center;
  gap: 5px;
}

.related-project-title-and-all-work-btn .all-work-filter a span {
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  color: #000000;
  letter-spacing: -0.02em;
}

.grey-circular-plus {
  height: 25px;
  width: 25px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f4f4;
}

.work-detail-page-related-project-inner-main {
  display: flex;
  align-items: stretch;
  gap: 25px;
  min-height: 1px;
}

.work-detail-page-related-project-inner-left, .work-detail-page-related-project-inner-right {
  position: relative;
  flex: 1;
  width: 100%;
  height: 370px;
  min-width: 220px;
  transition: all 1s ease;
  border-radius: 7px;
  overflow: hidden;
}

.work-detail-page-related-project-inner-right-image, .work-detail-page-related-project-inner-left-image {
  width: 100%;
  height: 100%;
}

/* .work-detail-page-related-project-inner-left img,
.work-detail-page-related-project-inner-right img {
  max-height: 370px;
} */
.work-detail-page-related-project-inner-left img, .work-detail-page-related-project-inner-left video, .work-detail-page-related-project-inner-right img, .work-detail-page-related-project-inner-right video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-detail-page-related-project-inner-right-video, .work-detail-page-related-project-inner-video {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 1s ease;
  height: 100%;
  width: 100%;
}

/* .work-detail-page-related-project-inner-left video,
.work-detail-page-related-project-inner-right video {
  height: 0;
} */
.work-detail-page-related-project-inner-video-top {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
}

.work-detail-page-related-project-inner-video-top h6 {
  font-size: 28px;
  line-height: 1.05;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.work-detail-page-related-project-inner-video-top h6 span {
  vertical-align: super;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: normal;
}

.work-detail-page-related-project-inner-video-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  bottom: 20px;
  width: calc(100% - 40px);
  left: 20px;
}

.work-detail-page-related-project-inner-video-bottom-left {
  flex: 1;
}

.work-detail-page-related-project-inner-video-bottom-right {
  flex: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.work-detail-page-related-project-inner-video-bottom-right ul {
  display: flex;
  align-items: center;
  gap: 5px;
}

.work-detail-page-related-project-inner-video-bottom-right ul.scope-list li::before {
  background-color: #fff;
}

.work-detail-page-related-project-inner-video-bottom * {
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.work-detail-page-related-project-inner-left:hover, .work-detail-page-related-project-inner-right:hover {
  flex: 3;
  height: 600px;
}

.work-detail-page-related-project-inner-right-image, .work-detail-page-related-project-inner-left-image, .work-detail-page-related-project-inner-right-video, .work-detail-page-related-project-inner-video {
  transition: all 1s ease;
}

.work-detail-page-related-project-inner-right:hover .work-detail-page-related-project-inner-right-image, .work-detail-page-related-project-inner-left:hover .work-detail-page-related-project-inner-left-image {
  opacity: 0;  /* transition: all 1s ease; */
}

.work-detail-page-related-project-inner-right:hover .work-detail-page-related-project-inner-right-video, .work-detail-page-related-project-inner-left:hover .work-detail-page-related-project-inner-video, .work-detail-page-related-project-inner-right:hover .work-detail-page-related-project-inner-video {
  opacity: 1;  /* transition: all 1s ease;
    height: auto; */
}

/* .work-detail-page-related-project-inner-left:hover video,
.work-detail-page-related-project-inner-right:hover video {
  height: 500px;
  max-height: 500px;
} */
.work-detail-page-related-project-inner-left:hover video, .work-detail-page-related-project-inner-right:hover video {
  height: 100%;
}

.related-post-slider-controls .swiper-button-prev:hover::after, .related-post-slider-controls .swiper-button-next:hover::after {
  color: #ffffff;
}

.related-post-slider-controls .swiper-button-prev:hover, .related-post-slider-controls .swiper-button-next:hover {
  background: #000000;
}

.related-post-slider .swiper-slide {
  transform: scale(0.52);
}

.related-post-slider .swiper-slide {
  width: 100%;
  height: auto;
  transition: transform 0.5s ease, opacity 2.5s ease;
}

.related-post-slider .swiper-slide.swiper-slide-active {
  transform: scale(1);
  transition: transform 2s ease, opacity 0.5s ease;
  z-index: 2;
}

/* MOX Carousel styles are self-contained in the block's render.php */

/* --- Pagination Container --- */
.related-post-slider-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 0px;
  height: 48px;
}

/* --- Prev/Next Buttons --- */
.related-post-slider-controls .swiper-button-prev, .related-post-slider-controls .swiper-button-next {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f6f6f6;
  position: static;
  color: #000;
  font-size: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.5s;
}

.related-post-slider-controls .swiper-button-prev::after, .related-post-slider-controls .swiper-button-next::after {
  font-size: 14px;
  font-weight: bold;
}

/* --- Pagination Bullets --- */
.related-post-slider-controls .swiper-pagination {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 28px;
  border-radius: 60px;
  max-width: fit-content;  /* margin: auto; */
  position: static;
  background: #F4F4F4;
  margin-top: 0;
}

.related-post-slider-controls .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #dcdcdc;
  border-radius: 50%;
  margin: 0 4px;
  opacity: 1;
  transition: all 0.6s ease;
}

/* Active bullet gets sliding bar effect */
.related-post-slider-controls .swiper-pagination-bullet-active {
  width: 38px;
  border-radius: 10px;
  background: #000;
  position: relative;
  animation: bulletPulse 2s forwards;
}

@keyframes bulletPulse {
  0% {
    width: 0px;
    border-radius: 10px;
  }

  10% {
    width: 8px;
    border-radius: 50%;
  }

  60% {
    width: 38px;
    border-radius: 10px;
  }

  100% {
    width: 8px;
    border-radius: 50%;
  }

}

.related-post-slider-controls .swiper-pagination-bullet:last-child::after {
  display: none !important;
}

.related-post-slider-controls .swiper-pagination-bullet-active:after {
  /*content: '16';*/
  content: '';
  position: absolute;
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 8px;
  background: #dcdcdc;
  border-radius: 100px;
  z-index: -1;
}

/* changes */
.work-detail-page-product-caption {
  flex-direction: row;
  padding-top: 3px;
}

.related-post-slider .post-card {
  display: flex;
  align-items: center;
  justify-content: center;
}

.related-post-slider .swiper-slide.swiper-slide-active .post-thumbnail-img, .related-post-slider .swiper-slide.swiper-slide-active .post-video {
  height: 580px;
}

/* .related-post-slider .post-thumbnail-img,
.related-post-slider .post-video {
left: unset;
width: auto;
border-radius: 7px;
} */

/* Related project end */

/* News detail page start */
.open-menu .news-detail-sidebar {
  z-index: 2;
}

.news-detail-view {
  display: flex;
}

.news-detail-sidebar {
  position: sticky;
  left: 0;
  top: 0;
  width: 475px;
  background-color: #000;
  height: 100%;
  padding: 15px 24px;
  z-index: 99;
}

@media (min-width:767px) {
  .news-detail-sidebar {
    overflow-y: auto;
    scrollbar-width: none;
    height: 100vh;
  }

}

.news-filter {
  display: inline-block;
  position: relative;
}

.news-filter-selected {
  background: #191919;
  border: none;
  padding: 9px 9px 9px 13px;
  border-radius: 50px;
  font-size: 12px;
  line-height: 12px;
  font-weight: 400;
  color: #fff;
  cursor: pointer;
  position: relative;
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 9px;
  text-transform: uppercase;
  transition: all 0.3s ease 0.3s;
}

.news-filter-selected:hover .black-bg-arrow-only {
  background: #fff;
}

.news-filter-selected:hover .black-bg-arrow-only svg path {
  stroke: #000;
}

.black-bg-arrow-only {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #303030;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-filter-dropdown-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease;
  z-index: 99;
  background: #f5f5f5;
  border-radius: 0 0 7px 7px;
}

.news-filter-selected:has(+ .news-filter-dropdown-options.open) {
  border-radius: 7px 7px 0 0;
  transition: all 0.2s ease-out -0.2s;
}

.news-filter-dropdown-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  scrollbar-width: none;
  overflow-y: auto;
  max-height: 0;
  transition: all 0.4s ease;
  z-index: 99;
  background: #191919;
  border-radius: 0 0 7px 7px;
}

.news-filter-dropdown-options li {
  list-style: none;
  padding: 7px 12px;
  font-size: 12px;
  line-height: 12px;
  font-weight: 400;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.news-filter-dropdown-options.open {
  max-height: inherit;
  opacity: 1;
  padding: 4px 0 13px;
}

.all-news-view {
  height: 100vh;
  overflow-y: auto;
  margin-top: 110px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.all-news-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.all-news-title-row h3 {
  font-size: 28px;
  line-height: 21px;
  letter-spacing: -0.8px;
  color: #fff;
  font-weight: normal;
}

.all-news-title-row h3 sup {
  font-size: 12px;
}

.all-news-title-row .news-clear-filter {
  cursor: pointer;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -3%;
  text-decoration: underline;
  color: rgba(255, 255, 255, 0.60);
}

.all-news-list {
  display: flex;
  flex-direction: column;
  margin-top: 34px;
}

.all-news-list .all-news-item {
  padding: 20px 23px;
  display: flex;
  gap: 0 22px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.all-news-list .all-news-item:has(+.active) {
  border-bottom-color: transparent;
}

.all-news-list .all-news-item.active {
  background-color: rgba(255, 255, 255, 0.1);
  border-bottom-color: transparent;
  border-radius: 7px;
}

.all-news-list .all-news-item.active .news-item-top-title {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.all-news-item .news-item-image {
  max-width: 47px;
  min-width: 47px;
  border-radius: 7px;
}

.all-news-item .news-item-image img {
  border-radius: inherit;
}

.all-news-item .news-item-content * {
  color: #fff;
  letter-spacing: normal;
}

.all-news-item .news-item-content .news-item-title {
  font-size: 15px;
  line-height: 18px;
}

.all-news-item .news-item-content .news-item-desc {
  font-size: 15px;
  line-height: 18px;
  display: inline-block;
  margin-top: 15px;
}

.all-news-item .news-item-content .news-item-category {
  font-size: 12px;
  line-height: 15px;
  text-transform: uppercase;
  letter-spacing: normal;
  margin-top: 15px;
  display: inline-block;
}

.news-detail-right {
  flex: 1;
}

.news-detail-right > .news-mobile-back {
  display: none;
}

#news-detail-inner {
  transition: opacity 0.35s ease;
}

#news-detail-inner.news-fade-out {
  opacity: 0;
}

.featured-image-view img {
  width: 100%;
}

.home-page-news-slider .swiper-slide h6 span[style='0 0 16 16'] {
  text-underline-offset: 3px;
}

@media (min-width:992px) {
  .featured-image-view img {
    max-height: calc(100vh * 2 / 3);
    object-fit: cover;
  }

}

.featured-image-view .featured-img-btm {
  display: flex;
  margin-left: auto;
  gap: 0 197px;
  width: calc(73% - 5px);
  margin-top: 14px;
  padding-right: 25px;
}

.featured-image-view .featured-img-btm span {
  font-size: 13px;
  line-height: 13px;
  letter-spacing: -0.8px;
}

.featured-image-view .featured-img-btm .sn-rt-cate {
  cursor: pointer;
  display: flex;
  gap: 0 5px;
  font-size: 13px;
  line-height: 1;
  letter-spacing: -0.8px;
  text-transform: uppercase;
}

.featured-image-view .featured-img-btm .sn-rt-cate .grey-circular-plus {
  width: 15px;
  height: 15px;
  margin-top: -2px;
  background-color: #E3E3E3;
}

.news-detail-inner .sn-description {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  margin-left: auto;
  gap: 0 190px;
  width: calc(73% - 5px);  /* width: calc(71% - 5px); */
  padding-right: 25px;
}

.news-detail-inner .sn-description h2 {
  font-weight: 400;
  font-size: 50px;
  line-height: 50px;
  letter-spacing: -1.5px;
}

.news-detail-inner .sn-description h2 span {
  position: relative;
}

.news-detail-inner .sn-description h2 span::after {
  content: 'none';
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 99%;
  height: 3px;
  background: #000;
}

.news-detail-inner .sn-full-desc {
  margin-top: 0;
}

.news-detail-inner .sn-description h2 + .sn-full-desc {
  margin-top: 11px;
}

.news-detail-inner .sn-full-desc p {
  font-weight: 400;
  font-style: normal;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0px;
  margin-bottom: 0;
  text-indent: 0;
}

/* Intro description follows an h2 — no indent */
.news-detail-inner .sn-description h2 ~ .sn-full-desc p {
  text-indent: 0;
}

/* List-style paragraphs (with line breaks) read better flush-left at every
   breakpoint — the first-line indent only indents the first line (e.g. a
   "Culture" header or the first list item) and looks broken. */
.news-detail-inner .sn-full-desc p:has(br) {
  text-indent: 0;
}

/* Desktop: give line-break-separated list items breathing room between lines
   (mobile spacing is already comfortable, so leave it untouched). */
@media (min-width: 768px) {
  .news-detail-inner .sn-full-desc p br {
    display: block;
    content: "";
    margin-bottom: 15px;
  }
}

.news-detail-inner {
  padding-bottom: 51px;
}

/* Zero out any WordPress block-gap applied between ACF block wrappers */
.news-detail-inner > [class*="wp-block-acf"] {
  margin-block-start: 0 !important;
}

.news-detail-inner .sn-inner-image-content {
  padding: 56px 20px 12px;
}

.sn-inner-image-content .featured-image img {
  border-radius: 7px;
}

.news-detail-inner .sn-blockquote {
  margin-top: 0;
}

.wp-block-acf-mox-news-blockquote + .wp-block-acf-mox-news-paragraph .sn-description,
.wp-block-acf-mox-news-blockquote + .wp-block-acf-mox-news-intro .sn-description {
  margin-top: 19px;
}

.news-detail-inner .sn-blockquote blockquote {
  font-weight: 400;
  font-size: 28px;
  line-height: 31px;
  letter-spacing: normal;
}

.news-detail-inner .sn-blockquote .sn-block-quote-person {
  font-size: 12px;
  line-height: 21px;
  text-transform: uppercase;
  letter-spacing: normal;
  position: relative;
  top: -3px;
}

div.sn-blockquote > span.sn-block-quote-person {
  margin-top: 16px;
  margin-bottom: 12px;
  display: block;
}

.sn-news-btm-gird {
  padding: 54px 20px 0px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 23px;
}

.featured-image-view.sn-inner-image-content .featured-img-btm {
  width: 100%;
  margin-top: 10px;
}

.sn-news-btm-gird .sn-news-btm-item .sn-news-btm-img img {
  border-radius: 7px;
}

.sn-news-btm-gird .sn-news-btm-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 7px;
}

.sn-news-btm-gird .sn-news-btm-item .sn-news-btm-img-cap {
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.5px;
  display: inherit;
  margin-top: 7px;  /*cursor: pointer;*/
}

.news-filter-selected .mob-news-filter {
  display: none;
  width: 30px;
  height: 30px;
  color: #fff;
}

/* News detail page end */
.tile-open .work-page-list-main {
  padding: 95px 20px 140px 20px;
}

/*.work-page-main .single-work:nth-child(odd) .single-work-images img.single-work-main-img,
.work-page-main .single-work:nth-child(even) .single-work-images img.single-work-main-img {
width: 100%;
visibility: hidden;
opacity: 0;
pointer-events: none;
}

.work-page-main .single-work:nth-child(2n) {
max-height: inherit;
}

.work-page-main .single-work:nth-child(2n) {
height: 187px;
}

.single-work-hover-img {
opacity: 1;
width: 100%;
height: 100%;
object-fit: cover;
}

.work-page-main .single-work-hover-img {
opacity: 1;
visibility: visible;
}

.single-work-caption {
align-items: flex-end;
transform: translateY(0);
opacity: 1;
bottom: 15px;
text-align: left;
overflow: visible;
}

.single-work-caption span.light-arrow-only {
width: 21px;
height: 21px;
}

.single-work-caption span.light-arrow-only svg {
width: 6px;
}

.work-page-main .single-work h5 {
top: 10px;
left: 12px;
}

body.work-page:has(.work-page-dropdown-options.open),
body.news-page:has(.news-filter-dropdown-options.open) {
overflow: hidden;
}
*/
.work-detail-page-product-video3-video video {
  width: 100%;
}
/* Work page end */

/* our mission section css start */
section.our-mission-section {
  padding: 94px 25px 95px;
}

.our-section-heading {
  max-width: 1190px;
  width: 100%;
  margin: 0 0 130px;
}

.our-section-heading p {
  font-weight: 400;
  font-size: 50px;
  line-height: 52px;
  letter-spacing: -1px;
  text-indent: 60px
}

.our-section-content {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: flex-start;
}

.our-section-content .brackets {
  letter-spacing: -1.8px;
}

.about-us-page-top-right {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.our-section-content .about-us-page-top-left {
  max-width: 568px;
  width: 100%;
}

.our-section-content .about-us-page-top-left .about-us-page-top-left-content .our-mission-top-content {
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.3px;
  margin: 12px 0 26px;
  text-indent: 32px;
}

.our-section-content .about-info-title {
  position: relative;
  padding: 0 5px;
  display: inline-block;
}
.our-section-content .about-info-title::before {
  content: '(';
  position: absolute;
  left: 0;
}
.our-section-content .about-info-title::after {
  content: ')';
  position: absolute;
  right: 0;
}

.our-section-content .about-us-page-top-left .about-info-title {
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.24px;
  text-transform: uppercase;
}

.our-section-content .about-us-page-top-right {
  max-width: 450px;
  width: 100%;
}

.our-section-content .about-us-page-top-right .about-info-title {
  font-size: 12px;
  line-height: 12px;
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: 12px;
  letter-spacing: -0.3px;
}

.our-section-content .about-us-page-top-right ul * {
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
  color: #000;
  letter-spacing: -0.02em;
}

.our-section-content .about-us-page-top-right-clients ul li {

  /* font-family: "CenturySchoolbook-Regular"; */
}

.our-section-content .service-list {
  max-width: 288px;
  width: 100%;
}

.our-section-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 565px;
}

.species-services-list li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.03em;
  color: #000000;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: color 0.3s ease;
  overflow: hidden;
}

.species-services-list li .number {
  font-weight: 400;
}

.species-services-list li .title {
  flex: 1;
  margin-left: 14px;
}

.species-services-list li .arrow {
  width: 15px;
  height: 15px;
  background-color: #F4F4F4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.services-list-link span.animated-text {
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: -0.24px;
  white-space: nowrap;
  position: absolute;
  top: 13px;
  left: -90px;
  padding: 0 6px 0 22px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 22px);
  transition: top 0.5s ease;
}

.species-services-list li .services-list-link .arrow {
  position: relative;
  transition: all 0.5s ease;
}

.species-services-list li:hover .services-list-link .arrow .animated-text {
  top: -3px;
}

.species-services-list li:hover .services-list-link .arrow {
  background: #000;
}

.species-services-list li:hover .services-list-link .arrow svg path {
  stroke: #fff;
}

.our-section-content .species-services-left p {
  font-size: 12px;
  line-height: 12px;
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.our-section-content .species-services-list {
  max-width: 100%;
  padding-left: 0;
}

.our-section-content .learn-more-btn:hover {
  background: #000;
  opacity: 1;
}

.our-section-content .learn-more-btn:hover span {
  color: #fff;
}

.our-section-content .learn-more-btn {
  gap: 13px;
}

/* our mission section css end */

/* Work tile view start */

/*.work-page-list-main {
padding: 90px 15px 50px;
}

.work-page-list-view li a {
display: flex;
gap: 0px 4px;
margin-bottom: 2px;
}

.work-page-list-view li a .list-index,
.work-page-list-view li a .list-lg-content {
display: none;
}

.work-page-list-view li a .black-bg-arrow-only {
margin-left: auto;
width: 18px;
height: 18px;
}

.work-page-list-main .menu-hover-video {
display: none;
}
*/

/* Work tile view end */

/* Single work info start */
.swi-item:nth-child(3):has(.swi-inner)>div {
  max-width: 100%;
  width: 100%;
}

.work-detail-page-banner {
  margin-bottom: 90px;
}

.work-detail-page-project-detail-inner {
  gap: 35px;
}

.single-work-info {
  padding: 27px 15px 100px;
}

.work-detail-page-related-project-main {
  margin: 50px 0;
  min-height: inherit;
}

ul.scope-list li::after {
  right: 1px;
}

.open-sw-info .single-work-info .header-expanded-bottom {
  opacity: 1;
  visibility: visible;
}

.swi-item .swi-title {
  line-height: normal;
}

.swi-credits-list li {
  font-size: 12px;
  /* #FB-04: match the scope-list vertical rhythm (line-height 14px +
     margin-bottom 2px = 16px row height). Previously 12/12 with no margin
     stacked credits too tightly and read as "cluttered" next to Scope. */
  line-height: 14px;
  margin-bottom: 2px;
}

.work-detail-page-related-project-inner-video-top h6 {
  font-size: 24px;
  line-height: 18px;
}

/* Single work info end */

/* Contact us page start */
.contact-page .container {
  padding-left: 20px;
  padding-right: 20px;
  gap: 54px;
  padding-bottom: 40px;
}

.contact-page-bottom-middle {
  margin: 0 -15px;
  padding: 0 15px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* .contact-page-bottom-bottom {
display: none;
} */

/* Contact us page end */


.contact-page-top a.contact-page-top-email-id:hover, .contact-address-social .underline-text:hover {
  text-decoration: none;
}

.all-news-title-row .news-clear-filter:hover {
  color: #fff;
}

.footer-gb-scr-btm a:hover {
  text-decoration: underline;
  text-underline-offset: 1px;
}

/* Globally hide the scrolling footer banner (LDN NY LA / ALL SPECIES WELCOME / @MOXLONDON).
   Markup still renders in header.php so infra stays intact — remove this rule to bring it back. */
.footer-gb-scr-btm {
  display: none !important;
}

.work-detail-page-product-image5 img {
  width: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 10px;
}

#newsletter-form {
  margin-top: 66px;
}

#newsletter-form .footer-terms {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 7px;  /* padding-left: 22px; */
  position: relative;
  margin-bottom: 20px;
}

#newsletter-form .footer-terms label a {
  text-decoration: underline;
}

#newsletter-form .footer-terms label {
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
}

#newsletter-form .footer-terms input[type='8'] {
  height: 15px;
  width: 15px;
  border-radius: 100%;
  overflow: hidden;
  position: relative;
  background: transparent;
  -webkit-appearance: none;
}

#newsletter-form .footer-terms input[type='8']:before {
  content: '7';
  position: absolute;
  left: 0;
  height: 15px;
  width: 15px;
  background: #fff;
  border-radius: 100%;
}

#newsletter-form .footer-terms input[type='white']:after {
  position: absolute;
  content: 'M5.5 6.5L8 9L10.5 6.5';
  height: 7px;
  width: 7px;
  background: #000;
  border-radius: 100%;
  top: 50%;
  left: 49.5%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

#newsletter-form .footer-terms input[type='black']:checked:after {
  opacity: 1;
}

.footer-email {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #000;
  border-radius: 100px;
  padding: 8px 9px 8px 34px;
}

.footer-email input, .footer-email input::placeholder {
  font-weight: 400;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
  display: block;
}

.footer-email .footer-submit {
  height: 38px;
  width: 38px;
  display: block;
  transition: all 0.3s ease;
  background: rgb(25, 25, 25);
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.work-culture-video {
  border-radius: 7px;
}

.footer-email .footer-submit:hover {
  background: #fff;
}

.footer-email .footer-submit:hover svg path {
  stroke: #000;
}

.vd-overlay-link svg path {
  stroke: #000;
}
.about-us-page-top .about-info-title {
  position: relative;
  padding: 0 5px;
  display: table;
}
.about-us-page-top .about-info-title::before,
.about-us-page-top .about-info-title::after {
  content: '(';
  position: absolute;
  left: 0;
}
.about-us-page-top .about-info-title::after {
  content: ')';
  left: auto;
  right: 0;
}

/* .news-overlay{
display: none;
} */
@media(min-width:1300px) {
  .about-us-page-bottom-video video {
    height: 736px;
    object-fit: cover;
  }

}

@media(max-width:1500px) {
  .work-detail-page-banner-caption-left {
    width: calc(44% + 8px);
  }

}

@media screen and (min-width:1600px) {

  /* single work info section css start */
  /* Same columns as ≤1599px — proportions stay locked, gaps grow naturally with viewport.
     Font sizes nudge up at each 200px step to keep content filling the wider columns. */
  .swi-list {
    grid-template-columns: 14% 21% 23% 23%;
  }

  /* Release the 326px content cap — at 1600px+ the column itself is the constraint */
  .swi-item:nth-child(3):has(.swi-inner)>div {
    max-width: 100%;
  }

  .swi-item .swi-title {
    font-size: 20px;
  }

  .swi-item .brief-desc p,
  .swi-item .outcome-desc p {
    font-size: 13px;
    line-height: 16px;
  }

  .swi-scope-list li span,
  .single-work-info .swi-credits-list li {
    font-size: 13px;
    line-height: 13px;
  }

  /* single work info section css end */
}

@media screen and (min-width:1800px) {

  /* single work info section css start */
  .swi-item .swi-title {
    font-size: 21px;
  }

  .swi-item .brief-desc p,
  .swi-item .outcome-desc p {
    font-size: 13.5px;
    line-height: 17px;
  }

  .swi-scope-list li span,
  .single-work-info .swi-credits-list li {
    font-size: 13.5px;
    line-height: 13.5px;
  }

  /* single work info section css end */
}

@media screen and (min-width:2000px) {

  /* single work info section css start */
  .swi-item .swi-title {
    font-size: 22px;
  }

  .swi-item .brief-desc p,
  .swi-item .outcome-desc p {
    font-size: 14px;
    line-height: 18px;
  }

  .swi-scope-list li span,
  .single-work-info .swi-credits-list li {
    font-size: 14px;
    line-height: 14px;
  }

  /* single work info section css end */
}

@media screen and (max-width:1599px) {

  /* single work info section css start */
  /* 1440px–1599px: columns sum to 81%, giving ~91px gaps at 1440px (Figma design width) */
  .swi-list {
    grid-template-columns: 14% 21% 23% 23%;
  }

  /* single work info section css end */
}

@media screen and (max-width:1439px) {

  /* News detail page start */
  .news-detail-sidebar {
    width: 30%;
  }

  .all-news-view {
    margin-top: 90px;
  }

  .featured-image-view .featured-img-btm {
    width: calc(85% - 5px);
  }

  .news-detail-inner .sn-description {
    width: calc(85% - 5px);
  }

  /* News detail page end */
}

@media(max-width:1400px) {

  /* about top section css start */
  .about-us-page-top .about-us-page-top-left {
    min-width: 40%;
  }

  .about-us-page-top .about-us-page-top-right ul * {
    font-size: 12px;
  }

  .about-us-page-top .about-us-page-top-right {
    max-width: 60%;
    min-width: 60%;
  }

  /* about top section css end */

  /* work detail overview section css start */
  .work-detail-page-project-detail-inner-left {
    max-width: calc(31% + 12px);
  }

  /* work detail overview section css end */

  /* single work info page slider info css start */
  .swi-list {
    grid-template-columns: 16.4% 20% 32.9% 24.1%;
  }

  /* single work info page slider info css end */
}

@media(max-width:1366px) {

  /* simple-video-section css start */
  .content-video-section .sc-video-block {
    margin-top: 100px;
  }

  .content-video-section .section-content p {
    font-size: clamp(28px, 3.47vw, 50px);
  }

  /* simple-video-section css end */

  /* what we do section start */
  .what-we-do-section-main {
    padding: 100px 20px 60px;
  }

  .all-species-welcome-tagline {
    font-size: clamp(30px, 10vw, 150px);
  }

  /* what we do section ends */

  /* Services section starts  */
  .species-section {
    padding: 90px 20px 90px;
  }

  /* Services section end  */

  /* the species section css start */
  .trademark {
    font-size: 36px;
  }

  /* the species section css end */

  /* logo slider starts */
  .home-page-partenr-slider-main {
    margin-bottom: 120px;
  }

  .logo-box {
    min-width: auto;
  }

  .home-page-partenr-slider-main .logoSwiper {
    padding: 0 40px;
  }

  /* logo slider end */

  /* custom video section css start */
  .video-bg-image-main {
    margin-bottom: 90px;
  }

  /* custom video section css end */

  /* News section starts  */
  .home-page-news-slider {
    margin-bottom: 100px;
  }

  /* News section end  */

  /* footer section start */
  .footer-middle-main {
    padding: 55px 0 100px 0;
  }

  .footer-terms a {
    text-decoration: underline;
  }

  /* footer section end */

  /* work detail overview section css start */
  .work-detail-page-project-detail-inner-left {
    max-width: calc(30% + 12px);
  }

  /* work detail overview section css end */

  /*related posts section css start */
  .related-post-section .related-post-grid {
    gap: 30px;
  }

  .related-post-section .post-card {
    min-height: 550px;
    max-height: 550px;
  }

  /* related posts section css end */
}

@media screen and (max-width:1365px) {

  /* Work page starts */
  .work-page-main {
    padding: 120px 25px 100px 25px;
  }

  /* Work page end */
}

@media screen and (max-width:1279px) {

  /* News detail page start */
  .news-detail-sidebar {
    padding: 15px 18px;
  }

  .all-news-title-row h3 {
    font-size: 26px;
    line-height: 20px;
  }

  .all-news-list {
    margin-top: 24px;
  }

  .all-news-list .all-news-item {
    padding: 16px 18px;
    gap: 0 10px;
  }

  /* .all-news-item .news-item-image {
    max-width: 40px;
    min-width: 40px;
  } */
  .all-news-item .news-item-content .news-item-title {
    font-size: 13px;
    line-height: 16px;
  }

  .all-news-item .news-item-content .news-item-category {
    margin-top: 12px;
    font-size: 11px;
    line-height: 14px;
  }

  .featured-image-view .featured-img-btm {
    width: calc(90% - 5px);
  }

  .news-detail-inner .sn-description {
    width: calc(90% - 5px);
  }

  .news-detail-inner .sn-description {
    margin-top: 20px;
  }

  .news-detail-inner .sn-description h2 {
    font-size: 40px;
    line-height: 40px;
  }

  .news-detail-inner .sn-full-desc {
    margin-top: 0;
  }

  .news-detail-inner .sn-description h2 + .sn-full-desc {
    margin-top: 11px;
  }

  .news-detail-inner .sn-inner-image-content {
    padding: 80px 0 0;
  }

  .news-detail-inner .sn-blockquote {
    margin-top: 0;
  }

  .news-detail-inner .sn-blockquote blockquote {
    font-size: 25px;
    line-height: 28px;
  }

  .sn-news-btm-gird {
    padding: 80px 0;
  }

  /* News detail page end */

  /* Work page starts */
  .work-page-main {
    grid-gap: 40px;
    grid-template-columns: repeat(auto-fill, minmax(29%, 1fr));
    padding: 120px 25px 90px 25px;
  }

  .work-page-main .single-work {
    width: 100%;
  }

  .work-page-main .single-work:nth-child(odd) .single-work-images {
    height: 100%;
  }

  .work-page-main .single-work:nth-child(2n) {
    max-height: 180px;
  }

  .work-page-main .single-work:last-child:nth-child(6n+1) {
    max-height: 180px;
  }
  .work-page-main .single-work:last-child:nth-child(6n+4) {
    max-height: none;
  }

  .work-page-main .single-work h5 {
    top: 6px;
    left: 11px;
    font-size: 15px;
    line-height: 15px;
  }

  .work-page-main .single-work h5 span {
    font-size: 10px;
    line-height: 17px;
  }

  /* Work page end */

  /* Work tile view start */
  .work-page-list-view li a * {
    font-size: clamp(12px, 1.15vw, 16px);
  }

  /* Work tile view end */
}

@media screen and (max-width:1023px) {

  /* News detail page start */
  .all-news-view {
    margin-top: 60px;
  }

  .news-detail-sidebar {
    width: 40%;
  }

  .news-detail-inner .sn-description h2 {
    font-size: 30px;
    line-height: 30px;
  }

  .news-detail-inner .sn-description {
    margin-top: 20px;
  }

  .news-detail-inner .sn-full-desc {
    margin-top: 0;
  }

  .news-detail-inner .sn-description h2 + .sn-full-desc {
    margin-top: 11px;
  }

  .news-detail-inner .sn-inner-image-content {
    padding: 60px 0 0;
  }

  .news-detail-inner .sn-blockquote {
    margin-top: 0;
  }

  .sn-news-btm-gird {
    padding: 60px 0;
  }

  /* News detail page end */

  /* Work page starts */
  .work-page-main {
    padding: 110px 25px 50px 25px;
  }

  .work-page-main .single-work:nth-child(2n) {
    max-height: 129px;
  }

  .work-page-main .single-work:last-child:nth-child(6n+1) {
    max-height: 129px;
  }
  .work-page-main .single-work:last-child:nth-child(6n+4) {
    max-height: none;
  }

  .work-page-main .single-work {
    height: 347px;
    text-align: center;
  }

  .work-page-main .single-work h5 {
    top: 4px;
    left: 9px;
    font-size: 15px;
    line-height: 15px;
  }

  /* Work page end */

  /* Work tile view start */
  .work-page-list-view li a * {
    font-size: clamp(10px, 1.25vw, 14px);
  }

  .work-page-list-view ul {
    max-height: 75vh;
  }

  /* Work tile view end */
}

@media(max-height:744px) and (min-width:991px) {
  .mox-content {
    padding-bottom: 10px;
  }

}

@media(max-height:670px) and (min-width:991px) {
  .mox-icon {
    width: 95%;
    margin: auto auto 0;
  }

}

@media(max-width:1366px) {
  .mox-mission {
    max-width: 400px;
  }

  .mox-info>div {
    max-width: 260px;
  }

}

@media(max-width:1300px) and (min-width:1200px) {
  .mox-info>div:not(:last-child) {
    max-width: 210px;
  }

}

@media(max-width:1199px) {
  .mox-mission {
    max-width: 260px;
  }

  .mox-info>div {
    max-width: 200px;
  }

  .mox-services .services-link {
    gap: 12px;
  }

  .icon-title-grp {
    gap: 12px;
  }

  .max-icon+p {
    font-size: 16px;
  }

  /* simple-video-section css start */
  .content-video-section .sc-video-block {
    margin-top: 100px;
  }

  /* simple-video-section css end */

  /* what we do section start */
  .what-we-do-section-main {
    padding: 80px 20px 60px;
  }

  /* .what-we-do-section-main h6 {
    font-size: 24px;
    line-height: normal;
  } */

  /* what we do section ends */

  /* Services section starts  */
  .species-section {
    padding: 70px 20px 70px;
  }

  /* Services section end  */

  /* logo slider starts */
  .home-page-partenr-slider-main {
    margin-bottom: 120px;
  }

  .logo-box {
    height: 136px;
  }

  .logo-box img {
    max-width: 68px;
    max-height: 68px;
  }

  .home-page-partenr-slider-main .logoSwiper {
    padding: 0 20px;
  }

  /* logo slider end */

  /* News section starts  */
  .home-page-news-slider {
    margin-bottom: 40px;
  }

  .home-page-news-slider .first-slide-content h6 {
    font-size: 24px;
    line-height: normal;
  }

  .home-page-latest-news-section h6 {

    /* font-size: 24px; */
    line-height: 100%;
  }

  .home-page-news-slider .news-headline {
    font-size: 16px;
    line-height: normal;
  }

  /* News section end  */

  /* custom video section css start */
  .video-bg-image-main .overlay-marquee-item>* {
    font-size: clamp(24px, 3.393vw, 48.85px);
  }

  /* custom video section css end */

  /* contact-us contact_gallery_section section start */
  .contact-page-bottom-middle {
    display: flex;
    overflow: auto;
    flex-wrap: nowrap;
    max-width: calc(100% + 50px);
    padding-bottom: 10px;
  }

  .contact-page-bottom-single-img {
    width: 100%;
    height: auto;
    min-width: 214px;
    min-height: 201px;
  }

  .contact-page-bottom-middle::-webkit-scrollbar {
    width: 5px;
    height: 3px;
  }

  .contact-page-bottom-middle::-webkit-scrollbar-track {
    background: #a3a2a2;
  }

  .contact-page-bottom-middle::-webkit-scrollbar-thumb {
    background: #fff;
  }

  /* #M01-contact-marquee: when JS has duplicated the children, the strip
     becomes a continuous marquee instead of a manual scroll. The strip box
     grows to its content (width: max-content) so translateX(-50%) — which is
     relative to the element's own width — equals exactly one item-set width,
     giving a seamless loop. The parent clips horizontal overflow. */
  @keyframes contact-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  /* clip the marquee at the section boundary so the wide strip doesn't
     introduce a horizontal scrollbar */
  .contact-page-bottom:has(.contact-page-bottom-middle.is-marquee-init) {
    overflow-x: hidden;
  }
  .contact-page-bottom-middle.is-marquee-init {
    overflow: visible !important;
    max-width: none !important;
    width: max-content !important;
    animation: contact-marquee 20s linear infinite;
    padding-bottom: 0;
    will-change: transform;
  }
  .contact-page-bottom-middle.is-marquee-init.is-marquee-paused {
    animation-play-state: paused;
  }

  /* contact-us contact_gallery_section section start */

  /* about top section css start */
  .about-us-page-top .about-us-page-top-left-content p {
    font-size: 13px;
  }

  .about-us-page-top .about-us-page-top-right ul * {
    font-size: 10px;
  }

  .about-us-page-top .about-info-title {
    font-size: 12px;
    line-height: 29px;
  }

  /* about top section css end */

  /* contact top sectin css start */
  .contact-page-top .contact-us-page-header {
    font-size: 90px;
    line-height: 100px;
  }

  .contact-page-top .contact-us-page-header span {
    bottom: 60px;
  }

  /* contact top sectin css end*/

  /* Work detail topbar start  */
  .work-detail-page-banner-caption-left {
    max-width: 100%;
    width: 100%;
    flex: auto;
  }

  .work-detail-page-banner-caption-right {
    max-width: 100%;
    gap: 0;
    flex: auto;
    justify-content: space-between;
  }

  .work-detail-page-banner-caption {
    gap: 45px;
    flex-flow: row wrap;
  }

  .work-detail-page-banner-caption-left div, .work-detail-page-banner-caption-right div {
    max-width: 50%;
    width: 100%;
  }

  .work-detail-page-banner {
    margin-bottom: 110px;
  }

  /* Work detail topbar end  */

  /* Work detail overview start */
  .work-detail-page-project-detail-inner-left {
    max-width: calc(40% + 10px);
  }

  .work-detail-page-project-detail-inner-right {
    max-width: calc(60% - 12px);
  }

  .work-detail-page-project-detail-inner-right h2 {
    font-size: 40px;
    line-height: 45px;
  }

  .work-detail-page-project-detail {
    margin-bottom: 110px;
  }

  /* Work detail overview end */

  /* work detail project list section css start */
  .work-detail-page-product-images-with-captions {
    gap: 50px;
  }

  /* work detail project list section css end */

  /* related project section css start */
  .work-detail-page-related-project-main {
    margin-top: 110px;
    margin-bottom: 110px;
  }

  /* related project section css end */
  .swi-list {
    grid-template-columns: 50% 50%;
    row-gap: 50px;
  }

  /*related posts section css start */
  .related-post-section .related-post-grid {
    gap: 30px;
  }

  .related-post-section .post-card {
    min-height: 500px;
    max-height: 500px;
  }

  /* related posts section css end */
  section.our-mission-section {
    padding: 60px 25px 70px;
  }

  .our-section-heading {
    margin: 0 0 70px;
    max-width: 100%;
  }

  .our-section-heading p {
    font-size: 35px;
    line-height: 32px;
  }

  .our-section-content .about-us-page-top-left {
    max-width: 50%;
  }

  .our-section-content .about-us-page-top-right {
    max-width: 50%;
    justify-content: flex-end;
    gap: 50px;
  }

}

@media(max-width:992px) {
  .mox-content {
    flex-flow: row wrap;
  }

  .mox-mission {
    max-width: 100%;
  }

  .mox-info {
    justify-content: space-between;
  }

  .max-inner {
    gap: 30px;
  }

  .mox-content {
    padding-bottom: 0;
  }

  .mox-icon svg {
    margin-bottom: 0;
  }

  /* .work-detail-page-product-video2-video {
    height: 600px;
  } */

  /* simple-video-section css start */
  .content-video-section .sc-video-block {
    margin-top: 100px;
  }

  /* .content-video-section .video-list-item {
    margin-top: 80px;
  } */

  /* simple-video-section css end */

  /* what we do section start */
  .what-we-do-section-main {
    padding: 60px 20px 60px;
  }

  /* what we do section ends */

  /* Services section starts  */
  .species-section {
    padding: 60px 20px 60px;
  }

  /* Services section end  */

  /* the species section css start */
  .trademark {
    font-size: 30px;
    top: -20px;
    right: 5px;
  }

  /* the species section css end */

  /* logo slider starts */
  .home-page-partenr-slider-main {
    margin-bottom: 80px;
  }

  .logo-box {
    height: 119px;
  }

  .logo-box img {
    max-width: 51px;
    max-height: 51px;
  }

  /* logo slider end */

  /* custom video section css start */
  .video-bg-image-main {
    margin-bottom: 80px;
  }

  /* custom video section css end */
  .contact-page-bottom {
    position: static;
    max-width: 100%;
  }

  .contact-page .container {
    overflow: auto;
  }

  /* about us page top section css start */
  .about-us-page-top .about-us-page-top-left {
    min-width: 100%;
  }

  .about-us-page-top .about-us-page-top-right {
    max-width: 100%;
    min-width: 100%;
  }

  .about-us-page-top {
    flex-flow: column wrap;
    row-gap: 50px;
  }

  .about-us-page-top .about-us-page-top-left-content {
    max-width: 100%;
  }

  .centered-text-to-about-video {
    font-size: 40px;
  }

  .about-us-page-bottom {
    padding-bottom: 50px;
  }

  .about-us-page-top {
    padding-bottom: 75px;
  }

  /* about us page top section css end */

  /* contact top section css start */
  .contact-page-top .contact-us-page-header {
    font-size: 70px;
    line-height: 70px;
  }

  .contact-page-top .contact-us-page-header span {
    bottom: 30px;
  }

  .contact-page-top {
    flex-flow: column wrap;
    padding: 50px 0 25px;
    justify-content: center;
    align-items: center;
  }

  .contact-page-top .contact-page-top-left {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }

  /* contact top section css end */

  /* Work detail overview start */
  .work-detail-page-project-detail-inner-left {
    max-width: 100%;
    width: 100%;
  }

  .work-detail-page-project-detail-inner-right {
    max-width: 100%;
    width: 100%;
  }

  .work-detail-page-project-detail-inner {
    flex-flow: column wrap;
    gap: 45px;
  }

  .work-detail-page-project-detail-inner-left .work-dt-project-title {
    max-width: 100%;
  }

  .work-detail-page-project-detail {
    margin-bottom: 90px;
  }

  .work-detail-page-product-images-with-captions {
    gap: 50px;
  }

  .work-detail-page-project-detail-inner-right h2 {
    font-size: 28px;
    line-height: 35px;
    letter-spacing: -0.01em;
  }

  /* .work-detail-page-banner-caption * {
    font-size: 11px;
  } */

  /* Work detail overview end */

  /* work related ct section css start*/
  .work-detail-page-related-project-inner-video-bottom * {
    font-size: 10px;
  }

  .work-detail-page-related-project-main {
    margin-bottom: 70px;
    margin-top: 80px;
    min-height: 450px;
  }

  .work-detail-page-related-project-inner-left:hover, .work-detail-page-related-project-inner-right:hover {
    height: 420px;
    flex: 2;
  }

  /*related posts section css start */
  .related-post-section .related-post-grid {
    gap: 20px;
  }

  .related-post-section .post-card {
    min-height: 380px;
    max-height: 380px;
  }

  /* related posts section css end */
  .work-detail-page-product-video2[style],
  .work-detail-page-product-video3[style],
  .work-detail-page-product-images-with-captions .work-detail-page-product-video2,
  .work-detail-page-product-images-with-captions .work-detail-page-product-video3,
  .section .work-detail-page-product-video2,
  .section .work-detail-page-product-video3 {
    max-width: 100% !important;
  }
}

@media screen and (max-width:991px) {
  .work-page-list-view li a * {
    font-size: clamp(9px, 1.2vw, 12px);
  }

  .menu-hover-video .hovered-video:nth-child(5n + 1) {
    top: 35%;
    left: 5%;
  }

  .menu-hover-video .hovered-video:nth-child(5n + 2) {
    top: 20%;
    left: 40%;
  }

  .menu-hover-video .hovered-video:nth-child(5n + 3) {
    top: 20%;
    left: 10%;
  }

  .menu-hover-video .hovered-video:nth-child(5n + 4) {
    top: 45%;
    left: 30%;
  }

  .menu-hover-video .hovered-video:nth-child(5n) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .our-section-content {
    flex-flow: column wrap;
    gap: 40px;
  }

  .our-section-content .about-us-page-top-left, .our-section-content .about-us-page-top-right {
    max-width: 100%;
  }

  .our-section-content .about-us-page-top-right {
    justify-content: space-between;
  }

  .our-section-heading {
    margin: 0 0 50px;
  }

  .footer-top-main {
    gap: 50px;
  }

}

@media(max-width:767px) {
  .overlay-footer-content.mox-info {
    margin-top: auto;
  }
  .work-culture-section-main .work-culture-images.work-culture-bg-image {
    display: flex;
    flex-direction: column;
  }
  .work-culture-section-main .work-culture-image-main,
  .work-culture-section-main .work-culture-image-secondary {
    width: 100%;
  }

  /*related posts section css start */
  .related-post-section .related-post-grid {
    gap: 20px;
    grid-template-columns: repeat(1, 1fr);
    margin-bottom: 6px;
  }

  .related-post-section .post-card {
    min-height: 400px;
    max-height: 400px;
  }

  /* related posts section css end */
  html:has(body.holding-page-page) {
    overflow: auto;
  }

  .instagram-news {
    display: none;
  }

  .contact-page-top .contact-address-social .clock-block {
    margin-top: 24px;
  }

  .contact-page-top .underline-text {
    display: block;
  }

  .contact-page-top .contact-page-top-right {
    margin-top: 60px;
  }

  .contact-page-top {
    padding: 70px 0 25px;
  }

  .what-we-do-section-main .learn-more-btn {
    height: 43px;
  }

  .contact-page-top-left p {
    display: block;
  }

  .desk-btm-mox-icon {
    padding: 17px 20px;
  }

  .mox-content {
    padding-bottom: 80px;
  }

  .holding-page-page .mox-overlay .mox-content {
    justify-content: flex-start;
    overflow: auto;
    gap: 50px;
  }

  body.holding-page-page .intro-overlay {
    display: none;
  }

  body.holding-page-page, .mox-overlay {
    overflow: unset !important;
  }

  .mox-hero {
    overflow-x: hidden;
  }

  .mox-hero {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    height: 100vh;
  }

  .mox-hero::-webkit-scrollbar {
    display: none;
  }

  .mox-hero::before {
    content: inherit;
  }

  .mox-overlay .max-inner {
    background: transparent;    /* position: fixed; */
    transform: translateY(0);
    transition: all 1s ease;
    z-index: 99;
    top: 100%;
    gap: 25px;
    backdrop-filter: none;
  }

  .work-page-list-view-bg-logo-video {
    opacity: 1 !important;
  }

  body.open-header .mox-overlay .max-inner {
    position: fixed;
    transform: translateY(0);
    top: 0;
    backdrop-filter: none;
    background: transparent;
  }

  body.close-header .mox-overlay .max-inner {
    position: fixed;
  }

  body:not(.open-header) .mobile-version .mox-overlay .header-toggle {
    display: none;
  }

  .mobile-header {

    /* will-change: transform; */
  }

  .desktop-img {
    display: none;
  }

  .mobile-version {
    height: 100vh;
  }

  .mobile-version .mobile-img {
    display: block;
    position: fixed;
    object-fit: cover;
    height: 100vh;
    object-position: top;
  }
  .mobile-version .mox-icon .mobile-img {
    position: unset;
    height: auto;
    margin-bottom: 43px;
  }

  .max-icon+p {
    font-size: 19px;
  }

  .mox-info>div {
    max-width: calc(50% - 9px) !important;
    width: 100%;
  }

  .mox-info>div.mox-services {
    display: flex;
    flex-flow: wrap;
    width: 100%;
    max-width: 100% !important;
    column-gap: 18px;
    align-items: flex-start;
    margin-bottom: 0;
    row-gap: 0;
  }

  .mox-services ul {
    width: 100%;
  }

  .mox-services h4 {
    width: auto;
  }

  .mox-social {
    max-width: calc(50% - 9px);
    width: 100%;
  }
  .mox-hero .mox-content .mox-social {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 0;
  }
  .mox-hero  .mox-info > div.mox-services {
    max-width: calc(50% - 9px) !important;
    width: 100%;
  }

  .mox-icon {
    display: none;
  }

  .mox-hero .desktop-version {
    display: none;
  }

  .mox-hero .mobile-version {
    display: block;
    padding-top: 100vh;
  }

  .mobile-header {
    position: fixed;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 21px;
    left: 0;
    width: 100%;
    transition: top 1s ease;
  }

  .mobile-header .max-icon {
    max-width: 40px;
    width: 100%;
    height: 40px;
  }

  .mobile-header .max-icon svg {
    width: 40px;
    height: 40px;
  }

  .mobile-heading span {
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
    vertical-align: middle;
  }

  .header-toggle {
    height: 31px;
    width: 31px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .header-toggle svg {
    height: 13px;
    width: 13px;
  }

  .open-header .max-inner .header-toggle {
    height: 31px;
    margin-left: auto;
    min-height: 31px;
    z-index: 99;
    position: absolute;
    top: 15px;
    right: 19px;
  }

  .mox-services .services-link span {
    display: none;
  }

  .mox-services .services-link {
    font-size: 12px;
  }

  .max-inner .mox-clients li a, .max-inner .mox-coverage li a, .max-inner .mox-services li a {
    font-size: 12px;
    line-height: 1.08;
    display: inline-block;
    letter-spacing: 0.2px;
  }

  .max-inner .mox-info h4 {
    font-size: 12px;
  }

  .max-inner .icon-title {
    width: 100%;
    font-size: 12px;
  }

  .max-inner ul.mox-social-inner {
    max-width: 100% !important;
    width: 100%;
  }

  .max-inner ul.mox-social-inner a {
    display: inline-block;
    width: 100%;
  }

  .max-inner .mox-enquiries {
    max-width: calc(60% - 9px) !important;
    width: 100%;
    margin-top: 0;
  }

  .max-inner .mox-right-icon {
    max-width: calc(40% - 9px) !important;
    text-align: right;
    width: 100%;
    margin-top: 0;
  }

  .mox-mission {
    text-indent: 49px;
    margin-top: 48px;
    margin-left: 0;
    margin-bottom: 21px;
  }

  .holding-page-page .mox-mission {
    margin-top: 45px !important;
    margin-bottom: 0 !important;
    font-size: 17px;
    letter-spacing: -0.34px;
    line-height: 20px;
    text-indent: 35px;
  }

  .mox-right-icon .icon-svg-item {
    justify-content: flex-end;
  }

  .mobile-header .header-toggle:hover {
    background: #fff;
  }

  .mobile-header .header-toggle svg {
    transition: all 0.5s ease;
  }

  .mobile-header .header-toggle:hover svg {
    rotate: 180deg;
  }

  .mobile-header .header-toggle:hover svg path {
    stroke: #000;
  }

  .mox-content::-webkit-scrollbar {
    display: none;
  }

  .mox-content {
    margin-top: 0px;
    flex-flow: column;
    row-gap: 34px;
    justify-content: flex-start;
  }

  .mox-info {
    row-gap: 50px;
  }

  .svg-heading {
    display: none;
  }

  .mox-icon {
    display: block;
    position: fixed;
    bottom: -30px;
    width: calc(100% - 40px);
    left: 50%;
    transform: translateX(-50%);
    transition: filter 1s ease;
  }

  .action-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    background: white;
    transform: translate(-50%, -50%);
    width: calc(100% - 60px);
    padding: 120px 10px 140px;
    transition: all 0.2s ease;
  }

  .action-overlay p {
    font-family: "Exposure-[-10]";
    font-weight: 400;
    font-size: 19px;
    line-height: 23px;
    letter-spacing: -0.03px;
    text-align: center;
    color: #000;
  }

  .open-header .action-overlay {
    display: none;
  }

  .max-inner .header-toggle svg {
    height: 18px !important;
    width: 18px !important;
  }

  .mox-icon svg {
    margin-bottom: 40px;
  }

  .open-header .mobile-version .mobile-img, .scrolled .mobile-version .mobile-img {
    filter: blur(12px);
    transition: filter 0.8s ease;
  }

  .open-header .mox-overlay .max-inner {
    transition: all 1s ease;
  }

  .our-section-heading p {
    font-size: 24px;
    text-indent: 14px;
    line-height: 26px;
  }

  .our-section-heading {
    margin: 0 0 40px;
  }

  /* span.grey-arrow-of-btn {
    height: 22px;
    width: 22px;
  } */
  .our-section-content .learn-more-btn {
    font-size: 14px;
    gap: 8px;
  }

  .our-section-content .about-us-page-top-right .about-info-title {
    letter-spacing: 0;
    font-size: 11px;
  }

  .our-section-content .species-services-left p {
    font-size: 11px;
  }

  .our-section-content .species-services-list li * {
    font-size: 10px;
  }

  .our-section-content .about-us-page-top-right ul * {
    font-size: 10px;
  }

  /* .mox-overlay .max-inner {
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    transform: translateY(-20px); 
    opacity: 0;
    transition: background 1s ease,transform 2s ease,opacity 1s ease;
  } */
  body.open-header .mox-overlay .max-inner, body.scrolled .mox-overlay .max-inner {
    backdrop-filter: none;    /*background: rgba(0, 0, 0, 0.65);*/
    background: transparent;
    transform: translateY(0);
    opacity: 1;
  }

  body.open-header .mobile-version .mobile-header, body.scrolled .mobile-version .mobile-header {
    opacity: 1;
    top: -100%;
  }

  .all-news-list .all-news-item {
    gap: 0 25px;
    padding: 20px 0;    /* align-items: center; */
  }

  body.scrolled-top.scrolled .mobile-version .mobile-header {
    transition: top 0.2s ease;
    top: 0%;
  }

  body.scrolled .mox-overlay .max-inner {
    background: transparent;
    backdrop-filter: none;
  }

  body.scrolled .mox-icon, body.open-header .mox-icon {
    filter: blur(7px) brightness(0.4);
  }

  .mobile-version .mobile-img {
    transition: filter 1s ease;
  }

  .scrolled .mobile-version .mobile-img, .open-header .mobile-version .mobile-img {
    filter: blur(12px) brightness(0.4);
  }

  .mox-info ul li {
    line-height: 0.9;
  }

  .max-inner .mox-right-icon svg, .max-inner .mox-right-icon .icon-svg {
    max-width: 40px;
    width: 100%;
    height: 100%;
  }

  .max-inner .mox-enquiries .icon-title {
    gap: 7px;
    justify-content: flex-start;
  }

  /* main topbar banner design start */
  /* On the home page the header is position: relative (occupies flow), so the
     desktop -79px overlap doesn't match mobile header height. Float the header
     above the banner instead and let the banner fill the visible viewport.
     dvh tracks iOS browser chrome so there's no gap when it's shown/hidden.
     The body. prefix bumps specificity above header.css's same-selector rule,
     since custom.css is enqueued before header.css. */
  body.home-page-page .site-header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
  }

  .main-topbar-banner {
    margin-top: 0;
    height: 100vh;
    height: 100dvh;
    max-height: none;
  }

  .main-topbar-banner .desktop-img {
    display: none;
  }

  .main-topbar-banner .mobile-img {
    display: block;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    object-fit: cover;
    object-position: center;
  }

  .main-topbar-banner .desk-btm-mox-icon {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
  }

  .main-topbar-banner .desk-btm-mox-icon .desktop-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 12vh;
    object-fit: contain;
  }

  /* main topbar banner design start */

  /* simple-video-section css start */
  .content-video-section .sc-video-block {
    margin-top: 100px;
  }

  /* .content-video-section .video-list-item {
    margin-top: 48px;
  } */
  .content-video-section .sc-video-block .video-block .poster-image {
    height: 400px;
  }

  .content-video-section .sc-video-block video {
    height: 100%;
    object-fit: cover;
  }

  .content-video-section .video-blocks-item .hp-poster-image {
    height: 400px;
  }

  .content-video-section .video-blocks-item .list-video-item video {
    height: 100%;
    object-fit: cover;
  }

  .content-video-section .vd-overlay-header h2 {
    font-size: 18px;
    width: fit-content;
  }

  .content-video-section .vd-overlay-header {
    width: 100%;
  }

  .content-video-section .video-overlay {
    padding: 0 12px 0;
  }

  .content-video-section .sc-video-block .video-item, .content-video-section .video-blocks-item .list-video-item {
    aspect-ratio: 2/3;
  }

  .content-video-section .video-blocks-item, .content-video-section .sc-video-block .video-block {
    height: inherit;
  }

  /* .content-video-section {
    padding: 30px 15px 0;
  } */
  .video-overlay-ctn .vd-overlay-list {
    width: 50%;
  }

  .content-video-section .video-overlay-ctn {
    align-items: flex-start;
    row-gap: 15px;
  }

  .content-video-section .overlay-scope-list, .content-video-section .vd-client-list {
    margin: 0;
  }

  .what-we-do-right {
    padding-left: 0;
  }

  .all-species-welcome-section-main .section-header {
    display: none;
  }

  /* simple-video-section css end */

  /* what we do section start */
  .what-we-do-section-main {
    flex-direction: column;
    gap: 10px;
    padding: 60px 20px 60px;
  }

  .what-we-do-left {
    flex: auto;
    max-width: 100%;
  }

  .what-we-do-right {
    flex: auto;
    max-width: 100%;
  }

  .what-we-do-section-main p {
    margin: 0 0 10px;
  }

  .services-list-link span.animated-text {
    display: none;
  }

  /* what we do section end */

  /* all species welcome section start */
  .species-section {
    flex-flow: row wrap;
    gap: 27px;
    padding: 0 20px 60px;
  }

  .species-services-left {
    flex: auto;
    max-width: 100%;
  }

  .species-services-list {
    flex: auto;
    max-width: 100%;
    padding-left: 0;
  }

  .trademark {
    font-size: 18px;
    top: -12px;
    right: 2px;
  }

  /* all species welcome section end */

  /* logo slider starts */
  .home-page-partenr-slider-main {
    margin-bottom: 60px;
  }

  .home-page-partenr-slider-main .logoSwiper {
    padding: 0 15px;
  }

  /* logo slider end */

  /* custom video section css start */
  .video-bg-image-main {
    margin-bottom: 60px;
  }

  .video-bg-image-main .bg-image-main.bg-poster-img {
    height: 600px;
  }

  .video-bg-image-main .bg-video-main .video-item {
    height: 100%;
  }

  .video-bg-image-main .bg-video-main video {
    height: 100%;
    object-fit: cover;
  }

  /* custom video section css end */

  /* News section starts  */
  .home-page-latest-news-section {
    padding: 0 20px 20px 20px;    /* flex-flow: row wrap; */
    gap: 10px;
    justify-content: space-between;
  }

  /* .home-page-latest-news-section h6 {
    width: 100%;
  } */
  .home-page-latest-news-right {
    min-width: auto;
  }

  .home-page-news-slider {
    margin-bottom: 60px;
    padding: 0 0 0 20px;
  }

  .home-page-news-slider .news-slide-bottom {
    bottom: 14px;
  }

  .home-page-news-slider .first-slide-content h6 {
    font-size: 22px;
    max-width: 90%;
  }

  .home-page-news-slider .swiper-slide.first-slide-content {
    min-width: inherit !important;
    padding: 20px;
  }

  .home-page-news-slider .swiper-slide:first-child .light-arrow-only {
    background: #ffffff4d;
  }

  .home-page-news-slider .light-arrow-only {
    width: 25px;
    height: 25px;
  }

  /* News section end  */

  /* about us top section css start */
  .about-us-page-top .about-us-page-top-right-clients, .about-us-page-top .about-us-page-top-right-coverage, .about-us-page-top .about-us-page-top-right-services-social {
    flex: auto;
    max-width: 45%;
    width: 100%;
    min-width: 45%;
  }

  .about-us-page-top .about-us-page-top-right {
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 47px;
  }

  .about-us-page-top .about-us-page-top-right-services-social {
    min-width: 100%;
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }

  .about-us-page-top .about-us-page-top-right-coverage {

    /* text-align: right; */
  }

  .about-us-page-top .about-us-page-top-right-social {
    margin: 0;
    max-width: 40%;
    min-width: 40%;
  }

  .about-us-page-top .about-us-page-top-right-services-social>div {
    margin: 0;
    max-width: 45%;
    min-width: 45%;
  }

  .about-us-page-top .about-us-page-top-right-services-list li {
    gap: 15px;
  }

  .about-us-page-top {
    padding: 100px 20px 50px;
    row-gap: 47px;
  }

  .about-us-page-top .about-us-page-top-right-services-social ul li span:first-child {
    display: none;
  }

  .about-us-page-top .about-us-page-top-right-services-list li span:last-child {
    text-align: left;
  }

  /* about us top section css end */

  /* about us bottom section css start */
  .about-us-page-bottom {
    padding-left: 20px;
    padding-right: 20px;
  }

  .about-us-page-bottom-top-caption-left {

    /* max-width: 25%; */
    max-height: 41px;
  }

  .about-us-page-bottom-top-caption-right {
    align-self: center;
  }

  /* .about-us-page-bottom-top-caption {
    margin: 0;
  } */
  .centered-text-to-about-video {
    font-size: 28px;
    line-height: 30px;
    letter-spacing: -0.03em;
  }

  .about-us-page-top .about-us-page-top-right ul * {
    font-size: 12px;
    line-height: 15px;
    letter-spacing: -0.02em;
  }

  .about-us-page-top .about-us-page-top-right-services-social ul li span {
    font-size: 12px;
    line-height: 15px;
    letter-spacing: -0.02em;
  }

  .about-us-page-top .about-us-page-top-right-social ul li span, .about-us-page-top .about-us-page-top-left-content p {
    font-size: 12px;
  }

  .about-us-page-top .about-us-page-top-left-content p {
    font-size: 15px;
    line-height: 19px;
    letter-spacing: -0.02em;
  }

  /* about us bottom section css end */

  /* contact top section css start */
  .contact-page-top .contact-page-top-right {
    max-width: 100%;
    display: flex;
    flex-direction: column;
  }

  .contact-page-top .contact-us-page-header {
    font-size: 52px;
    line-height: 58px;
    text-align: left;
    padding-right: 20px;
    word-break: break-word;
  }

  .contact-page-top .contact-us-page-header span {
    font-size: 16px;
    bottom: 25px;
  }

  .contact-page-top .contact-address-social div {
    max-width: calc(50% - 25px);
  }

  .contact-page-top .contact-address-social div:nth-child(even) {
    max-width: calc(50% - 20px);
  }

  .contact-page-top a.contact-page-top-email-id {
    font-size: 28px;
  }

  /* contact top section css end */
  .cmn-hdr-inner-main.cmn-hdr-inner-work-dt:has(.inr-pg-hdr-info) .inr-pg-center-logo {
    margin-left: 0;
    margin: 0;
  }

  /* Work detail topbar start  */
  .work-detail-page-banner-caption-left div, .work-detail-page-banner-caption-right div {
    max-width: 100%;
    width: 100%;
  }

  .work-detail-page-banner-caption-left div:last-child, .work-detail-page-banner-caption-right div:first-child {
    display: none;
  }

  .work-detail-page-banner-caption {
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  .work-detail-page-banner {
    margin-bottom: 70px;
  }

  .work-detail-page-banner-video {
    height: 100vh;
    height: 100dvh;
    max-height: none;
  }

  .vimeo-cover-wrap.work-detail-page-banner-video,
  iframe.work-detail-page-banner-video {
    aspect-ratio: auto;
  }

  .work-page-main {
    padding: 138px 20px 60px 20px;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 100px 0;
    justify-content: center;
  }

  /* #M05-mobile-info: drop the previous inverted-chevron overrides so the
     desktop rule (.open-sw-info ... svg { transform: rotate(180deg) }) applies
     on mobile too. Resting state = chevron down (Info v); open state =
     chevron up (Info ^). */

  .single-work-info {
    transform: translateY(-100%);
  }

  body.single-work .inr-pg-hdr-info {
    position: fixed;
    bottom: 15px;
  }

  /* #M05-mobile-info: keep the header (and its pill) visible when info opens
     so the chevron toggle is reachable. Previously this rule was
     `body.open-sw-info header { display: none; }`. */

  /* #M05-mobile-info: top padding made room for the floating header pill which
     stays visible above the info panel. Was 7px — too tight, content sat
     under the pill. */
  .single-work-info {
    padding: 55px 20px 100px;
  }

  .swi-topbar {
    top: 0;
  }

  /* related project section css start */
  .related-project-title-and-all-work-btn {
    margin-bottom: 15px;
  }

  .related-project-title-and-all-work-btn h3 {
    font-size: 24px;
  }

  .work-detail-page-related-project-inner-main {
    flex-flow: column wrap;
  }

  .work-detail-page-related-project-inner-right .work-detail-page-related-project-inner-right-video, .work-detail-page-related-project-inner-left .work-detail-page-related-project-inner-video, .work-detail-page-related-project-inner-right .work-detail-page-related-project-inner-video {
    opacity: 1;
  }

  .work-detail-page-related-project-inner-video-bottom {
    left: 15px;
    flex-flow: column wrap;
    align-items: flex-start;
    gap: 10px;
    width: calc(100% - 30px);
    flex-direction: row;
    justify-content: space-between;
  }

  .work-detail-page-related-project-inner-video-bottom .work-detail-page-related-project-inner-video-bottom-right>div {

    /* flex: 1; */
    display: none;
  }

  .work-detail-page-related-project-inner-video-bottom-right {
    flex: unset;
  }

  .work-detail-page-related-project-inner-video-bottom-right ul {
    flex-wrap: wrap;
    gap: 3px 5px;
  }

  .work-detail-page-related-project-inner-left, .work-detail-page-related-project-inner-right {
    min-height: 400px;
  }

  /* related project section css end */
}

/* .work-detail-page-banner-caption-left,
.work-detail-page-banner-caption-right {
flex-flow: column wrap;
gap: 20px;
} */

/* Work page header end */

/* Close buttons: remove the browser default focus ring that appears as an
   unwanted circular outline around the X after a click/tap. Keyboard focus
   (:focus-visible) is preserved for accessibility. */
.card-close,
.close-news-listing-overlay-btn,
.filterClose {
  -webkit-tap-highlight-color: transparent;
}
.card-close:focus:not(:focus-visible),
.card-close:active,
.close-news-listing-overlay-btn:focus:not(:focus-visible),
.close-news-listing-overlay-btn:active,
.filterClose:focus:not(:focus-visible),
.filterClose:active {
  outline: none;
  box-shadow: none;
}

/* Work filter mobile start */
.close-news-listing-overlay-btn {
  display: none;
}
@media(max-width:767px) {
  .work-page-dropdown-selected {
    background-color: transparent;
    padding: 0;
  }

  .work-page-dropdown-selected span {
    display: none !important;
  }

  .work-page-dropdown-selected .mob-work-filter {
    display: block;
    height: inherit;
    width: inherit;
    color: #000;
  }

  .work-page-custom-dropdown:has(.open) .mob-work-filter {
    color: #fff;
  }

  .work-page-dropdown-options, .news-filter-dropdown-options {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: calc(100% - 60px);
    max-height: 100vh;
    transition: all 0.5s ease;
    z-index: 99;
    padding: 60px 0;
    background: #000;
    border-radius: 0;
    transform: translateX(-100%);
  }
  .work-page-dropdown-options{
    padding: 76px 22px 40px;
  }
  .work-page-dropdown-options.open, .news-filter-dropdown-options.open {
    margin-top: 60px;
    padding-bottom: 60px;
    max-height: inherit;
    transform: translateX(0);
  }

  .work-page-dropdown-options.open {
    margin: 0;
    padding: 76px 22px 40px;
    height: 102%;
  }
  .work-page-dropdown-options{
    height: 102%;
  }

  body:has(.work-page-dropdown-options.open) .site-header, body:has(.news-filter-dropdown-options.open) .site-header {
    z-index: 1;
  }

  .work-page-dropdown-options li, .news-filter-dropdown-options li {
    padding: 0 15px;
    color: #fff;
    font-size: 16px;
    line-height: normal;
    margin: 10px 0;
  }

  body:has(.work-page-dropdown-options.open) .work-page-layout-setup-switch-main {
    z-index: 0;
  }

  .mob-work-filter .filterClose {
    display: none;
  }

  body:has(.work-page-dropdown-options.open) .mob-work-filter .filterToggle, body:has(.news-filter-dropdown-options.open) .mob-news-filter .filterToggle {
    display: none;
  }

  .work-page-dropdown-selected .mob-work-filter svg {
    width: 100%;
    height: 100%;
    color: #222222;
  }

  body:has(.work-page-dropdown-options.open) .mob-work-filter svg, body.tile-open .work-page-dropdown-selected .mob-work-filter svg {
    color: #fff;
  }

  body:has(.work-page-dropdown-options.open) .mob-work-filter .filterClose {
    display: block;
    width: 20px;
    height: 20px;
  }

  .work-page-custom-dropdown:has(.open) .work-page-dropdown-selected, .news-filter:has(.open) .news-filter-selected {
    border-radius: 0;
    z-index: 100;
  }

  /* Overlay hidden by default */
  .news-overlay {
    position: fixed;
    bottom: -100%;    /* start hidden */
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000CC;
    transition: bottom 0.4s ease-in-out;
    z-index: 9999;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.2);
  }

  .close-news-listing-overlay-btn i svg path {
    stroke: #ffffff;
  }

  .close-news-listing-overlay-btn i {
    background: #000;
    border-radius: 100px;
    height: 38px;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .close-news-listing-overlay-btn {
    position: absolute;
    top: 6px;
    right: 20px;
    z-index: 99;
    font-size: 12px;
    line-height: 29px;
    letter-spacing: -0.02em;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .news-listing-open .all-news-list .all-news-item {
    gap: 0 25px;
  }

  .news-listing-open .all-news-list {
    overflow: auto;
    max-height: calc(100vh - 200px);
    margin-top: 54px;
  }

  .news-listing-open .all-news-view {
    margin-top: 85px;
  }

  .news-listing-open .news-detail-sidebar {
    width: 100%;
    padding-top: 1px;
    background-color: transparent;
    height: 100%;
    position: static;
    backdrop-filter: blur(30px);
    min-height: 100vh;
    padding-bottom: 0;
  }

  /* Overlay visible */
  body.news-listing-open header {
    display: none;
  }

  body.news-listing-open {
    overflow-y: hidden;
  }

  body.news-listing-open .news-overlay {
    bottom: 0;
  }

  .load-more-grey-btn {
    font-size: 15px;
    line-height: 20px;
    letter-spacing: -0.02em;
    font-weight: 400;
    color: #000000;
    background: #f4f4f4;
    border-radius: 60px;
    padding: 11.5px;
    width: 215px;
    margin: auto;
    margin-bottom: 60px;
  }

  .news-filter-selected span {
    display: none;
  }

  .work-page-dropdown-options li {
    font-size: 19px;
    letter-spacing: -0.38px;
    line-height: 1;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-left: 0;
    position: relative;
  }
   /* #FB-07: removed the `:nth-last-child(2) { border-bottom: none }` rule
      that stripped the divider from "Production" (second-to-last term in
      the current taxonomy ordering). The rule originally hid the border
      before a static `.filter-img` <li> that was once appended at the end
      of the dropdown — that <li> is no longer in the markup (see
      archive-work.php:109-116), but the CSS rule remained and silently
      removed the divider from whichever term happens to be second-to-last.
      Every visible filter row now has the same divider treatment. */

  .work-page-dropdown-options li:before {
    content: '';
    position: absolute;
    height: 10px;
    width: 10px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    right: 2px;
    rotate: -45deg;
    bottom: 16px;
  }

  .work-page-custom-dropdown {
    left: 19px;
    top: 15px;
  }

  .work-page-dropdown-selected span.filter-label {
    display: block !important;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0;
    text-transform: capitalize;
  }

  .togglr-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .work-page-dropdown-options  .filter-img {
    position: fixed;
    bottom: 0;
    z-index: 999;
    left: 19px;
    width: calc(100% - 38px);
    padding-bottom: 0;
    border: none;
}
/*.work-page-dropdown-options.open  .filter-img {
  opacity: 1;
  pointer-events: auto;
}*/
.work-page-custom-dropdown{
  z-index: 9999 !important;
}
 .work-page-dropdown-options  .filter-img:before{
  content: none;
 }
}

/* Work filter mobile end */

/* Work page starts */
@media(max-width:767px) {
  .footer-email {
    padding: 5px 7px 5px 22px;
    background: #ffffff10;
    border-radius: 7px;
  }

  .news-detail-sidebar {
    width: 100%;
  }

  .footer-email input, .footer-email input::placeholder {
    font-size: 13px;
  }

  button.footer-submit svg {
    display: none;
  }

  .footer-email .footer-submit span {
    display: block;
  }

  .footer-email .footer-submit {
    width: fit-content;
    background: #000000;
    padding: 12px 17px;
    border-radius: 6px !important;
    min-height: 45px;
    font-size: 15px;
    line-height: normal;
    color: #ffffff;
  }

  #newsletter-form .footer-terms {
    margin-bottom: 12px;
  }

  .content-video-section .section-content p {
    letter-spacing: -0.84px;
    font-size: 28px;
    line-height: 1.1;
  }

  .content-video-section {
    padding: 20px 20px 0;
  }

  .content-video-section .video-overlay-ctn {
    height: 100%;
    min-height: 100%;
    justify-content: space-between;
  }

  .content-video-section .video-overlay {
    height: 100%;
    padding: 19px;
  }

  .video-overlay-ctn .vd-overlay-list {
    display: none;
  }

  .content-video-section .vd-overlay-subheader, .vd-overlay-link {
    align-self: flex-end;
  }

  .content-video-section .vd-overlay-header h2 {
    font-size: 28px;
    line-height: 1.1;    /* width: auto; */
  }

  .content-video-section .vd-overlay-header .sup-head {
    display: none;
  }

  .content-video-section .vd-client-list .vd-client-item {
    text-transform: uppercase;
  }

  .content-video-section .vd-overlay-link {
    width: 29px;
    height: 29px;
  }

  .single-work:nth-child(odd) {
    max-width: 270px;
    margin: auto;
  }

  body.single-work .inr-pg-hdr-info {
    position: fixed;
    bottom: 15px;
  }

  .swi-scope-list li {
    line-height: 15px;
    gap: 0 9px;
  }

  /* #FB-04: arrow stays hidden on mobile too — see matching desktop rule.
     Previously this override re-enabled `display: flex` on mobile, which is
     why the chevrons reappeared on phones after FB-04 was applied. */

  /* #M05-mobile-info: header stays visible while info is open — removed
     `body.open-sw-info header { display: none; }`. The pill (.inr-pg-hdr-info)
     fixed at bottom: 15px is now the only way to toggle info closed on mobile.
     Hide the X close button on mobile so there isn't a redundant control. */
  .swi-topbar .swi-info-close {
    display: none;
  }

  .single-work-info {
    padding: 55px 20px 100px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .swi-topbar .swi-seq-num {
    display: none;
  }

  .swi-topbar {
    top: 0;
  }

  .swi-item .swi-label {
    margin-bottom: 3px;
    letter-spacing: -0.02em;
    line-height: 29px
  }

  .swi-list .swi-item {
    margin-bottom: 0;
  }

  .swi-item:has(.swi-inner) {
    gap: 20px 0;
  }

  .swi-list {
    margin: 40px 0;
    height: auto;
    gap: 0;
  }

  .swi-item .swi-title {
    font-size: 15px;
    line-height: 19px;
    letter-spacing: -0.02em;
  }

  /* Mobile news: toggle between list and detail view */
  .news-detail-view .news-detail-right {
    display: none;
  }

  .news-detail-view.news-show-detail .news-detail-sidebar {
    display: none;
  }

  .news-detail-view.news-show-detail .news-detail-right {
    display: block;
    width: 100%;
    padding: 0 15px;
  }

  .news-detail-right > .news-mobile-back {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: -0.02em;
    font-weight: 400;
    color: #000;
    background: none;
    border: none;
    cursor: pointer;
    padding: 20px 5px 15px;
  }

  .news-detail-right > .news-mobile-back svg {
    transform: rotate(180deg);
    width: 10px;
    height: 6px;
  }

  .news-detail-right > .news-mobile-back-bottom {
    margin-top: 40px;
    padding: 25px 5px 25px;
  }

  .all-news-list .all-news-item:last-child {
    border-bottom: none;
  }

  .news-detail-sidebar {
    padding: 0 20px 70px 20px;
  }

  .featured-image-view img {
    max-height: 350px;
  }

  .featured-image-view .featured-img-btm {
    padding: 0 20px;
    margin-bottom: 40px;
    width: 100%;
    margin-top: 13px;
  }

  /* --- Consistent vertical rhythm for the news article body (mobile) ---
     Every top-level block (text, full-bleed image, image grid) gets the SAME
     20px gap; paragraphs carry no vertical margin of their own so they can't
     add uneven leading/trailing space. The first block sits flush to the top. */
  .news-detail-inner > .sn-description,
  .news-detail-inner > .featured-image-view,
  .news-detail-inner > .sn-news-btm-gird {
    margin-top: 20px;
    margin-bottom: 0;
  }

  .news-detail-inner > .featured-image-view:first-child {
    margin-top: 0;
  }

  .news-detail-inner .sn-full-desc p {
    margin-top: 0;
    margin-bottom: 0;
  }

  .featured-image-view.sn-inner-image-content .sn-description, .featured-image-view.sn-inner-image-content .featured-img-btm {
    padding: 0 20px !important;
  }

  /* Inner images sit inset, aligned to the same 20px margin as the body text. */
  .featured-image-view.sn-inner-image-content {
    padding: 0 20px;
  }

  /* Stacked column: drop the desktop right-alignment so there's no stray left margin. */
  .news-detail-inner .sn-description {
    width: 100%;
    margin-left: 0;
    padding: 0 20px;
  }

  .sn-description p {
    font-size: 15px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0;
    color: #000000;
    text-indent: 0;
  }


  .sn-blockquote blockquote {
    margin-bottom: 0 !important;
  }

  .sn-blockquote blockquote, .sn-description h2 {
    font-size: 28px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: -0.03em;
    color: #000000;
    margin-bottom: 20px;
    word-break: break-word;
  }

  .sn-news-btm-gird {
    padding: 0 20px;
    gap: 15px;
  }

  body.single-news .footer-gb-scr-btm, .single-work .footer-gb-scr-btm {
    display: none;
  }

  .sn-description {
    padding: 0 20px;
  }

  body.single-news .inr-pg-hdr-info button {
    margin: auto;
  }

  body.single-news .inr-pg-hdr-info svg {
    transform: rotate(180deg);
  }

  body.single-news .inr-pg-hdr-info {
    position: fixed;
    bottom: 15px;
    width: 100%;
    z-index: 9;
  }

  .sn-blockquote .sn-block-quote-person {
    font-size: 12px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0;
    color: #000000;
    margin-top: 10px;
  }
  div.sn-blockquote > span.sn-block-quote-person {
    margin-top: 16px;
    display: block;
  }

  .all-news-item .news-item-content .news-item-title {
    font-size: 15px;
    line-height: 18px;
  }

  .all-news-item .news-item-content .news-item-category {
    margin-top: 15px;
    font-size: 12px;
  }

  .related-post-slider-controls {
    gap: 8px;
    margin-top: 40px;
  }

  .work-detail-page-product-images-with-captions {
    gap: 50px;
  }

  .work-detail-page-related-project-main {
    padding: 0 20px;
  }

  .tile-open .work-page-list-main {
    padding: 90px 20px 140px;
  }

  .work-page-list-view li a {
    margin-bottom: 2px;
  }

  .work-page-main .single-work:nth-child(2n) {
    max-height: 251px;
    height: 250px;
  }

  .work-page-main .single-work h5 span {
    display: none;
  }

  .work-page-main .single-work h5 {
    top: 12px;
    left: 15px;
  }

  .home-page-news-slider .swiper-slide {
    max-width: 100%;
    max-width: -webkit-fill-available;
  }

  .home-page-news-slider .first-slide-content h6 {
    font-size: 19px;
    line-height: 22px;
    letter-spacing: 0;
  }

  .about-us-page-bottom-top-caption-right div {
    display: none;
  }

  .about-us-page-bottom-top-caption-right {
    text-align: end;
    align-self: flex-end;
  }

  .contact-page-top {
    padding: 59px 0 0 !important;
  }

  .contact-page-top .contact-page-top-right {
    margin-top: 60px;
  }

  .work-detail-page-project-detail-inner-right h2 {
    margin-bottom: 35px;
  }

  .work-with-us-section h6 {
    font-size: 19px;
    line-height: 19px;
    letter-spacing: -0.03em;
  }

  .vacancies-section-wrapper .accordion-title h2 {
    margin-bottom: 28px;
  }

  body.news-page .all-news-view {
    margin-top: 92px;
  }

  .all-news-view {
    height: auto;
  }

  .swi-item .brief-desc p, .swi-item .outcome-desc p {
    font-size: 12px;
    line-height: 18px;
    text-indent: 28px;
    letter-spacing: -0.02em;
  }

  .single-work-info .swi-credits-list li {
    font-size: 12px;
    line-height: 15px;
    letter-spacing: -0.02em;
  }

  /* changes */
  .featured-image-view .sn-description h2 {
    font-size: 15px;
    text-transform: uppercase;
    line-height: 21px;
    margin-bottom: 2px;
  }

  .sn-news-btm-gird {
    grid-template-columns: repeat(1, 1fr);
  }

  .sn-news-btm-gird .sn-news-btm-item .sn-news-btm-img-cap {
    font-size: 12px;
    line-height: 15px;
    letter-spacing: -0.02em;
    margin-top: 10px;
  }

  section.our-mission-section {
    padding: 60px 20px;
  }

  .work-culture-section-main .work-culture-top-text {
    margin-bottom: 10px;
  }

  .contact-page-top-right-single.contact-1 {
    display: flex;
    flex-direction: column;
  }

  .contact-page-top .contact-page-top-right .capital-text.capital-heading {
    max-width: fit-content;
  }

  .contact-page-bottom-top {
    margin-bottom: 5px;
  }

  .news-filter {
    display: none;
  }

  /* Mobile: show featured images, hide hover media (no hover on touch) */
  .work-page-main .single-work:nth-child(odd) .single-work-images img.single-work-main-img,
  .work-page-main .single-work:nth-child(even) .single-work-images img.single-work-main-img {
    width: 100%;
    visibility: visible;
    opacity: 1;
  }

  .single-work-hover-img {
    display: none;
  }

  /* On mobile, show content immediately (no stagger reveal) */
  .work-page-main .single-work .single-work-inner {
    opacity: 1;
    transform: none;
  }

  /* #M04-work-archive: caption belongs at the BOTTOM of the card on mobile
     so it doesn't overlap with the h5 project name at the top. The previous
     top: 15px placed both at the top-left → overlapping like "StyleBy 2026 /
     NIKE". The bottom: 15px + top: auto restores the design from the
     "should display like this" reference. max-height: unset overrides the
     baseline `max-height: 0` from the desktop rule, otherwise the caption
     would be a 0-height box and the Client / cnt-nm stack would render past
     the card's bottom edge (clipped by overflow: hidden). */
  .single-work-caption {
    align-items: flex-end;
    transform: translateY(0);
    opacity: 1;
    top: auto;
    bottom: 15px;
    max-height: unset;
    text-align: left;
    overflow: visible;
  }

  .single-work-caption span.light-arrow-only {
    width: 21px;
    height: 21px;
  }

  .single-work-caption span.light-arrow-only svg {
    width: 6px;
  }

  .work-page-main .single-work h5 {
    top: 10px;
    left: 12px;
    /* #M04-work-archive: force visible on mobile. The desktop rule sets
       opacity:0 and waits for the JS-added .asset-loaded class, but the
       reveal queue (archive-work.php:245) is skipped on mobile — so h5
       never gets revealed and only the client name shows. */
    opacity: 1;
  }

  body.work-page:has(.work-page-dropdown-options.open), body.news-page:has(.news-filter-dropdown-options.open) {
    overflow: hidden;
  }

  /* Work tile view start */
  .work-page-list-main {
    padding: 90px 15px 50px;
  }

  .work-page-list-view li a {
    display: flex;
    gap: 0px 4px;
    margin-bottom: 0px;
  }

  .work-page-list-view li a * {
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
  }

  .work-page-list-view li a .list-index, .work-page-list-view li a .list-lg-content {
    display: none;
  }

  .work-page-list-view li a .black-bg-arrow-only {
    margin-left: auto;
    width: 18px;
    height: 18px;
  }

  .work-page-list-main .menu-hover-video {
    display: none;
  }

  /* Work tile view end */

  /* info page start  */
  .about-us-page-top .about-us-page-top-left-content {
    margin-top: 4px;
  }

  .about-us-page-top .about-us-page-top-right .about-info-title {
    margin-bottom: 4px;
  }

  .about-us-page-bottom {
    padding-bottom: 60px;
  }

  /* info page end  */
  .contact-page-bottom-bottom {
    display: none;
  }

  .swi-list {
    grid-template-columns: repeat(2, 46%);
    row-gap: 20px;
    margin: 50px 0;
    overflow-y: auto;
    max-height: calc(100vh - 20px);
    height: 100%;
    padding: 0 8px 0 0;
  }

  .swi-list .swi-item:nth-child(3), .swi-list .swi-item:last-child {
    grid-column-start: 1;
    grid-column-end: 3;
  }

  .swi-topbar {
    top: 40px;
  }

  .about-us-page-bottom-top-caption {
    display: none;
  }

  .home-page-news-slider .first-slide-content h6 {
    font-size: 19px;
  }

  .work-page-custom-dropdown:has(.open) {
    width: 100%;
  }

  .work-page-custom-dropdown:has(.open) .work-page-dropdown-selected .mob-work-filter {
    min-width: calc(100% - 40px);
    width: calc(100% - 40px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: row wrap;
  }

  .work-page-custom-dropdown .work-page-dropdown-selected .mob-work-filter svg {
    height: 22px !important;
    width: 22px !important;
  }
  body:has(.work-page-dropdown-options.open) .mob-work-filter .filterClose{
     height: 30px !important;
     width: 30px !important;
  }
  .tile-open svg.tile-open-svg {
    display: block !important;
}

.tile-open svg.tile-open-svg +  svg {
    display: none;
}

.tile-open .filter-label {
    color: #fff;
}
.work-page-custom-dropdown:has(.open) .tile-open-svg {
    display: none !important;
}

.work-page-custom-dropdown:has(.open) .tile-open-svg + svg {
    display: block;
}
body.tile-open .work-page-dropdown-options li.filter-img {
    display: none;
}

.fixed-bottom-mox-logo {
    z-index: 9999;
}
}

@media(max-width:481px) {
  .home-page-partenr-slider-main .swiper-slide, .home-page-partenr-slider-main .swiper-slide .logo-box {
    max-width: 90px;
    height: 90px;
  }

  .video-bg-image-main .background-main img {
    width: 100%;
    object-fit: cover;
    height: 100vh;
  }

  /* .related-post-slider-controls .swiper-pagination {
    display: none;
  } */
  .related-post-slider-controls {
    gap: 50px;
  }

  .sc-video-block.trigger-video-animation {
    top: 80px;  /* top: 10px; */
  }

  .trigger-video-animation {
    top: 80px;
  }

  .mox-info .overlay-footer-content {
    display: flex;
    max-width: 100% !important;
    width: 100%;
  }

}

@media(min-width:1920px) {
  .work-detail-page-banner-caption-left {
    max-width: calc(40.5% + 10px) !important;
  }

}

.site-content > .container:has(>p) {
  max-width: 1440px;
  padding: 75px 25px 60px;
  margin: 0 auto;
}

.site-content >  .container > p {
  margin: 0 0 20px;
  font-size: 18px;
  letter-spacing: -0.03px;
}
.work-detail-page-product-video2-video {
  position: relative;
}
.work-detail-block iframe {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work-detail-page-product-images-with-captions .work-detail-block .work-detail-page-product-caption {
  justify-content: space-between;
  gap: 15px;
}
@media(min-width:1200px) {
  .work-detail-page-product-images-with-captions .work-detail-page-product-video3 {
    max-width: 862px;
    margin: 0 auto;
  }
  .work-detail-page-product-images-with-captions .section {
    overflow: visible;
  }
  .work-detail-page-product-images-with-captions .section > .work-detail-page-product-video2-video {
    overflow: visible;
    height: calc(95vh - 5px);
  }
  .work-detail-page-product-images-with-captions .section > .work-detail-page-product-video3-video {
    overflow: visible;
    height: calc(80vh - 5px);
  }

  /* .work-detail-page-product-video2-video, .work-detail-page-product-video3-video, .work-detail-page-product-images-with-captions .section img, .work-detail-page-product-images-with-captions .section video {
    height: 100%;
  } */

  .work-detail-page-product-images-with-captions .section .swiper {
    height: 100vh;
    overflow: hidden;
  }

  .work-detail-page-product-images-with-captions .section .swiper-wrapper {
    height: 80%;
  }

  .work-detail-page-product-images-with-captions .section .related-post-slider-controls {
    min-height: 20%;
  }

  .related-post-section .post-card, .related-post-section .post-card> div {
    height: 100% !important;
  }

  .work-detail-page-product-image2 > div:has(img) {
    height: 100%;
  }

}

/* FIX: Vimeo/rollover media sitting higher than thumbnail */
.work-detail-block{
  position: relative;
}

.work-detail-block iframe{
  top: 0;
  bottom: auto;
}

.work-detail-block video{
  top: 0;
  bottom: auto;
}

@media(max-height:700px) and (max-width:767px) {
  .holding-page-page .mox-mission {
    margin-top: 30px !important;
  }

  .mox-info, .holding-page-page .mox-overlay .mox-content {
    row-gap: 25px;
  }

}

@media(max-height:681px) and (max-width:767px) {
  .holding-page-page .mox-overlay .mox-content {
    justify-content: space-between;
    row-gap: 15px;
  }

  .mox-info {
    row-gap: 15px;
  }

  .holding-page-page .mox-mission {
    font-size: 14px;
    line-height: 1.3;
  }

}


/* Lock the grey pill button size (prevents tall-then-snap CLS) */
.home-sticky-hdr .inr-page-ct-logo,
.work-hdr-center .inr-page-ct-logo,
.cmn-hdr-inner-main .inr-page-ct-logo{
  height: 45px;
  min-height: 45px;
  display: inline-flex;
  align-items: center;
}

/* Keep the logo itself small */
.inr-page-ct-logo img{
  height: 15px;
  width: auto;
  display: block;
}

/* Avoid baseline/line-height weirdness from the link */
.inr-page-ct-logo a{
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

/* #04-mobile START — news-article image treatment on mobile:
   only the first (hero) image is full bleed; every other image is inset to the
   same 20px margin as the body text, with consistent rounded corners. */
@media (max-width: 767px) {
  /* Hero only: break out of the .news-detail-right 15px gutter to the viewport
     edges. Square corners since rounding reads as gaps at the screen edge. */
  .news-detail-inner > .featured-image-view:first-child .featured-image {
    margin-left: -15px;
    margin-right: -15px;
    width: calc(100% + 30px);
  }

  .news-detail-inner > .featured-image-view:first-child img {
    border-radius: 0;
  }

  /* Drop max-height clipping that was shrinking portrait images, and force
     every featured image to fill its container. */
  .featured-image-view img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    display: block;
  }

  /* Inner images and bottom-grid images share the same rounded corners. */
  .sn-inner-image-content .featured-image img,
  .sn-news-btm-gird .sn-news-btm-item img {
    border-radius: 7px;
  }

  /* Bottom-grid items: ensure each image fills its (1-col) container. */
  .sn-news-btm-gird .sn-news-btm-item img {
    width: 100%;
    height: auto;
    display: block;
  }
}
/* #04-mobile END */

/* -------------------------------------------------------------------------
   Vimeo/MP4 thumbnail placeholders (server-rendered, fade on load).
   Added 2026-05-31 (vimeo-thumbnail-placeholders quick task).
   The .mox-video-poster image sits behind the iframe/video and fades out
   once JS adds .is-loaded to the .mox-has-poster wrapper.
   ------------------------------------------------------------------------- */
.mox-video-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
    transition: opacity .4s ease;
}

.mox-has-poster {
    position: relative;
    overflow: hidden;
}

/* Keep the live media above the poster. */
.mox-has-poster iframe,
.mox-has-poster video,
.mox-has-poster object {
    position: relative;
    z-index: 0;
}

/* List-view hover videos are positioned absolutely by .hovered-video
   (custom.css ~2173); don't let the generic relative rule above override
   that when the wrapper also carries a poster. */
.hovered-video.mox-has-poster {
    position: absolute;
}

/* Fade the poster out once the wrapper is marked loaded. */
.is-loaded .mox-video-poster {
    opacity: 0;
}

/* Work-culture gallery iframe wrapper needs positioning for the poster. */
.work-culture-iframe-wrap {
    position: relative;
}