:root {
  --green: #053f33;
  --dark-green: #1f3d2b;
  --green-form-field: #295a4e;
  --badge: #f6f2e6;
  --lime-green: #aac352;
  --placeholder-color: #828e8b;
  --color-text:#333333;
  --gray:#f7f7f778;
}


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

body {
  overflow-x: hidden
}

body img {
  width: 100%;
  display:block;
}


@keyframes green-leaf-marquee {
  0% {
    transform: translateX(0)
  }

  to {
    transform: translateX(-100%)
  }
}

@font-face {
  font-family: albra-black;
  src: url(/font/AlbraDisplayTRIAL-Black.otf)
}

@font-face {
  font-family: albra-bold;
  src: url(/font/AlbraDisplayTRIAL-Bold.otf)
}

@font-face {
  font-family: albra-light;
  src: url(/font/AlbraDisplayTRIAL-Light.otf)
}

@font-face {
  font-family: albra-medium;
  src: url(/font/AlbraDisplayTRIAL-Medium.otf)
}

@font-face {
  font-family: albra-regular;
  src: url(/font/AlbraDisplayTRIAL-Regular.otf)
}

@font-face {
  font-family: albra-semi;
  src: url(/font/AlbraDisplayTRIAL-Semi.otf)
}

a,
h4,
h5,
h6,
p,
small,
span,
.font_m {
  font-family: Montserrat, sans-serif;
  text-decoration: none
}

h1,
h1 *,
h2,
h2 *,
h3 {
  font-family: albra-regular, sans-serif;
  font-weight: 400
}

h1 ,h1 *{
  font-size: clamp(40px, 5vw, 5vw);
  line-height: 1.2;
}
.h2,
h2 {
  font-size: clamp(32px, 4.5vw, 4.5vw);
  line-height: 1.2
}
h3 *,
h3,.h3 {
  font-size: clamp(20px, 2.5vw, 2.5vw);
  line-height: 1.2
}

/* our-work/project.blade.php's gallery heading sits at 50% width next to
   the image carousel (both flex_1). Short headings wrap onto 1-2 lines
   fine either way, but a long one (e.g. microsoft-hyderabad's) greedy-
   wraps into ragged, uneven lines - "designed for" alone on a line, etc.
   text-wrap:balance redistributes words across lines instead, which
   fixes the long case and is a no-op on short headings that were already
   fine. Falls back to normal wrap on unsupported browsers. */
.vivarium-heading {
  text-wrap: balance;
}
h4 ,.h4 {
  font-size: clamp(18px, 2vw, 2vw);
  line-height: 1.2;
  font-weight: 500;
}
.h5 {
  font-size: clamp(16px, 1.5vw, 1.5vw);
  line-height: 1.2;
  font-weight: 500;
}
.h1_xlg, .h1_xlg * {
  font-size: clamp(40px, 7vw, 7vw);
}
.para,
p {
  font-size: clamp(16px, 1.4vw, 1.4vw);
  line-height: 1.5
}
a{
display: block;
cursor: pointer;
}
.weight_m{
  font-weight: 500;
}
.weight_b{
  font-weight: 600;
}

.relative{
  position: relative;
}
.para-sm,
.para_sm {
  line-height: 1.6;
  font-size: clamp(14px, 1.2vw, 1.2vw)
}

.para_lg {
  font-size: clamp(16px, 1.6vw, 1.6vw)
}

/* Solution detail page description (solutions-detail.blade.php): the
   admin edits this in a plain <textarea>, and would reasonably type
   blank lines between paragraphs there - but the frontend renders it
   as a single <p>, and HTML's default white-space:normal collapses
   those newlines, so it always shows as one dense block regardless of
   what was typed. pre-line keeps normal space-collapsing behaviour
   within a line (so accidental extra spaces don't create gaps) but
   respects real line breaks, turning blank lines in the admin textarea
   into actual paragraph spacing. */
.solution-detail-hero p.para {
  white-space: pre-line;
}
.para_xsm,
small {
  font-size: clamp(10px, 1vw, 1vw);
  line-height: 1.5;
  display: block
}

strong {
  font-weight: 500
}

.mb_2{
  margin-bottom: 2vw;
}
.mb_3,
.section_heading {
  margin-bottom: 3vw
}
.mt_1{
  margin-top: 1vw;
}
.mt_2{
  margin-top: 2vw;
}
.mt_xsm{
  margin-top: .5vw;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1vw 3vw;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  transition: all .3s ease-in-out
}

header.darkHeader {
  /* background-image: linear-gradient(180deg, #00000073, transparent) */
  background-color: var(--green);
}

.scrolling-down header {
  transform: translateY(-100%)
}

.scrolling-up header {
  transform: translateY(0)
}

header a.head_logg {
  max-width: 12%
}

header a.head_logg .white-logo {
  display: none
}

.homepage header a.head_logg .black-logo {
  display: none
}

.homepage header a.head_logg .white-logo {
  display: block
}

header .head_menu {
  display: flex;
  align-items: center;
  gap: 2vw
}

header .head_menu nav {
  display: flex;
  list-style: none
}

.homepage header .head_menu nav a {
  color: #fff
}

.homepage header .head_menu a.contact_btn {
  background: #fff
}
header .head_menu nav a {
  display: block;
  padding: 1vw;
  font-size: 1vw;
  line-height: 1.2vw;
  color: #000
}

header:has(+main>.dark_header) .head_menu nav a {
  color: #000
}

header.darkHeader:has(+main>.dark_header) .head_menu nav a {
  color: #ffffff;
}

header:has(+main>.dark_header) .head_menu nav a:hover {
  color: var(--lime-green);
}
header.darkHeader:has(+main>.dark_header) .head_logg .black-logo,
header:has(+main>.dark_header) a.head_logg .white-logo {
  display: none
}
header.darkHeader:has(+main>.dark_header) .head_logg .white-logo,
header:has(+main>.dark_header) a.head_logg .black-logo {
  display: block
}
header.darkHeader .head_menu a.contact_btn,
header:has(+main>.dark_header) .head_menu a.contact_btn {
  background: var(--lime-green);
  color: #000
}

header:has(+main>.dark_header) .head_menu a.contact_btn:hover {
  background-color: var(--green);
  color: #fff
}

header.darkHeader .head_menu a.contact_btn:hover,
header.darkHeader:has(+main>.dark_header) .head_menu a.contact_btn:hover{
  background-color: #ffffff;
  color: var(--dark-green);
}


header .head_menu nav a:hover {
  color: var(--lime-green);
}


header .head_menu a.contact_btn {
    padding: clamp(10px, 1vw, 1vw) clamp(24px, 2vw, 2vw);
    background: var(--lime-green);
    font-size: clamp(12px, 1vw, 1vw);
    line-height: 1;
    border-radius: 10vw 0;
    color: #000;
    transition: color .2s, background-color .2s;
}

header .head_menu a.contact_btn:hover {
  background-color: var(--green);
  color: #fff
}

header .head_menu .mb_menu_btn {
  display: none
}
nav .submenu-wrap {
    position: absolute;
    left: 3vw;
    top: 80%;
    padding: 1vw 0 0;
    max-width: calc(100% - 6vw);
}
.submenu {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 4vw;
  row-gap: 2vw;
  padding: 2vw 4vw;
  background: #f4efec;
  border-radius: 3vw;
  list-style: none;
  max-height: 90vh;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  /* Closing transition (see nav>.has_submenu:hover .submenu below for why
     this is split into two differently-timed transitions instead of one
     "all .3s"): holds the menu fully open for 180ms after hover/open ends
     before starting to fade, so a quick pass of the cursor in and out of
     the mega menu doesn't read as a glitch. visibility only flips at the
     very end so it stays interactive through the hold + fade. */
  transition: opacity .25s ease-in-out .18s, transform .25s ease-in-out .18s, visibility 0s linear .43s
}

.submenu-wrap {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: opacity .25s ease-in-out .18s, transform .25s ease-in-out .18s, visibility 0s linear .43s
}

nav>.has_submenu.open .submenu-wrap,
nav>.has_submenu:hover .submenu-wrap {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0);
  /* Opening transition: waits 100ms of sustained hover before starting to
     open, so moving the cursor across "Our Work" on the way to another
     nav item never triggers it. CSS transitions on a delayed property
     simply never start if the triggering state (:hover) reverts before
     the delay elapses, which is what gives the "hold" the glitch fix
     needs without any JS debounce. */
  transition: opacity .2s ease-in-out .1s, transform .2s ease-in-out .1s, visibility 0s linear .1s;
}

nav>.has_submenu.open .submenu,
nav>.has_submenu:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .2s ease-in-out .1s, transform .2s ease-in-out .1s, visibility 0s linear .1s;
}

header nav>.has_submenu.open>a,
header nav>.has_submenu:hover>a {
  color: var(--lime-green)
}

.submenu::-webkit-scrollbar {
  display: none
}

.img_wrap,
.submenu img {
  border-radius: 0 3vw;
  transition: transform .3s ease-in-out
}
.submenu img {
      aspect-ratio: 1 / .4;
    object-fit: cover;
    object-position: bottom;
}
.img_wrap:hover img {
  transform: scale(1.1)
}

.submenu * {
  font-size: 1.4vw;
  font-weight: 500;
  color: #945e43
}

.submenu span {
  display: block;
  line-height: 1.4vw;
  margin-top: 1vw
}

.img_wrap {
  overflow: hidden
}

header .has_submenu>a {
  position: relative;
}

.submenu-arrow {
  display: inline-block;
  margin-left: .2vw;
  font-size: .8vw;
  line-height: 1;
  width: .6vw;
  height: .6vw;
  transform-origin: center;
  color: #fff;
  background-image: url('data:image/svg+xml,<svg fill="%23ffffff" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30.727 30.727" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><g><path d="M29.994,10.183L15.363,24.812L0.733,10.184c-0.977-0.978-0.977-2.561,0-3.536c0.977-0.977,2.559-0.976,3.536,0 l11.095,11.093L26.461,6.647c0.977-0.976,2.559-0.976,3.535,0C30.971,7.624,30.971,9.206,29.994,10.183z"></path></g></g></svg>');
  background-position: center;
  background-size: 100%
}

header.darkHeader:has(+main>.dark_header) .head_menu nav .has_submenu .submenu-arrow {
  background-image: url('data:image/svg+xml,<svg fill="%23ffffff" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30.727 30.727" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><g><path d="M29.994,10.183L15.363,24.812L0.733,10.184c-0.977-0.978-0.977-2.561,0-3.536c0.977-0.977,2.559-0.976,3.536,0 l11.095,11.093L26.461,6.647c0.977-0.976,2.559-0.976,3.535,0C30.971,7.624,30.971,9.206,29.994,10.183z"></path></g></g></svg>');
}

header:has(+main>.dark_header) .head_menu nav .has_submenu .submenu-arrow {
  background-image: url('data:image/svg+xml,<svg fill="%23000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30.727 30.727" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><g><path d="M29.994,10.183L15.363,24.812L0.733,10.184c-0.977-0.978-0.977-2.561,0-3.536c0.977-0.977,2.559-0.976,3.536,0 l11.095,11.093L26.461,6.647c0.977-0.976,2.559-0.976,3.535,0C30.971,7.624,30.971,9.206,29.994,10.183z"></path></g></g></svg>')
}

.has_submenu:hover .submenu-arrow,
header:has(+main>.dark_header) .head_menu nav .has_submenu:hover .submenu-arrow {
  background-image: url('data:image/svg+xml,<svg fill="%23aac352" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30.727 30.727" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><g><path d="M29.994,10.183L15.363,24.812L0.733,10.184c-0.977-0.978-0.977-2.561,0-3.536c0.977-0.977,2.559-0.976,3.536,0 l11.095,11.093L26.461,6.647c0.977-0.976,2.559-0.976,3.535,0C30.971,7.624,30.971,9.206,29.994,10.183z"></path></g></g></svg>')
}

.has_submenu.open .submenu-arrow {
  transform: rotate(180deg) !important
}

.has_submenu {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0
}

.top_banner {
  position: relative;
  min-height:100vh;
}

/* Above the 1024px breakpoint (where .top_banner keeps min-height:100vh
   below) the desktop hero image is otherwise sized only by its own
   aspect ratio via `body img{width:100%}`, so a wide-short image (the
   admin-recommended ~1920x700) falls short of covering a tall/narrow
   laptop viewport, leaving a gap under the photo. Below 1025px this is
   skipped on purpose: .top_banner switches to min-height:auto there and
   relies on the image staying in normal flow to size the container. */
@media (min-width: 1025px) {
  .top_banner {
    overflow: hidden;
  }

  .top_banner > img.for-dsk {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.for-mb {
  display: none
}

/* Home/Contact links added to the shared header <nav> (partials/header.blade.php)
   for the mobile slide-out menu only - hidden here so they don't duplicate
   the logo (Home) and the "Contact Us" pill button already on the desktop
   bar. Shown at max-width:768px alongside header .head_menu nav a.
   Selector must be at least as specific as "header .head_menu nav a"
   (0,0,1,3) below or its display:block wins on desktop regardless of this
   rule - a plain .nav-mobile-only class (0,0,1,0) was losing that fight,
   which is why Contact was showing twice on desktop (2026-08-28). */
header .head_menu nav a.nav-mobile-only {
  display: none
}

.top_banner .banner_content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10vw;
  max-height: max-content;
  margin: auto 0
}
.top_banner .banner_content p,  
.top_banner .banner_content h2{
  color: #ffffff;
}


.about .about_leaf_svg {
  width: 40vw;
  height: 20vw;
  position: absolute;
  left: -10vw;
  top: 20vw
}

.about .about_sec_flex {
  display: flex;
  gap: 3vw;
  align-items: center;
  justify-content: flex-end
}

.about .about_sec_flex .about_sec_content {
  max-width: 60%
}
.btn_s {
    display: flex;
    align-items: center;
    font-size: clamp(14px, 1.4vw, 1.4vw);
    line-height: 1;
    color: #fff;
    padding: clamp(12px, 1vw, 1vw) clamp(20px, 2vw, 2vw);
    border-radius: 30vw;
    gap: clamp(12px, 2vw, 1vw);
    border: 1px solid;
    max-width: max-content;
    cursor: pointer;
}

.btn_s img {
    width: clamp(20px, 2vw, 2vw);
    /* height: 1vw; */
    object-fit: contain;
    transition: all .2s ease-in;
}

.btn_s:hover img {
  transform: rotateY(180deg)
}
.btn_s.bg_green:hover{
  background-color: var(--lime-green);
}

.about .about_sec_flex .about_sec_content img {
  display: block
}

.about .about_sec_flex .about_sec_content p {
  margin: 0 0 1vw;
  color: #473110
}

/* Homepage About copy only: "Reconnecting / People x Nature" kicker
   label below the image. Bold+colour treatment on the paragraph text
   was tried and reverted 2026-08-23 - back to plain paragraph styling
   (the existing ".about_sec_content p" rule above already covers it). */
.about .about_sec_flex .about_sec_content .about_kicker {
  font-family: albra-regular, sans-serif;
  font-size: clamp(22px, 2.2vw, 2.2vw);
  line-height: 1.2;
  font-weight: 400;
  margin: 1.2vw 0 0;
  /* Same specificity class-count as ".about .about_sec_flex
     .about_sec_content p" (which sets every <p> in this column brown) -
     needs its own color here rather than leaning on the shared
     .color_green utility, which loses that fight. */
  color: var(--green)
}

/* Bold+colour treatment restored 2026-08-23, but only on the first two
   paragraphs' <strong> spans - the final "At Gamlaa..." paragraph is
   intentionally left with no <strong> tags so it stays plain. */
.about_sec_content p strong {
  color: var(--lime-green);
  font-weight: 700
}



.services_slider .swiper {
  z-index: 1;
  overflow:visible;
}

.services_slider .service_box {
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .08);
  width: 100%;
  padding: .5vw;
  transition: box-shadow .3s ease
}

.services_slider .service_box:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, .12)
}

.services_slider .service_box .service_img_wrap {
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0 0 1vw 0;
}

.services_slider .service_box .service_img_wrap img.service_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio:1/.8;
  border-radius: 1.5vw;
}

.services_slider .service_box .service_info {
  padding: .5vw .3vw 1vw .3vw;
  display: flex;
  flex-direction: column;
  gap: .6vw;
  flex: 1;
  text-align: left;
  position: relative;
  margin: 0;
  align-items: flex-start
}

.service_box .service_info .service_title {
  font-size: clamp(16px, 1.3vw, 1.3vw);
  font-weight: 600;
  color: var(--green);
  margin: 0;
  font-family: Montserrat, sans-serif
}

.services_slider .service_box .service_info .service_cta {
  width: 4vw;
  height: auto;
  border-radius: 1.8vw;
  background: #9bd40d;
  display: flex;
  align-items: center;
  justify-content: end;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  padding: .5vw 1vw;
  margin: auto 0 0
}

.services_slider .service_box .service_info .service_cta:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(197, 232, 108, .5)
}

.services_slider .service_box .service_info .service_cta img {
  width: 1vw;
  height: auto
}

.services_slider .swiper-button-next,
.services_slider .swiper-button-prev {
  display: none
}

.services_slider .service_shape_maquee {
  display: flex;
  flex-shrink: 0;
  width: auto;
  animation: green-leaf-marquee 30s linear infinite;
  margin: 8vw 0 0;
  gap: 1vw
}

.our_work .work_box h4 {
  color: #945e43;
  font-size: 1.4vw;
  line-height: 1.8vw;
  margin: 1vw 0 0;
  font-weight: 600
}

.our_work .work_tiles {
  display: flex;
  gap: 2vw
}

.our_work .work_tiles .work_box {
  flex: 1;
  cursor: pointer;
  transition: flex .4s ease-in-out, filter .4s ease-in-out;
  display: flex;
  flex-direction: column
}

.our_work .work_tiles .work_box:nth-child(even) {
  margin: 4vw 0 0
}

.our_work .work_tiles .work_box img {
  width: 100%;
  object-fit: cover;
  border-radius: 0 2vw;
  transition: transform .4s ease;
     height: 22vw;
    min-height: 200px;
}

.our_work .work_tiles:hover .work_box {
  flex: .8;
  filter: brightness(.75)
}

.our_work .work_tiles .work_box:hover {
  flex: 1.6;
  filter: brightness(1)
}

 .work_tiles .work_box:hover img {
  transform: scale(1.02)
}

.we_floating {
  display: flex;
  margin: 0 0;
  justify-content: center;
  gap: 5vw;
  position: relative;
  align-items: center
}

.we_floating .we_flex {
  display: flex;
  gap: 1vw;
  position: relative;
  align-items: flex-start
}

.we_floating .we_flex h2 {
  font-size: 5vw;
  line-height: 6vw;
  color: var(--green)
}

.we_floating .we_flex .we_list {
  display: flex;
  flex-direction: column;
  gap: 0vw
}

.we_floating .we_flex .we_list h2 {
  margin: 0;
  display: block;
  width: max-content
}

.we_floating .fix_para {
  max-width: 25vw;
  width: 100%;
  position: relative
}

.we_floating p {
  font-size: 1vw;
  line-height: 1.6vw;
  color: #473110;
  font-weight: 600;
  position: absolute;
  right: 10vw;
  bottom: 6vw
}

/* Safety net for the "We visit/understand/innovate/maintain" crossfade:
   heroWeScroll() in index.blade.php sets autoAlpha via GSAP once it
   runs, but until then (or if a scroll-linked update is ever missed)
   these are 4 position:absolute paragraphs stacked on the same spot
   with no default opacity - they'd render as garbled overlapping text.
   CSS now hides everything but the first by default so JS is purely
   additive instead of load-bearing for basic legibility. */
.we_floating p:not(:first-of-type) {
  opacity: 0
}

.inspire_sec {
  background: var(--badge);
  position: relative
}

.inspire_sec .inspire_tiles {
  display: flex;
  justify-content: space-between
}

.inspire_sec .inspire_tiles>div {
  width: 30%;
  display: flex;
  flex-direction: column;
  gap: 2vw
}

.inspire_sec .inspire_tiles .inspire_tile1b {
  padding: 0 0 4vw 6vw
}

.inspire_sec .inspire_tiles img.inspire_leaf {
  position: absolute;
  bottom: 6vw;
  width: 6vw;
  height: 6vw;
  object-fit: contain;
  left: 4vw
}

.inspire_sec .inspire_tiles h2 {
  color: #472f22;
  opacity: .6
}

.inspire_sec .inspire_tiles h2 div {
  font-family: albra-regular
}

.inspire_sec .inspire_tiles .inspire_tile3>div {
  padding: 0 6vw 0 0
}

.inspire_sec .inspire_tiles a {
  display: block;
  overflow: hidden;
  border-radius: 1.5vw
}

.inspire_sec .inspire_tiles a img {
  transition: transform .4s ease
}

.inspire_sec .inspire_tiles a:hover {
  position: relative;
  z-index: 1
}

.inspire_sec .inspire_tiles a:hover img {
  transform: scale(1.05)
}

.form_s {
  display: flex;
  justify-content: space-between;
}



.form_s form {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 2vw
}

.form_s form input {
  width: 48%;
 font-size: clamp(14px, 1vw, 1vw);
  line-height: 1.2vw;
  padding: .8vw;
  border: none;
  border-bottom: 2px solid var(--green);
  font-family: Montserrat, sans-serif
}

.form_s form textarea {
  width: 100%;
  border: 2px solid var(--green);
  border-radius: 1vw;
  padding: 1vw;
     font-size: clamp(14px, 1vw, 1vw);

  line-height: 1.2vw;
  font-family: Montserrat, sans-serif
}

.form_s form button {
    font-size: clamp(14px, 1vw, 1vw);
    line-height: 1.4;
    color: #fff;
    background-color: var(--green);
    border: 1px solid var(--green);
    border-radius: .6vw;
    padding: .8vw 2vw;
    font-weight: 500;
    cursor: pointer;
}
.form_s form button:hover {
  background-color: #fff;
  color: var(--green)
}

.leaf_marquee .form_shape_maquee {
  display: flex;
  flex-shrink: 0;
  width: auto;
  gap: 1vw;
  animation: green-leaf-marquee 30s linear infinite
}
.leaf_marquee {
    padding: 8vw 0 3vw;
}
footer {
  background: var(--green);
  padding: 5vw 8vw
}

footer .footer_container {
  display: flex;
  flex-direction: column;
  gap: 4vw
}

footer .footer_row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%
}

footer .footer_top {
  gap: 6vw
}

footer .footer_text {
  width: 45%
}

footer .footer_text p {
  font-size: 1.15vw;
  line-height: 1.8;
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-weight: 400
}

/* Site-wide: the footer intro used to be a single <p>; now two, so give
   them breathing room since the global reset zeroes <p> margins. */
footer .footer_text p + p {
  margin-top: 1vw
}

footer .footer_text p .highlight {
  color: #c5e86c;
  font-weight: 600
}

footer .footer_contact_info {
  width: 42%;
  display: flex;
  flex-direction: column;
  gap: 1.2vw
}

footer .footer_contact_info .f_info:first-child {
  align-items: flex-start
}

footer .footer_contact_info .f_info:first-child img {
  margin-top: .3vw
}

footer .footer_contact_info .f_info {
  display: flex;
  align-items: center;
  gap: 1vw
}

footer .footer_contact_info .f_info img {
  width: 1.3vw;
  min-width: 18px;
  height: auto;
  object-fit: contain
}

footer .footer_contact_info .f_info>div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3vw
}

footer .footer_contact_info .f_info .f_label {
  font-size: 1.05vw;
  color: #c5e86c;
  font-weight: 500;
  font-family: Montserrat, sans-serif
}

footer .footer_contact_info .f_info a,
footer .footer_contact_info .f_info p {
  font-size: 1.05vw;
  line-height: 1.6;
  color: #fff;
  font-family: Montserrat, sans-serif;
  margin: 0;
  text-decoration: none;
}

footer .footer_middle {
  align-items: center;
  padding-top: 3vw
}

footer .footer_logo {
  display: flex;
  align-items: flex-end;
  gap: 2.5vw
}

footer .footer_logo img {
  max-width: 22vw;
  height: auto
}

footer .footer_logo .footer_contact_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 1vw, 1vw) clamp(24px, 2vw, 2vw);
  border: 1px solid #fff;
  color: #fff;
      border-radius: 10vw 0;
font-size: clamp(12px, 1vw, 1vw);
  line-height: 1;
  font-family: Montserrat, sans-serif;
  transition: color .2s, background-color .2s;
  white-space: nowrap
}

footer .footer_logo .footer_contact_btn:hover {
  color: var(--green);
  background-color: #fff
}

footer .footer_social {
  display: flex;
  align-items: center;
  gap: 1.8vw
}

footer .footer_social .social_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s
}

footer .footer_social .social_icon img {
  width: 2vw;
  height: 2vw;
  object-fit: contain
}

footer .footer_social .social_icon:hover {
  opacity: .7
}

footer .footer_bottom {
  flex-direction: column;
  align-items: stretch;
  gap: 1.8vw;
  padding-top: 3vw
}

footer .footer_line {
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #c5e86c, #a8d94a)
}

footer .footer_nav {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2.5vw;
  flex-wrap: wrap
}

footer .footer_nav a {
  font-size: .95vw;
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  transition: color .2s
}

footer .footer_nav a:hover {
  color: #c5e86c
}

main#contact {
  overflow-x: hidden
}

.contact_hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8vw 6vw 4vw;
  gap: 4vw
}

.contact_hero_content {
  max-width: 45%
}

.contact_hero_content p {
  color: var(--color-text);
}

.contact_hero_image {
  max-width: 50%
}

.contact_hero_image img {
  width: 100%;
  height: auto;
  border-radius: 0
}

#contact .service_shape_maquee {
  display: flex;
  flex-shrink: 0;
  width: auto;
  animation: green-leaf-marquee 30s linear infinite;
  margin: 3vw 0 0;
  gap: 1vw
}

.contact_leaf_marquee {
  display: flex;
  flex-shrink: 0;
  width: auto;
  animation: green-leaf-marquee 30s linear infinite;
  gap: 1vw;
  padding: 0 0 4vw
}



.contact_form_section .contact_form_box {
  position: relative;
  width: 50%
}

.contact_form_section .contact_form_box .form-bg-left-leaf {
  left: -4vw;
  height: 8vw;
  width: 15vw;
  object-fit: contain;
  z-index: 0;
  top: 20vw;
  position: absolute
}

.contact_form_section .contact_form_box .form-bg-right-leaf {
  right: -8vw;
  position: absolute;
  height: 8vw;
  width: 15vw;
  object-fit: contain;
  z-index: 0;
  top: 25vw
}

.contact_form_wrap {
  z-index: 1
}


.contact_form_wrap form {
  display: flex;
  flex-direction: column;
  gap: 1.5vw
}

.form_group {
  display: flex;
  flex-direction: column;
  gap: .5vw
}

.form_group label {
  font-size: .9vw;
  color: var(--color-text);
  font-family: Montserrat, sans-serif;
  font-weight: 500
}

.form_group input,
.form_group select,
.form_group textarea {
  width: 100%;
  padding: .8vw 1vw;
  font-size: .9vw;
  border: none;
  border-radius: .5vw;
  background: #fff;
  font-family: Montserrat, sans-serif;
  color: var(--color-text)
}

.form_group input::placeholder,
.form_group textarea::placeholder {
  color: #999
}

.form_group textarea {
  resize: vertical;
  min-height: 8vw
}

.form_row {
  display: flex;
  gap: 1.5vw
}

.form_row .form_group {
  flex: 1
}


.contact_form_images {
  width: 45%;
  display: flex;
  flex-direction: column;
  gap: 2vw;
  padding-top: 4vw
}

.contact_form_section .contact_form_images img {
  border-radius: 0;
  max-width: 100%;
  margin: 0 0 0 auto
}

.contact_map_section {
  background: #fff
}

.contact_map_wrap {
  display: flex;
  gap: 4vw;
  align-items: flex-start
}

.contact_map {
  width: 40%;
  border-radius: 1vw;
  overflow: hidden
}

.contact_map iframe {
  width: 100%;
  height: 25vw;
  border: none
}

.contact_locations {
  width: 60%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2vw
}


.location_item h4 {
  display: flex;
  align-items: center;
  gap: .5vw;
  color: var(--green);
  font-weight: 600;
  font-family: Montserrat, sans-serif;
  margin: 0
}

.location_item h4 img {
  width: 1vw;
  height: auto;
  min-width:12px;
}

.location_item p {
  padding-left: 1.5vw
}

.contact_page_footer .footer_contact_info {
  display: flex;
  flex-direction: row;
  gap: 3vw;
  width: auto
}

.contact_page_footer .footer_top {
  flex-direction: column;
  gap: 2vw
}

.contact_page_footer .footer_text {
  width: 100%;
  max-width: 600px
}

.d_flex {
  display: flex
}
.no_wrap{
  flex-wrap: nowrap;
  flex-direction: row !important;
}
.j_contnet_left {
  justify-content: flex-start
}

.d_column {
  flex-direction: column
}

.gap-2 {
  gap: 2vw
}

.mxw-5 {
  max-width: 37vw
}

.j_content_center {
  justify-content: center
}

.about_leaf_svg.services_s {
  right: -15vw;
  top: 60%;
  left: auto;
  transform: translateY(-50%);
  position: absolute;
  max-width: 50%;
  scale: 1.4
}


.section {
  overflow: hidden
}

.container_s {
  margin: 0 auto;
  padding: 0 8vw !important;
  position: relative
}

.pd-block-lg {
  padding: 8vw 0
}

.text_left {
  text-align: left !important
}


.services_slider .service_box.wyg_b .service_info h3.service_title {
  font-family: albra-regular;
  text-align: center;
  width: 100%;
}

.pd_btm_lg {
  padding-bottom: 5vw
}

.services_slider.wyt:before {
  content: none
}

/* "What You Get?" feature icons (Consult/Develop/Deploy/Sustain all
   share this one class). Was width:3vw with only a 40px floor and no
   cap, so on typical desktop widths it rendered ~43-58px against a
   ~330px-wide card - a lot of dead space around a tiny icon. clamp()
   keeps it from disappearing on narrow screens or ballooning on
   ultra-wide ones. History: 56/5vw/76 -> doubled to 112/10vw/152 (too
   big) -> reduced 25% to this. */
.services_slider .service_box .service_img_wrap.wyg_c {
  width: clamp(84px, 7.5vw, 114px);
  max-height: clamp(84px, 7.5vw, 114px);
  border-radius: 0;
  margin: auto
}

.services_slider .service_box .service_img_wrap.wyg_c img {
  object-fit: contain
}

.services_slider .service_box.wyg_b {
  padding: 3vw 1.5vw;
  gap: 4vw
}

.services_slider.wyt .swiper-slide:nth-child(even) .service_box.wyg_b {
  background: var(--lime-green)
}

.services_slider.wyt .swiper-slide:nth-child(odd) .service_box.wyg_b {
  background: var(--green)
}

.services_slider.wyt .swiper-slide:nth-child(odd) .service_box.wyg_b * {
  color: var(--lime-green)
}


.ai_center {
  align-items: center
}

.col-eq>div {
  width: 100%
}

.radius {
  border-radius: 2vw
}

.container_s .swiper {
  overflow: visible
}

.wcu {
  background: var(--green);
  overflow: hidden
}

.wcu .content {
  padding: 3vw 5vw
}


.services_slider .swiper-slide {
  height: auto
}

.services_slider .service_box {
  height: 100%
}



.section-one {
  position: relative;
  width: 100%;
  padding: 0 48px;
  background: url(../images/why_join_banner.png) center/cover no-repeat;
  display: flex;
  align-items: center
}

.why-box {
  position: relative;
  width: 30vw;
  min-width: 340px;
}

.why-box img.bg-shape {
  width: 100%;
  display: block;
  margin-top: 80px
}

.why-content {
  position: absolute;
  inset: 0;
  padding: 65px 0 0 0;
  justify-content: center;
  display: flex;
  align-items: center
}

.why-content h2 {
  font-size: 3vw;
  margin-bottom: 28px;
  color: #3a2c1c
}

.why-list {
  list-style: none
}

.why-item {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  font-size: 1.2vw;
  font-weight: 500;
  color: #485800
}

.why-item img {
  width: 36px;
  height: 36px;
  flex-shrink: 0
}

.job-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 60px;
  border-top: 1px solid #ccc
}

.job-row:last-child {
  border-bottom: 1px solid #ccc
}

.job-left {
  display: flex;
  align-items: center;
  gap: 30px
}

.job-id {
  font-size: 2vw;
  color: #777;
  min-width: 30px
}

.job-text h3 {
  font-size: 1.4vw;
  margin-bottom: 4px;
  font-family: Montserrat, sans-serif !important;
  font-weight: 600
}

.job-text p {
  font-size: 1.2vw;
  color: #666
}

.apply-btn {
  background: #0f3d2e;
  color: #fff;
  border: none;
  padding: 10px 22px;
  border-radius: 22px;
  cursor: pointer;
  margin-bottom: 4px;
  font-family: Montserrat, sans-serif;
  font-size: 1.4vw
}

.popup {
  position: absolute;
  top: 60px;
  right: 0;
  width: 260px;
  background: #fff;
  padding: 18px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
  display: none;
  z-index: 10
}

.popup p {
  font-size: 14px;
  margin-bottom: 12px
}

.popup button {
  background: #0f3d2e;
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 14px;
  cursor: pointer
}

.mxw-50 {
  max-width: 50vw
}


.container-culture {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0
}

.text-content {
  width: 50%
}


.main-culture-gamlaa {
  background-color: #f4efe3;
  position: relative
}

.main-culture-gamlaa::before {
  content: "";
  position: absolute;
  top: 18%;
  right: 0;
  width: 40%;
  height: 28%;
  background: url(images/bg-img.png) no-repeat;
  background-size: cover;
  z-index: 1;
  pointer-events: none
}


.top-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 340px;
  pointer-events: none
}

.gallery-viewport {
  overflow: hidden
}


.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio:1/1.2;
}

.arrow-wrapper {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 28px
}

.arrow-btn {
  background: #f4efe3;
  cursor: pointer;
  padding: 10px;
  color: var(--green);
  transition: all .3s ease;
  border: 1px solid var(--green)
}

.arrow-btn svg {
  width: 24px;
  height: 24px
}

.arrow-btn:hover {
  background: var(--green);
  color: #fff
}

.hero {
  min-height: 600px;
  display: flex;
  align-items: center;
  background-image: url(../images/bg-newimage.png);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain
}


.btn {
  display: inline-block;
  padding: 12px 28px;
  background-color: #0b3d2e;
  color: #fff;
  text-decoration: none;
  border-radius: 25px;
  font-size: 1.4vw;
  transition: background .3s ease
}

.btn:hover {
  background-color: #096b4a
}

.form-container {
  width: 100%;
  max-width: 720px;
  text-align: center
}


.main-title {
  font-size: 6vw;
  color: #0e3b2e;
  margin-bottom: 16px
}


.custom-form {
  width: 100%
}

.form-row {
  display: flex;
  gap: 20px
}

.form-group {
  flex: 1;
  text-align: left;
  margin-bottom: 30px
}

.form-label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  color: #222
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 22px 16px;
  border-radius: 10px;
  border: none;
  background-color: #e9e9e9;
  font-size: 15px;
  outline: 0;
  transition: .2s ease;
  box-shadow: 0 2px 5px 0 #00000038
}

.phone-combined {
  display: flex;
  width: 100%;
  background-color: #e9e9e9;
  border-radius: 10px;
  overflow: hidden;
  padding: 22px 16px
}

.phone-code {
  border: none;
  background: 0 0;
  font-size: 15px;
  outline: 0;
  cursor: pointer
}

.phone-number {
  flex: 1;
  border: none;
  background: 0 0;
  font-size: 15px;
  outline: 0
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  background-color: #e2e2e2
}

.form-textarea {
  min-height: 160px;
  resize: vertical
}

.phone-wrapper {
  display: flex;
  gap: 8px
}

.phone-select {
  width: 90px
}


.blog-header p {
  color: #2d0505
}

.slider-wrapper {
  position: relative;
  margin-top: 35px;
  padding-bottom: 70px;
  overflow: hidden
}

.blog-slider {
  display: flex;
  gap: 24px;
  transition: transform .45s ease
}

.blog-card {
  background: #f7f7f778;
  box-shadow: 0 1px 4px 0 #00000042
}

.blog-card img {
  width: 100%;
 aspect-ratio: 1/.8;
  object-fit: cover;
  display: block
}

.swiper_btn_wraper {
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: end;
}

.swiper_btn_wraper button {
    border: 1px solid;
    font-size: clamp(18px, 1.8vw, 1.8vw);
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    padding: .5vw;
    transition: background .15s ease;
    min-width: 36px;
    min-height: 36px;
    width: 3.5vw;
    height: 3.5vw;
}

.swiper_btn_wraper button:active {
  background: var(--green);
  color: #fff;
  border-color: var(--green)
}
.btn-slider.btn_white{
  color:#ffffff;
  border-color: #ffffff;
}
.btn-slider.btn_black{
  color:#000000;
  border-color: #000000;
}

.btn-slider.btn_green{
  color:var(--green);
  border-color: var(--green);
}

.btn-slider.btn_white:active{
  color:var(--green);
  border-color: #ffffff;
  background-color: #ffffff;
}


.resource-section {
  overflow: hidden;
}

.resource-header h1 {
  font-size: 6vw;
  line-height: 1.1;
  color: #ffff
}


.resource-slider-wrapper {
  overflow: hidden
}

.resource-slider {
  display: flex;
  gap: 25px;
  transition: transform .5s ease
}

.resource-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #000;
  border: 5px solid #fff
}
.blog-slider img,
.resource-card img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1/.8;
}

.resource-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.resource-btn {
    align-self: flex-end;
    font-size: clamp(14px, 1vw, 1vw );
    padding: .5vw 1.2vw;
    border-radius: 20px;
    border: 1px solid var(--dark-green);
    background: #fff;
    cursor: pointer;
    color: var(--dark-green);
}
.resource-nav {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 40px
}

.resource-nav button {
  width: 42px;
  height: 42px;
  border: 1px solid #fff;
  background: 0 0;
  color: #fff;
  font-size: 18px;
  cursor: pointer
}

.resource-nav button:hover {
  background: #fff;
  color: var(--dark-green)
}

.guide-container {
  background-color: #f6f0dc
}


.guide-slider-wrapper {
  position: relative;
  overflow: hidden
}

.guide-slider {
  display: flex;
  gap: 60px;
  transition: transform .5s ease
}

.guide-card {
  background: #f3f3f3;
  border-radius: 400px;
}

.guide-image {
  border-radius: 50%;
  aspect-ratio: 1;
}

.guide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.guide-btn {
    display: inline-flex;
    align-items: center;
    background: #a7bf54;
    cursor: pointer;
    font-size: clamp(12px, 1vw, 1vw);
    padding: .8vw 1.2vw;
    border-radius: 5vw;
    color:var(--green);
        line-height: 1;
}
.guide-btn span {
    max-width: 2vw;
    min-width: 16px;
}



.guide-navigation {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 30px
}

.guide-arrow {
  width: 42px;
  height: 42px;
  border: 1px solid #cfcfcf;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #fff
}

.guide-arrow.active {
  background: #174c3a;
  color: #fff
}

.guide-decor {
  position: absolute;
  bottom: -160px;
  left: -160px;
  width: 520px;
  z-index: -1
}

.news-title {
  font-size: 6vw;
  color: #234034;
  margin-bottom: 30px
}

.news-slider-wrapper {
  overflow: hidden;
  position: relative
}

.news-slider {
  display: flex;
  gap: 30px;
  transition: transform .5s ease
}



.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 1/.7;
}

.radius_md{
  border-radius: 2vw;
}
/* About section image only: rounder than the shared .radius_md cards. */
.radius_md.about_img_radius {
  border-radius: 4vw;
}
.inner_radius {
    border-radius: 1vw;
}
.news-read-btn {
    background: var(--green);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: clamp(12px, 1vw, 1vw);
    padding: .8vw 2vw;
    border-radius: 5vw;
}
.news-buttons {
  display: flex;
  gap: 18px;
  justify-content: flex-end;
  margin-top: 30px
}

.news-arrow {
  width: 42px;
  height: 42px;
  border: 1px solid #cfcfcf;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #fff
}

.news-arrow.active {
  background: #214e41;
  color: #fff;
  border-color: #214e41
}



.faq-title {
  font-size: 6vw;
  color: #1e4d40;
  margin-bottom: 40px
}

.faq-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start
}

.faq-card {
  background: #fbfbfb;
  border: 1.5px solid var(--green);
  border-radius: 16px;
  padding: 24px 26px;
  cursor: pointer;
  transition: .3s;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.faq-card-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 17px;
  font-weight: 500;
  color: var(--green);
  line-height: 1.4
}

.faq-card-arrow {
  font-size: 16px;
  transition: .3s
}

.faq-card-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 0
}

.faq-card.active {
  background: #0f4c3a;
  color: #fff;
  border: 1.5px solid #0f4c3a
}

.faq-card.active .faq-card-question {
  color: #fff
}

.faq-card.active .faq-card-arrow {
  transform: rotate(180deg);
  color: #fff
}

.faq-card.active .faq-card-answer {
  max-height: 200px;
  margin-top: 10px
}

.design-inspirations-section {
  padding: 50px 48px;
  border-radius: 10px;
  position: relative
}

.carousel-wrapper {
  overflow: hidden
}

.carousel-track {
  display: flex;
  gap: 78px
}

.design-inspiration-item {
  text-align: center;
  min-width: 150px
}

.circle {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 12px
}

.circle img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.design-inspiration-item p {
  font-size: 14px;
  color: #234034
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 45px;
  cursor: pointer;
  color: #7aa33c
}

.arrow.left {
  left: 20px
}

.arrow.right {
  right: 20px
}

.arrow:hover {
  color: #a4c639
}

.design-inspiration-text {
  padding: 40px 48px;
  display: flex;
  justify-content: center
}

.design-inspiration-content p {
  max-width: 700px;
  text-align: center;
  color: #043217;
  max-width:900px;
  margin:auto;
  font-size:clamp(12px, 1.5vw, 16px);
  /* font-size: 1.5vw;
  line-height: 1.6; */
  letter-spacing: .3px;
  opacity: 0;
  transform: translateY(60px);
  will-change: transform, opacity
}

.di-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-rows: 10px;
  gap: 18px;
  padding: 20px;
  max-width: 1200px;
  margin: auto
}

.di-item {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  transform: translateY(60px);
  will-change: transform, opacity
}

.di-item>img {
  width: 100%;
  display: block;
  object-fit: cover;
  min-height: 100%
}

.di-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .65), transparent 60%);
  opacity: 0;
  transition: .3s ease
}

.di-content {
  position: absolute;
  bottom: 32px;
  left: 44px;
  right: 16px;
  color: #fff;
  z-index: 2;
  opacity: 0;
  transform: translateY(10px);
  transition: .3s ease
}

.di-title {
  font-size: 14px;
  font-weight: 600
}

.di-desc {
  font-size: 12px;
  opacity: .8
}

.di-share img {
  display: block;
  object-fit: cover;
  width: 18px
}

.di-share {
  position: absolute;
  bottom: 32px;
  left: 16px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #a6d96a;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  transition: .3s ease;
  z-index: 3
}

.di-share svg {
  width: 18px;
  height: 18px;
  fill: #1a1a1a
}

.di-item:hover .di-overlay {
  opacity: 1
}

.di-item:hover .di-content {
  opacity: 1;
  transform: translateY(0)
}

.di-item:hover .di-share {
  opacity: 1;
  transform: translateY(0)
}

.design-inspiration-bgimg {
  background-image: url(../images/design-inspiration-final.png);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 9999;
  position: relative;
  padding: 65px 48px
}

.experience-section {
  display: flex;
  justify-content: center;
  margin-top: -8%
}

.experience-container {
  background: #e9e5dc;
  border-radius: 10vw;
  padding: 2vw 4vw;
  display: flex;
  align-items: center;
  gap: 3vw;
  max-width: 60vw;
  width: 100%;
  box-shadow: 0 2px 3px 0 silver;
  justify-content: center;
  min-width: 680px
}

.left-experience h3 {
  margin: 0 0 1.5vw
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #8bbf3d;
  text-decoration: none;
  width: 50%;
  border-radius: 10vw;
  font-size: 18px;
  position: relative
}

.divider {
  width: 1px;
  height: 100%;
  background: #bdb8ab
}

.arrow-experience {
  top: 35%;
  transform: translateY(-10%);
  font-size: clamp(24px, 3vw, 3vw);
  cursor: pointer;
  color: #0f1506
}

.experience {
  padding: 90px 48px
}

.experience__container {
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px
}

.experience__features {
  display: grid;
  grid-template-columns: repeat(2, 1fr)
}

.experience__item {
  display: flex;
  align-items: center
}

.experience__icon {
  width: 4vw;
  min-width: 44px;
  height: 4vw;
  min-height: 44px;
  background: #a6c44a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  padding: .5vw
}

.experience__image img {
  width: 520px;
  border-radius: 30px;
  display: block;
  object-fit: cover
}

.locations {
  padding: 60px 20px;
  background: #f2f2f2
}

.locations h1 {
  font-size: 48px;
  color: #1f4d3b;
  margin-bottom: 20px
}

.container {
  display: flex;
  border-radius: 30px;
  overflow: hidden
}

.page_width {
  max-width: 1200px;
  margin: auto
}

#map {
  width: 60%;
  height: auto;
  
}

.city-list {
  width: 50%;
  background: #d9d4c8;
  padding: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px
}

.city {
  cursor: pointer;
  padding: 10px;
  border-radius: 10px;
  transition: .3s
}

.city:hover {
  background: rgba(0, 0, 0, .05)
}

.city h3 {
  margin: 0;
  color: #1f4d3b;
  font-size: 18px
}

.city p {
  font-size: 14px;
  color: var(--color-text);
  margin-top: 5px
}

.locations__title {
  font-size: 48px;
  color: var(--green);
  margin-bottom: 30px
}

.locations__container {
  display: flex;
  border-radius: 40px;
  overflow: hidden;
  max-width: 1100px;
  margin: auto
}

.locations__map {
  position: relative;
  flex: 1
}

.locations__map img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px
}

.pin {
  position: absolute;
  width: 18px;
  height: 24px;
  background: url(images/location.png) no-repeat center center;
  background-size: contain;
  cursor: pointer;
  transform: translate(-50%, -100%)
}

.locations__content {
  flex: 1;
  background: #e6e1d7;
  padding: 40px
}

.locations__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px
}

.location-item h4 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--green)
}

.map-section {
  display: flex;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
  background: #fff
}

.location-list {
  width: 55%;
  background: #f6f2e7;
  padding: 2vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2vw;
  overflow-y: auto
}

.location-item {
  cursor: pointer;
  transition: .3s;
  padding: 1vw
}

.location-item strong {
  display: block;
  margin-bottom: .5vw;
  font-size: clamp(16px, 1.4vw, 1.4vw);
  font-weight: 500
}

.location-item i {
  font-size: 22px;
  margin-bottom: 12px
}

.slider_flex {
  display: flex;
  align-items: center;
  gap:1vw;
}
.btn-slider:after{
  content: none !important;
}
.btn-slider {
    font-size: clamp(28px, 3vw,3vw);
    background: 0 0;
    border: none;
    color: #8fbf73;
    cursor: pointer;
    padding: 0;
    position: static !important;
    min-width: 28px;
}
.btn-slider:active{
  scale: .9;
}
.testimonials-carousel {
  overflow: hidden;
  width: 100%
}

.testimonials-track {
  display: flex;
  gap: 30px;
  transform: translateX(0)
}


.testimonials-card img {
    border-radius: 50%;
    margin-bottom: 1vw;
    width: 4vw;
    min-width: 44px;
    height: 4vw;
    min-height: 44px;
}

.testimonials-quote {
    font-size: clamp(28px, 3vw, 3vw);
    color: var(--green);
    display: block;
}


.testimonials-footer {
    display: flex;
    border-left: 1px solid var(--green);
    padding-left: 1vw;
}



.testimonials-footer strong {
  display: block
}

.form-left {
  flex: 1;
  display: flex
}

.form-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center
}

.experience-form {
  width: 100%
}

.experience-form .form-row {
  display: flex;
  gap: 20px
}

.experience-form .input-group {
  width: 100%;
  margin-bottom: 25px
}

.experience-form input,
.experience-form textarea {
  width: 100%;
  border: none;
  border-bottom: 2px solid #0f3d34;
  background: 0 0;
  padding: 10px 5px;
  font-size: 14px;
  outline: 0;
  transition: all .3s ease
}

.experience-form input:focus,
.experience-form textarea:focus {
  border-color: #145c4e;
  transform: scale(1.02)
}

.experience-form textarea {
  border: 2px solid #0f3d34;
  border-radius: 12px;
  height: 90px;
  padding: 12px;
  resize: none
}

.experience-form textarea:focus {
  border-color: #145c4e
}

.experience-form input::placeholder,
.experience-form textarea::placeholder {
  color: #777
}

.experience-form button {
  background: #0f3d34;
  color: #fff;
  border: none;
  padding: 10px 45px;
  border-radius: 25px;
  cursor: pointer;
  transition: all .3s ease
}

.experience-form button:hover {
  background: #145c4e;
  transform: translateY(-2px)
}

.how-it-works-section {
  position: relative;
  background: url(../images/how_it_works_bg.webp) center/cover no-repeat;
  border-top-right-radius: 50%;
  border-bottom-left-radius: 50%;
  overflow: hidden;
  display: flex
}

.how-it-works-content {
  position: relative;
  color: #fff;
  width: 100%
}

.how-it-works-steps {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap
}

.how-it-works-step {
  text-align: center;
  width: 22%
}

.how-it-works-step img {
  width: 4vw;
  height: 4vw;
  min-width: 44px;
  min-height: 44px;
  object-fit: contain;
  margin: 0 auto  2vw;
}

h1,
h1 *,
h2,
h2 *,
h3 * {
  position: relative
}

.project-hero__line {
  position: absolute;
  top: 116px;
  bottom: 64px;
  width: 2px;
  background: #4dd9e0;
  z-index: 2;
  pointer-events: none
}

.project-hero__line--left {
  left: 24px
}

.project-hero__line--right {
  right: 24px
}

.project-hero__grid {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background-image: url('../images/exp-center-banner.png');
    background-size: cover;
    background-position: center;
    align-items: stretch;
    justify-content: space-between;
}
.project-hero__grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(0, 0, 0, .52) 30%, rgba(0, 0, 0, .12) 70%);
  pointer-events: none
}

.project-hero__col-main {
  position: relative;
  z-index: 1;
  padding: 5vw 4vw;
  display: flex;
  align-items: flex-start;
  align-self: start
}


.project-hero__col-cards {
    position: relative;
    z-index: 1;
    padding: 0 4vw 4vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1.2vw;
    align-items: end;
}
.ph-cards__row {
  display: flex;
  gap: 1.2vw;
  width: 100%;
  max-width: 30vw;
  align-items: flex-end;
  min-width: 384px
}

.ph-cards__row--top {
  align-items: flex-start
}

.ph-cards__row--top .ph-card--client {
  flex: 4
}

.ph-cards__col-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.2vw
}

.ph-cards__row--3 .ph-card--services {
  flex: 1.1;
  position: relative
}

.ph-cards__row--3 .ph-card--architect {
  flex: 42
}

.ph-card {
  background-color: #f5f1e5;
  border-radius: 2vw;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  overflow: hidden
}

.ph-card__label {
  display: block;
  font-family: Montserrat, sans-serif;
  font-size: clamp(.6rem, 1vw, 5vw);
  color: #193d33;
  font-weight: 500;
  margin-bottom: 4px;
  letter-spacing: .02em
}

.ph-card__value {
  display: block;
  font-family: Montserrat, sans-serif;
  font-size: clamp(.8rem, 1.2vw, 2vw);
  color: #193d33;
  font-weight: 700;
  line-height: 1.3
}

.ph-card--scale {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px
}

.ph-card--client {
  background-color: var(--lime-green);
  border-radius: 0 100% 0 0;
  padding: 20px 18px 20px 18px;
  justify-content: flex-end
}

.ph-card--client .ph-card__label {
  color: rgba(255, 255, 255, .85);
  font-size: clamp(.6rem, 1vw, 5vw)
}

.ph-card--client .ph-card__value {
    color: #193d33;
    font-size: clamp(.8rem, 1.4vw, 1.4vw);
    font-weight: 800;
    line-height: 1.2;
}

.ph-card--services {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px
}

.ph-card--services .ph-card__value {
  font-size: clamp(.8rem, 1.2vw, 2vw);
  font-weight: 400
}

.ph-card__body {
  flex: 1;
  min-width: 0;
  overflow: hidden
}

.ph-card__icon {
  flex-shrink: 0;
  width: 3vw;
  height: 3vw;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px
}

.ph-card__icon--dark {
  background-color: #1a3a2a
}

.ph-card__icon svg {
  width: 22px;
  height: 22px
}

.ph-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.car-section {
  position: relative;
  background-image: url(../images/leaf-bg.png);
  background-position: top right;
  background-repeat: no-repeat;
  overflow: hidden
}

.car-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  position: relative;
  z-index: 1
}

.vivarium-carousel img{
  aspect-ratio: 3/2;
  max-height: 70vh;
  object-fit: cover;
}

.car-card--cream {
  background-color: #f0ebe0
}

.car-card--olive {
  background-color: #8faa3a
}

.car-card--dark {
  background-color: #1a3d2e
}


.car-card--cream .car-card__heading {
  color: #1a3d2e
}

.car-card--olive .car-card__heading {
  color: #1a3d2e
}

.car-card--dark .car-card__heading {
  color: #efead8
}

.car-card--cream .car-card__body {
  color: #2c2c2c
}

.car-card--olive .car-card__body {
  color: #1a3d2e
}

.car-card--dark .car-card__body {
  color: #efead8
}

.testi-section {
  background-color: #f5f0de;
  border-radius: 0 40% 0 40%;
  overflow: hidden;
  position: relative
}


.testi-slider-wrap {
  overflow: hidden;
  width: 100%;
  position: relative
}

.testi-track {
  display: flex;
  transition: transform .6s cubic-bezier(.25, .46, .45, .94)
}

.testi-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  align-items: center;
}

.testi-slide__img {
  border-radius: 20px;
  overflow: hidden
}

.testi-slide__img img {
  width: 100%
}

.testi-quote {
    font-family: albra-regular;
    font-size: clamp(5rem, 8vw, 9rem);
    line-height: 1;
    color: #8faa3a;
    display: block;
  margin-bottom: -4vw;
}

.testi-text {
  font-family: Montserrat, sans-serif;
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  line-height: 1.85;
  color: #2c2c2c
}

.testi-marquee-wrap {
  overflow: hidden;
  width: 100%;
}

.testi-marquee {
  display: flex;
  flex-shrink: 0;
  width: auto;
  animation: green-leaf-marquee 30s linear infinite;
  gap: 1vw
}

.pup-inner {
  max-width: 100%
}

.pup-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px
}


.pup-card__img {
  width: 100%;
  overflow: hidden;
  border-radius: 16px
}

.pup-card__img img {
  width: 100%;
  transition: transform .4s ease
}

.pup-card:hover .pup-card__img img {
  transform: scale(1.05)
}

.pup-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}
.pup-card__name {
    font-size: clamp(1rem, 1.3vw, 1.4rem);
    color: var(--green);
    font-family: 'albra-regular';
}

.pup-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3vw;
  height: 3vw;
  min-height: 28px;
  min-width: 28px;

  background-color: #8faa3a;
  border-radius: 50px;
  color: #fff;
  text-decoration: none;
  transition: background-color .2s ease
}

.pup-card__btn:hover {
  background-color: #1a3d2e
}

.pup-card__btn svg {
  width: 50%;
  height: 50%;
}


.ecf-form {
  display: flex;
  flex-direction: column;
  gap: 32px
}

.ecf-row {
  display: flex;
  gap: 40px
}

.ecf-row--2 .ecf-field {
  flex: 1
}

.ecf-row--1 .ecf-field {
  flex: 0 0 50%
}

.ecf-field {
  display: flex;
  flex-direction: column
}

.ecf-field input {
  border: none;
  border-bottom: 1.5px solid #1a3d2e;
  outline: 0;
  background: 0 0;
  font-family: Montserrat, sans-serif;
  font-size: clamp(.85rem, 1vw, 1rem);
  color: #1a3d2e;
  padding: 8px 0;
  width: 100%
}

.ecf-field input::placeholder {
  color: #888;
  font-size: clamp(.85rem, 1vw, 1rem)
}

.ecf-field input:focus {
  border-bottom-color: #6abf3e
}

.ecf-field textarea {
  border: 1.5px solid #1a3d2e;
  border-radius: 12px;
  outline: 0;
  background: 0 0;
  font-family: Montserrat, sans-serif;
  font-size: clamp(.85rem, 1vw, 1rem);
  color: #1a3d2e;
  padding: 16px 20px;
  width: 100%;
  resize: none
}

.ecf-field textarea::placeholder {
  color: #888
}

.ecf-field textarea:focus {
  border-color: #6abf3e
}

.ecf-row--submit {
  gap: 0
}

.ecf-submit {
  background-color: #1a3d2e;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 14px 44px;
  font-family: Montserrat, sans-serif;
  font-size: clamp(.9rem, 1vw, 1rem);
  font-weight: 600;
  cursor: pointer;
  letter-spacing: .02em;
  transition: background-color .2s ease;
  align-self: flex-start
}

.ecf-submit:hover {
  background-color: #6abf3e
}

.ecf-footer-img {
  width: 100%;
  background-image: url(../images/ftr-below-leaft.jpg);
  background-size: contain;
  background-position: center;
  background-repeat: repeat;
  height: 54px;
  margin-bottom: 50px
}

.project-section {
  max-width: 1100px;
  margin: 60px auto;
  padding: 0 20px
}

.project-title {
  font-size: 6vw;
  color: #1e3d2f;
  margin-bottom: 3vw
}

.project-list {
  display: flex;
  gap: 25px;
  flex-wrap: wrap
}

.project-item {
  background: #f5f0de;
  overflow: hidden;
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.project-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 1vw
}

.project-content {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px
}

.project-name {
  font-size: 1.4vw;
  color: var(--green);
  line-height: 1.2;
  margin: 0;
  font-family: Montserrat, sans-serif;
  font-weight: 500
}

.project-btn {
  background: #8dbb3f;
  border: none;
  color: #fff;
  width: 75px;
  height: 30px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 18px;
  padding-left: 25px
}

.project-btn:hover {
  background: #7aa532
}


.gap_xsm {
  gap: .5vw
}

.gap_sm {
  gap: 1vw
}

.gap_md {
  gap: 3vw
}

.gap_lg {
  gap: 6vw
}

.pd_md {
  padding: 1.5vw
}

.pd_sm {
  padding: 1vw
}


.padding_inline_lg {
  padding: 0 4vw
}

.color_green {
  color: var(--green)
}
.color_lime_green{
  color: var(--lime-green);
}
.color_badge{
  color: var(--badge) !important;
}
.color_white {
  color: #fff
}

.color_text{
  color: var(--color-text);
}
.color_dark_green {
  color: var(--dark-green)
}

.mt_lg {
  margin-top: 3.5vw
}

.mx_40 {
  width: 40%
}

.flex_1 {
  flex: 1;
  width: 100%
}

.flex_1_6 {
  flex: 1.6;
  width: 100%
}



.font_weight_md{
  font-weight: 600
}

.d_grid {
  display: grid
}

.grid_col_2 {
  grid-template-columns: 1fr 1fr
}

.gallery-item-n img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover
}

.nav_list {
  width: 100%
}

.f_d_column {
  flex-direction: column
}

.text_center {
  text-align: center
}

.align_end {
  align-items: flex-end
}

.align_center {
  align-items: center
}

.pd_block_3 {
  padding-top: 3vw;
  padding-bottom: 3vw
}

.pd_inline_6 {
  padding-left: 6vw;
  padding-right: 6vw
}

.pd_inline_3 {
  padding-left: 3vw;
  padding-right: 3vw
}

.bg_badge {
  background-color: var(--badge)
}
.bg_white {
  background-color: #ffffff;
}


.radius_lg {
  border-radius: 3vw
}

h2.heading_s+.para_sm,
h3.heading_s+.para_sm {
  margin-top: 1vw
}

h4.heading_s+.para_sm {
  margin-top: .6vw
}

.padding-s {
  padding: 80px 40px
}

.padding-vw {
  padding: 8vw 3vw
}
.padding-vw-top{
  padding-top: 8vw;
}
.padding-vw-left{
  padding-left: 3vw;
}

.padding-vw-inline{
  padding-inline: 3vw;
}
.padding-vw-block{
  padding-block: 8vw;
}
.padding-vw-bottom{
  padding-bottom: 8vw;
}
.no-pd-top {
  padding-top: 0
}


.no-pd-bottom {
  padding-bottom: 0
}

.no-pd-block {
  padding-top: 0;
  padding-bottom: 0
}
.project-hero{
  padding-top: 6vw;
}
.padding-s>.home_form_flex.container_s {
  padding: 0 !important;
  margin: 0 !important
}

.ph-cards__row.ph-cards__row--3 {
  margin-top: -1.1vw
}

.ph-cards__row .ph-card.ph-card--client {
  flex: 4;
  padding-top: 6vw
}

.ph-cards__row .ph-card {
  padding: 1.5vw
}

.ph-card__body.p-r .ph-card__icon {
  position: absolute;
  right: .8rem;
  top: .8rem
}
.wcu_leaf {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    width: 5%;
    height: auto !important;
    min-width: 36px;
}
.services_slider.hiw .service_box .service_img_wrap {
    height: auto;
}


.img-wrap.wcu_img {
    height: auto;
    position: relative;
}
.img-wrap.wcu_img img {
    height: 100%;
    display:block;
    object-fit: cover;
}
main#home .about_leaf_svg.services_s{
    z-index: -1;
}

.service_info.text_center {
  align-items: center !important
}

form.green_bg {
  background: var(--green);
  padding: 2vw;
  border-radius: 2vw
}

form.green_bg textarea {
  min-height: 6vw
}

form.green_bg input,
form.green_bg textarea {
  background: var(--green-form-field);
  padding: .6vw .8vw;
  border-radius: .6vw;
  border: none;
  font-size: clamp(14px, 1vw, 1vw);
  color: #fff;
  position: relative
}

form.green_bg label {
  color: #fff;
  font-size: clamp(14px, 1vw, 1vw);
  margin-bottom: .8vw;
  display: block
}

form.green_bg hr {
  margin-bottom: 2vw
}

form.green_bg .input-group {
  margin-bottom: 2vw
}

form.green_bg .form-row {
  gap: 1vw
}

form.green_bg button {
  background: var(--badge);
  color: var(--green);
  font-size: clamp(14px, 1vw, 1vw);
  border-radius: .6vw;
  padding: .8vw 2vw
}

form.green_bg button:hover {
  background: var(--badge);
  color: var(--green)
}

form.green_bg input[type=date]::-webkit-calendar-picker-indicator,
form.green_bg input[type=time]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
  position: absolute;
  right: 2%;
  width: 100%;
  height: 60%;
  z-index: 2;
  pointer-events: auto;
  background-position: right;
  background-repeat: no-repeat;
  background-size: contain
}

form.green_bg input[type=date],
form.green_bg input[type=time] {
  position: relative;
  z-index: 1
}

.featured_con_wrap {
  min-width: 34%;
  justify-content: space-between
}

.featured_con img {
  width: 38%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 1vw;
  height: max-content;
  display: block
}

.featured_con p {
  font-size: clamp(12px, 1vw, 1vw);
  font-weight: 500
}

.btn_download {
  display: block;
  background: #3d5238;
  max-width: max-content;
  width: 2vw;
  height: 2vw;
  border-radius: .5vw
}

.featured_con>div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5vw
}

.btn_download img {
  width: 100% !important;
  display: block;
  height: 100%
}

.featured_projects {
  background-color: var(--lime-green);
  border-radius: 12vw 0 0 0
}

.sr-card {
  background: var(--badge)
}

img+h4.heading_s {
  margin-top: 1.5vw
}

.solutions-section {
  padding: 60px 0;
  font-family: Inter, sans-serif
}

.solutions-title {
  font-size: 36px;
  color: #23432e;
  margin-bottom: 25px
}

.solutions-search {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 10vw;
  border: 1px solid var(--green);
  margin-bottom: 3vw;
  position: relative
}

#search_result {
  position: absolute;
  top: 120%;
  width: 100%;
  background: #fff;
  padding: 2vw;
  border-radius: 2vw;
  left: 0;
  border: 1px solid var(--green);
  display: none;
  flex-wrap: wrap;
  row-gap: .5vw;
  column-gap: 1.5vw
}

.search-section-label {
  font-size: clamp(14px, 1vw, 1vw);
  display: block;
  width: 100%;
  font-weight: 600;
  color: var(--green)
}

.search-item.para_sm {
  color: var(--green)
}

.search-item.para_sm:hover {
  text-decoration: underline
}

#search_result.open {
  display: flex
}

.search-section-label~.search-section-label {
  margin-top: .5vw
}

.solutions-search input {
  border: none;
  outline: 0;
  padding: 1.2vw 2vw 1.2vw 1.2vw;
  width: 100%;
  border-radius: 2vw;
  font-size: clamp(12px, 1.2vw, 1.2vw);
  line-height: 1;
  color: var(--green)
}

.solutions-search input::placeholder {
  color: var(--placeholder-color)
}

.search-icon img {
  width: 100%;
  display: block
}

.search-icon {
  width: 100%;
  max-width: 2vw;
  margin-left: 2vw
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  width: 100%;
  justify-content: space-between
}

.d_flex_col_3>* {
  width: 32%
}

.flex_wrap {
  flex-wrap: wrap
}

.nav_list a {
  color: var(--green);
  text-decoration: none;
  transition: all .3s ease-in-out
}

.nav_list a:hover {
  text-decoration: underline
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5vw
}

.gallery_title {
  position: absolute;
  padding: 1.5vw;
  top: 0;
  font-size: clamp(16px, 1.5vw, 1.5vw)
}

.gallery-item:first-child .gallery_title {
  font-size: clamp(16px, 2vw, 2vw)
}

.gallery-item,
.gallery-item-n {
  width: 100%;
  overflow: hidden;
  position: relative;
  border-radius: 1vw
}

.gallery-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: all .5s ease-in-out
}

.gallery-section.padding-vw {
  padding-top: 0 !important
}

.gallery-item:hover img {
  scale: 1.1
}

.search-empty {
  font-size: clamp(12px, 1vw, 1vw)
}

.roung_bg {
  position: relative
}

.overflow_hidden {
  overflow: hidden
}

.roung_bg:after {
  width: 80vw;
  height: 80vw;
  content: "";
  position: absolute;
  left: 0;
  top: 5vw;
  background: var(--badge);
  border-radius: 100%;
  z-index: -1;
  min-width: 600px;
  min-height: 600px
}

.ps-title {
  margin-bottom: 0;
  font-size: clamp(14px, 1vw, 1vw);
  font-weight: 600
}

.ps-text {
  margin-top: .6vw;
  margin-bottom: 2vw;
  font-size: clamp(14px, 1vw, 1vw)
}

.ps-dimensions {
  margin-bottom: 2vw
}

.ps-dimension {
  display: flex;
  gap: 1.2vw;
  align-items: baseline;
  margin-bottom: 0
}

.ps-dimension__label {
  flex: 0 0 auto;
  min-width: 6.5em
}

.ps-dimension__value {
  flex: 1 1 auto
}

@media (max-width: 767px) {
  .ps-dimension {
    display: block
  }

  .ps-dimension__label {
    display: block;
    min-width: 0
  }
}

.ps-row {
  display: grid;
  grid-template-columns: 1fr 1fr
}

.ps-container {
  max-width: 60%;
  margin: auto
}

.ps-finish-grid {
  margin-top: .8vw;
  display: grid;
  grid-template-columns: repeat(3, max-content);
  margin-bottom: 1.2vw
}

.ps-finish-box {
  width: 3vw;
  height: 3vw;
  background: #d9d9d9;
  border-radius: 4px;
  min-width: 42px;
  min-height: 42px
}

.flex_1_2 {
  flex: 1.2
}

.flex_1_3 {
  flex: 1.3
}

.flex_1_4 {
  flex: 1.4
}

.ps-download {
  color: #000;
  text-decoration: underline;
  display: inline-block;
  font-size: clamp(14px, 1vw, 1vw)
}

.ps-container * {
  font-family: Montserrat, sans-serif
}

.border_lr {
  position: relative
}

.border_lr:after,
.border_lr:before {
  position: absolute;
  content: "";
  width: 2px;
  top: 5%;
  background: #8d8d8d;
  height: 75%
}

.border_lr:before {
  left: 0
}

.flex_1_348 {
  flex: 1.348
}

.border_lr:after {
  right: 0
}

.index-1 {
  z-index: -1
}

.category_bdr {
  border-top: 1.5px solid var(--lime-green);
  padding-top: 5vw
}

.category_bdr .img_wrapper img,
.img_wrapper.roung_bg img {
  display: block;
  width: 100%;
  height: auto
}

.project_grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 2vw !important
}

.project_grid .project-content {
  margin: 2vw 0 1vw
}

.banner_content.extra_inline_pd {
  left: 0 !important;
  padding: 0 8vw;
  max-width: 70vw
}

/* Our Work hero only: .extra_inline_pd's 70vw text column runs wide
   enough to overlap the wood-column product feature on the right side
   of the hero photo. Narrowed 10% (70vw -> 63vw) scoped to this page
   via .our-work-hero so the shared .extra_inline_pd width used by the
   other hero pages (home, solutions, experience, etc.) is untouched.
   Higher specificity than .banner_content.extra_inline_pd (3 classes
   vs 2) so it wins regardless of source order. */
.top_banner .banner_content.our-work-hero {
  max-width: 63vw
}

/* Homepage hero only: fixed heading size, scoped to .home_hero_content
   (dropped from 78px to 60px on 2026-08-23 when the line breaks changed
   to "For Modern Enterprises" as one line - that's longer than the old
   "Modern Enterprises" and ran into the vivarium at 78px - then bumped
   back up to 66px same day, still clears the box; bumped again to
   82.5px on 2026-09-17, +25%, for the "Bringing Life into / Spaces."
   copy - still clears the box since that headline is shorter; bumped
   again to 90.75px on 2026-09-28, +10%; dropped back 5% same day to
   86.2125px)
   (only used on index.blade.php) so no other page's hero is affected.
   Must also hit ".heading_animate *": the site-wide "h1, h1 *" rule
   above explicitly sets font-size on every descendant of any h1 (GSAP
   SplitText wraps each word in its own div, and the visible text lives
   in those divs) - setting font-size on the h1 alone doesn't override
   that explicit per-descendant rule, since inheritance never wins over
   a direct match. Confirmed 2026-08-21: without the "* " selector, word
   spacing (which nothing else touches) applied fine but size didn't. */
.home_hero_content .heading_animate,
.home_hero_content .heading_animate * {
  font-size: 86.2125px
}

/* The GSAP SplitText plugin wraps each word of .heading_animate in its
   own inline-block div (see app.blade.php's ".heading_animate" forEach).
   The space character between them is preserved, but at this heading's
   large serif type it reads as too tight - add a bit of breathing room. */
.home_hero_content .heading_animate div[aria-hidden] {
  margin-right: 0.22em;
}

.project_grid .project-item .project-btn {
  width: 20%;
  height: auto;
  border-radius: .5vw;
  line-height: 1;
  font-size: 2vw;
  padding: .2vw 0 .6vw 2vw !important
}


form.green_bg .input-group {
  margin-bottom: 1.6vw
}
.about{
  position: relative;
}
/* Homepage About section heading only: the site-wide h2 size
   (clamp(32px, 4.5vw, 4.5vw)) wraps "Curating Modular Biophilic
   Experiences" onto two lines by itself inside the 60vw .mx_60
   column, breaking the intended two-line split at the <br> before
   "for Modern Enterprises" (index.blade.php). Scoped to this one
   heading so no other .section_heading elsewhere is affected. */
.about h2.section_heading {
  font-size: clamp(26px, 3.4vw, 3.4vw);
}
.mx_60 {
    max-width: 60vw;
}
.mx_50 {
    max-width: 50vw;
}
.mx_40 {
    max-width: 40vw;
}
.box_padding {
    padding: 3vw;
}
.box_padding_normal {
    padding: 2vw;
}
.bg_green {
  background-color: var(--green);
}
.bg_gray {
  background-color: var(--gray);
}
.box_shadow .swiper-slide{
  padding: 4px;
}

.card_box_shadow{
box-shadow: 0px 1px 4px 0px #00000042;
}
.news-content > p {
    max-width: 80%;
}
.swiper-slide, .swiper-slide >div {
    height: auto !important;
    min-height: 100%;
}

/* Featured Projects cards (/architects). The whole card is the link, so the
   tap target covers the image and the copy — hover-only affordances do
   nothing on touch. The arrow repeats the green pill from the /projects
   grid as the visible cue. The card is an <a>, not a <div>, so it misses
   the .swiper-slide > div rule above and sets min-height itself. */
.sr-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease;
}

.sr-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px #0000001f;
}

/* Pushes the arrow to the bottom edge so it lines up across cards whose
   descriptions run to different lengths. */
.sr-card .sr-desc {
    flex: 1;
}

.sr-btn {
    align-self: flex-end;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 30px;
    margin-top: 1vw;
    border-radius: 10px;
    background: #8dbb3f;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    transition: background .3s ease;
}

.sr-card:hover .sr-btn {
    background: #7aa532;
}

.leaf_marquee {
    overflow: hidden;
}
.section_radius {
    border-radius: 0 30% 0 30%;
}
.section_border_br{
      border-radius: 0 0 30% 0;
}
  .form-container {
    width: 100%;
    text-align: center;
    margin:auto;
  }
.custom_fade_up {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.custom_fade_up.show {
    opacity: 1;
    transform: translateY(0);
}
.custom_heading_animate .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.custom_heading_animate .word.show {
    opacity: 1;
    transform: translateY(0);
}
@media (min-width:768px) {

.heading_space_right {
    margin-right: 10vw;
}


  .right_desk {
    text-align: right;
}
  .gallery-item:first-child {
    grid-column: span 2;
    grid-row: span 2
  }

  .gallery-item:nth-child(6) {
    grid-row: span 1
  }

  .gallery-item:nth-child(7) {
    grid-row: span 1
  }

  .gallery-item:nth-child(8) {
    grid-column: span 2
  }
}

@media (min-width:1200px) {
  .extra_inline_pd {
    padding-left: 8vw;
    padding-right: 8vw
  }
}


@media (max-width:1200px) {
  .banner_content.extra_inline_pd {
    left: 0 !important;
    padding: 0 3vw;
    max-width: 60vw
  }

  .top_banner .banner_content.our-work-hero {
    max-width: 54vw
  }
}

@media (max-width:1024px) {

  .top_banner {
min-height:  auto;
  }
  .testimonials-footer {
    padding-left: .8rem;
}

  .experience__icon {
    padding: 6px;
}
  .container-culture {
    flex-direction: column;
    text-align: center
  }

  .image-content,
  .text-content {
    width: 100%
  }

  .image-content {
    justify-content: center
  }

  .main-culture-gamlaa::before {
    width: 60%;
    height: 30%;
    top: 10%;
    opacity: .4
  }


  .resource-btn {
    font-size: 1.5vw
  }
  .news-title {
    font-size: 7vw
  }

  .faq-title {
    font-size: 7vw
  }

  .faq-card-question {
    font-size: 15px
  }

  .map-section {
    flex-direction: column
  }

  #map {
    width: 100%;
    height: 350px
  }
  form.green_bg input, form.green_bg textarea {
    padding: .5rem .5rem;
    border-radius: 8px;
}
form.green_bg {
    padding: 1.5rem;
    border-radius: 1rem;
}
form.green_bg button {
    border-radius: 8px;
    padding: .6rem 1rem;
}
form.green_bg label {
    margin-bottom: .5rem;
}
form.green_bg hr {
    margin-bottom: 1.2rem;
}
form.green_bg .form-row {
    gap: 1rem;
}
form.green_bg .input-group {
    margin-bottom: 1rem;
}

  .location-list {
    width: 100%;
    grid-template-columns: repeat(2, 1fr)
  }



  #map {
    width: 100%;
    height: 350px
  }

  .location-list {
    width: 100%;
    grid-template-columns: repeat(2, 1fr)
  }

  .testi-section {
    border-radius: 0 80px 0 80px
  }

  .pup-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .container-culture {
    flex-direction: column;
    text-align: center
  }

  .image-content,
  .text-content {
    width: 100%
  }



  .image-content {
    justify-content: center
  }

  .main-culture-gamlaa::before {
    width: 60%;
    height: 30%;
    top: 10%;
    opacity: .4
  }

  .padding-s {
    padding: 60px 30px
  }
  .mb_3,
.section_heading {
    margin-bottom: 5vw;
}

  .no-pd-top {
    padding-top: 0
  }
  .no-pd-bottom {
  padding-bottom: 0
}

  .no-pd-block {
    padding-top: 0;
    padding-bottom: 0
  }

  .pd_inline_6 {
    padding-left: 4vw;
    padding-right: 4vw
  }

  .project_grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .home_form {
    padding: 60px 0 30px
  }

  #map {
    width: 100%;
    height: 350px
  }

  .location-list {
    width: 100%;
    grid-template-columns: repeat(2, 1fr)
  }


  .project_grid .project-content {
    margin: 2vw 0 0vw
  }
}


@media (max-width:900px) {
  .container {
    flex-direction: column
  }

  #map,
  .city-list {
    width: 100%
  }

  #map {
    height: 300px
  }

  .project-hero__col-main {
    padding: 40px 24px 28px;
    min-height: 45vw;
    align-items: flex-start;
    align-self: start
  }


  .project-hero__col-cards {
    padding: 16px;
    grid-template-columns: 1fr 1fr;
    max-width: 100%
  }

  .ph-cards__row--top .ph-card--client {
    flex: 4
  }

  .ph-cards__col-right {
    flex: 6
  }

  .ph-cards__row--3 .ph-card--services {
    flex: 58
  }

  .ph-cards__row--3 .ph-card--architect {
    flex: 42
  }

  .solutions-col {
    flex-direction: column;
    gap: .8rem !important
  }

  .project-hero {
    padding: 80px 16px 40px
  }

  .project-hero__line {
    display: none
  }

  .project-hero__grid {
    grid-template-columns: 1fr;
    min-height: unset
  }

  .project-hero__col-main {
    padding: 40px 24px 28px;
    align-items: flex-start;
    align-self: start
  }


  .project-hero__col-cards {
    padding: 16px;
    grid-template-columns: 1fr 1fr;
    max-width: 100%
  }
}

@media (max-width:786px) {

  .section {
    padding: 20px
  }


}

@media (max-width:768px) {
  h1 ,h1 *{
  line-height: 1.2;
}
.mt_1 {
    margin-top: 2vw;
}

.mt_2 {
    margin-top: 8vw;
}
  .location-item strong {
    margin-bottom: .5rem;
}

.mx_full_mb{
  max-width: 100%;;
}
.mx_80_mb{
  max-width: 80%;
}
.top_space_mb {
    margin-top: 12vw;
}
.top_space_mb_sm{
      margin-top: 4vw;

}

.guide-btn {
    padding: 8px 16px;
}
  .gap_lg {
    gap: 50px
  }

  .guide-header {
    gap: 2vw;
}
.news-content{
  width: 100%;
}
.news-content > p {
    max-width: 100%;
}

  .mb_2 {
    margin-bottom: 4vw;
}
.mb_3,
  .section_heading {
    margin-bottom: 8vw;
  }

  nav .submenu-wrap {
    position: static;
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    padding: 0;
    display: none;
    transition: none
  }

  .submenu {
    grid-template-columns: 1fr;
    row-gap: 3vw;
    padding: 0;
    background: 0 0;
    max-height: none;
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
  }

  .submenu img {
    display: none
  }

  .submenu span {
    margin-top: 0;
    line-height: 5vw
  }

  .submenu * {
    font-size: 5vw;
    color: #ffffff7a
  }

  .submenu-arrow {
    margin-left: 2vw;
    width: 3vw;
    height: 3vw
  }

  .has_submenu {
    display: flex;
    flex-direction: row;
    gap: 3vw 0;
    color: #fff;
    flex-wrap: wrap
  }

  header:has(+main>.dark_header) .head_menu nav .has_submenu .submenu-arrow {
    background-image: url('data:image/svg+xml,<svg fill="%23ffffff" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30.727 30.727" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><g><path d="M29.994,10.183L15.363,24.812L0.733,10.184c-0.977-0.978-0.977-2.561,0-3.536c0.977-0.977,2.559-0.976,3.536,0 l11.095,11.093L26.461,6.647c0.977-0.976,2.559-0.976,3.535,0C30.971,7.624,30.971,9.206,29.994,10.183z"></path></g></g></svg>')
  }



  .design-inspiration-bgimg {
    background-image: none !important
  }

  .carousel-track {
    gap: 61px !important
  }





  .for-mb {
    display: block
  }



  .homepage .head_menu .mb_menu_btn span {
    background: #fff
  }
  .leaf_marquee {
    padding: 12vw 0 5vw;
}
  .head_menu .mb_menu_btn span {
    width: 20px;
    display: block;
    height: 2px;
    transition: all .2s ease-in;
    background: #000
  }

  header.open_menu .head_menu .mb_menu_btn span {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: #fff
  }

  header.open_menu .head_menu .mb_menu_btn span.line2 {
    display: none
  }

  header.open_menu .head_menu .mb_menu_btn .line1 {
    transform: rotate(45deg)
  }

  header.open_menu .head_menu .mb_menu_btn .line3 {
    transform: rotate(135deg)
  }

  header .head_menu nav a {
    font-size: 5vw;
    line-height: 5vw;
    padding: 2vw 3vw;
    text-align: center;
    color: #fff
  }

  header .head_menu nav a.nav-mobile-only {
    display: block
  }

.box_padding,
.box_padding_normal {
    padding: 5vw;
}
  .about .about_sec_flex {
    flex-direction: column-reverse
  }

  .about .about_sec_flex .about_sec_content {
    max-width: 100%
  }


.about_sec_content p {
    margin: 0 0 3vw
  }

  .about .about_leaf_svg {
    left: initial;
    right: -10vw;
    top: 8vw;
    width: 40vw;
    height: 20vw
  }


  .services_slider .service_box .service_img_wrap {
    margin-bottom: 4vw;
  }

  .services_slider .service_box .service_info {
    padding: 0;
    gap: 2vw
  }

  .services_slider .service_box .service_info .service_cta {
    width: 12vw;
    height: auto;
    border-radius: 5vw;
    padding: 2vw 3vw
  }

  .services_slider .service_box .service_info .service_cta img {
    width: 3vw
  }


  .our_work .work_tiles {
    overflow-x: scroll;
    column-gap: initial;
    display: -webkit-box;
    padding: 0 3vw;
  }

btn_s
  .we_floating {
    margin: 0;
    flex-direction: column;
    align-items: center
  }

  .we_floating .we_flex {
    gap: 3vw
  }

  .we_floating .we_flex h2 {
    font-size: 8vw;
    line-height: 9vw
  }

  .we_floating .we_flex .we_list {
    gap: 2vw
  }

  .we_floating .fix_para {
    max-width: 65%;
    margin: 0 0 0 auto
  }

  .we_floating p {
    max-width: 100%;
    font-size: 3.5vw;
    line-height: 5vw
  }

  .gap-2 {
    gap: 4vw
  }


  .radius {
    border-radius: 6vw
  }

  .container_s {
    padding: 0 5vw !important
  }



  .inspire_sec .inspire_tiles .inspire_tile1 {
    display: none
  }

  .inspire_sec .inspire_tiles .inspire_tile3 .inspire_tile3a {
    display: none
  }

  .inspire_sec .inspire_tiles .inspire_tile2 {
    width: 30%
  }

  .inspire_sec .inspire_tiles .inspire_tile2 img {
    height: 100%
  }

  .inspire_sec .inspire_tiles .inspire_tile3 {
    width: 65%
  }

  .inspire_sec .inspire_tiles .inspire_tile3>div {
    padding: 0
  }


  .inspire_sec .inspire_tiles img.inspire_leaf {
    left: 2vw;
    bottom: 2vw
  }

  .form_s {
    flex-direction: column;
    gap: 4vw;
  }

  .form_s form {
    width: 100%;
    row-gap: 4vw;
    flex-direction: column
  }
  .form_s form textarea,
  .form_s form input {
    padding:2vw;
            width: 100%;
                    border-width: 1px
  }
  .form_s form textarea{
    min-height: 80px;
  }

.form_s form button {
    border-radius: 2vw;
    font-size: 3.5vw;
    padding: 2.5vw 5vw;
}

  footer {
    padding: 8vw 5vw
  }

  footer .footer_container {
    gap: 6vw
  }

  footer .footer_row {
    flex-direction: column;
    gap: 4vw
  }

  footer .footer_top {
    gap: 10vw
  }

  footer .footer_text {
    width: 100%
  }

  footer .footer_text p {
    font-size: 3.5vw;
    line-height: 1.6
  }

  footer .footer_contact_info {
    width: 100%;
    gap: 3vw
  }

  footer .footer_contact_info .f_info {
    gap: 2vw
  }

  footer .footer_contact_info .f_info:first-child img {
    margin-top: .5vw
  }


  footer .footer_logo img {
    max-width: 50vw
  }

  footer .footer_social {
    gap: 4vw;
    flex-wrap: wrap
  }

  footer .footer_social .social_icon img {
    width: 6vw;
    height: 6vw
  }

  footer .footer_bottom {
    gap: 4vw;
    padding-top: 4vw
  }

  footer .footer_line {
    height: 2px
  }

  footer .footer_nav {
    gap: 3vw 5vw;
    justify-content: flex-start
  }

  footer .footer_nav a {
    font-size: 3.2vw
  }

  .contact_hero {
    flex-direction: column;
    gap: 6vw
  }

  .contact_hero_content {
    max-width: 100%
  }


  .contact_hero_image {
    max-width: 100%
  }

  .contact_form_section .contact_form_box .form-bg-left-leaf {
    width: 25vw;
    height: 12vw;
    left: -9vw;
    top: 40vw
  }

  .contact_form_section .contact_form_box .form-bg-right-leaf {
    width: 12vw;
    height: 20vw;
    right: -7vw;
    top: 50vw
  }


  .contact_form_section .contact_form_box {
    width: 90%;
    margin: 0 auto
  }


  .contact_form_wrap form {
    gap: 4vw
  }

  .form_group label {
    font-size: 3.5vw
  }

  .form_group input,
  .form_group select,
  .form_group textarea {
    padding: 3vw;
    font-size: 3.5vw;
    border-radius: 2vw
  }

  .form_group textarea {
    min-height: 25vw
  }

  .form_row {
    flex-direction: column;
    gap: 4vw
  }

  .form_submit_btn {
    font-size: 3.5vw;
    padding: 3vw 8vw;
    border-radius: 6vw
  }

  .contact_form_images {
    width: 100%;
    flex-direction: row;
    padding-top: 0
  }

  .contact_form_section .contact_form_images img {
    max-width: 80%;
    margin: 0 0 0 auto
  }

  .contact_map_wrap {
    flex-direction: column;
    gap: 6vw
  }

  .contact_map {
    width: 100%
  }

  .contact_map iframe {
    height: 60vw
  }

  .contact_locations {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .location_item h4 {
    gap: 2vw
  }

  .location_item h4 img {
    width: 3.5vw
  }

  .location_item p {
    padding-left: 5vw
  }



  .mxw-50 {
    max-width: 100%
  }

  .why-box {
    width: 100%
  }


  .mxw-5 {
    max-width: 100%
  }

  .why-inner {
    max-width: 100%
  }

  .why-item {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #3a2c1c
  }

  .job-row {
    flex-direction: column;
    gap: 15px;
    padding: 22px 12px
  }

  .job-left {
    gap: 15px
  }

  .popup {
    right: auto;
    left: 0
  }

  .text-content h1 {
    font-size: 10vw
  }


  .main-culture-gamlaa::before {
    display: none
  }

  .gallery {
    gap: 16px
  }


  .arrow-wrapper {
    justify-content: center
  }

  .top-line {
    width: 200px
  }


  .hero {
    background-position: center bottom;
    background-size: cover;
    padding: 60px 20px;
    min-height: 250px
  }


  .container_s .swiper {
    padding-left: 0 !important
  }

  .services_slider.wyt .swiper-slide .service_box.wyg_b * {
    align-items: center
  }

  .btn {
    font-size: 4.4vw
  }


  .main-title {
    font-size: 6vw;
    color: #0e3b2e;
    margin-bottom: 16px
  }

  .custom-form {
    width: 100%
  }

  .form-row {
    display: flex;
    gap: 20px
  }

  .form-group {
    flex: 1;
    text-align: left;
    margin-bottom: 30px
  }

  .form-label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: #222
  }

  .form-input,
  .form-select,
  .form-textarea {
    width: 100%;
    padding: 22px 16px;
    border-radius: 10px;
    border: none;
    background-color: #e9e9e9;
    font-size: 15px;
    outline: 0;
    transition: .2s ease;
    box-shadow: 0 2px 5px 0 #00000038
  }

  .phone-combined {
    display: flex;
    width: 100%;
    background-color: #e9e9e9;
    border-radius: 10px;
    overflow: hidden;
    padding: 22px 16px
  }

  .phone-code {
    border: none;
    background: 0 0;
    font-size: 15px;
    outline: 0;
    cursor: pointer
  }

  .phone-number {
    flex: 1;
    border: none;
    background: 0 0;
    font-size: 15px;
    outline: 0
  }

  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus {
    background-color: #e2e2e2
  }

  .form-textarea {
    min-height: 160px;
    resize: vertical
  }

  .phone-wrapper {
    display: flex;
    gap: 8px
  }

  .phone-select {
    width: 90px
  }

  .submit-button {
    margin-top: 20px;
    background-color: #0e3b2e;
    color: #fff;
    border: none;
    padding: 16px 40px;
    border-radius: 40px;
    font-size: 4.4vw;
    font-weight: 500;
    cursor: pointer;
    transition: .3s ease
  }

  .submit-button:hover {
    background-color: #0a2f24
  }

  .why-content h2 {
    font-size: 10vw;
    margin-bottom: 28px;
    color: #3a2c1c
  }

  .job-text h3 {
    font-size: 6vw;
    margin-bottom: 4px;
    font-family: Montserrat, sans-serif;
    font-weight: 600
  }

  .job-id {
    font-size: 6vw;
    color: #777;
    min-width: 30px
  }

  .job-text p {
    font-size: 4vw
  }

  .apply-btn {
    background: #0f3d2e;
    color: #fff;
    border: none;
    padding: 10px 22px;
    border-radius: 22px;
    cursor: pointer;
    margin-bottom: 4px;
    font-family: Montserrat, sans-serif;
    font-size: 4.4vw
  }



  .resource-btn {
    font-size: 3.5vw;
    padding: 8px 14px;
    margin-top: 20px
  }

  .resource-nav {
    margin-top: 24px
  }

  .resource-nav button {
    width: 38px;
    height: 38px;
    font-size: 18px
  }

  .guide-slider {
    gap: 20px
  }


  .guide-navigation {
    margin-top: 20px
  }

  .guide-arrow {
    width: 38px;
    height: 38px
  }

  .news-title {
    font-size: 9vw;
    margin-bottom: 20px
  }

  .news-read-btn {
    padding: 8px 20px
  }

  .news-buttons {
    margin-top: 20px
  }

  .news-arrow {
    width: 38px;
    height: 38px
  }

  .faq-title {
    font-size: 9vw;
    margin-bottom: 24px
  }

  .faq-list {
    grid-template-columns: 1fr;
    gap: 14px
  }

  .faq-card {
    padding: 18px 20px;
    border-radius: 12px
  }

  .faq-card-question {
    font-size: 3.8vw
  }

  .faq-card-answer {
    font-size: 3.3vw
  }




  .fade-up {
    opacity: 0;
    transform: translateY(60px);
    will-change: transform, opacity
  }

  .services_slider .service_box.wyg_b {
    padding: 8vw 5vw;
    gap: 5vw
  }

  .d_flex {
    flex-direction: column
  }

  .wcu .content {
    padding: 5vw
  }

  .form-left {
    text-align: center
  }

  .form-right {
    width: 100%
  }

  .experience-form .form-row {
    flex-direction: column;
    gap: 0
  }

  .experience-form input,
  .experience-form textarea {
    font-size: 16px
  }

  .experience-form textarea {
    height: 100px
  }

  .experience-form button {
    width: 100%;
    text-align: center
  }

  .how-it-works-steps {
    flex-direction: column;
    gap: 25px
  }

  .how-it-works-step {
    width: 100%
  }

  .project-name {
    font-size: 6vw !important
  }

  .project-title {
    font-size: 10vw !important
  }

  .ecf-footer-img {
    height: 18px !important;
    margin-bottom: 20px !important
  }

  .design-inspiration-content p {
    font-size: 4vw !important
  }

  .arrow.right {
    right: 20px !important
  }

  .for-dsk {
    display: none
  }


  


  .about .about_sec_flex {
    flex-direction: column-reverse
  }

  .about .about_sec_flex .about_sec_content {
    max-width: 100%
  }


.about_sec_content p {
    margin: 0 0 3vw
  }

  .about .about_leaf_svg {
    left: initial;
    right: -10vw;
    top: 8vw;
    width: 40vw;
    height: 20vw
  }

  .services_slider .service_box .service_info {
    padding: 0;
    gap: 2vw
  }


  .services_slider .service_box .service_info .service_cta {
    width: 12vw;
    height: auto;
    border-radius: 5vw;
    padding: 2vw 3vw
  }

  .services_slider .service_box .service_info .service_cta img {
    width: 3vw
  }

  .our_work .work_tiles {
    overflow-x: scroll;
    column-gap: initial;
    display: -webkit-box;
  }

btn_s
  .we_floating {
    margin: 0;
    flex-direction: column;
    align-items: center
  }

  .we_floating .we_flex {
    gap: 3vw
  }

  .we_floating .we_flex h2 {
    font-size: 8vw;
    line-height: 9vw
  }

  .we_floating .we_flex .we_list {
    gap: 2vw
  }

  .we_floating .fix_para {
    max-width: 65%;
    margin: 0 0 0 auto
  }

  .we_floating p {
    max-width: 100%;
    font-size: 3.5vw;
    line-height: 5vw
  }



  .inspire_sec .inspire_tiles .inspire_tile1 {
    display: none
  }

  .inspire_sec .inspire_tiles .inspire_tile3 .inspire_tile3a {
    display: none
  }

  .inspire_sec .inspire_tiles .inspire_tile2 {
    width: 30%
  }

  .inspire_sec .inspire_tiles .inspire_tile2 img {
    height: 100%
  }

  .inspire_sec .inspire_tiles .inspire_tile3 {
    width: 65%
  }

  .inspire_sec .inspire_tiles .inspire_tile3>div {
    padding: 0
  }

  .inspire_sec .inspire_tiles img.inspire_leaf {
    left: 2vw;
    bottom: 2vw
  }

  .form_s {
    flex-direction: column;
    gap: 4vw;
  }

  .form_s form {
    width: 100%;
    row-gap: 4vw;
    flex-direction: column
  }



  footer {
    padding: 8vw 5vw
  }

  footer .footer_container {
    gap: 6vw
  }

  footer .footer_row {
    flex-direction: column;
    gap: 4vw
  }

  footer .footer_top {
    gap: 10vw
  }

  footer .footer_text {
    width: 100%
  }

  footer .footer_text p {
    font-size: 3.5vw;
    line-height: 1.6
  }

  footer .footer_contact_info {
    width: 100%;
    gap: 3vw
  }

  footer .footer_contact_info .f_info {
    gap: 2vw
  }

  footer .footer_contact_info .f_info:first-child img {
    margin-top: .5vw
  }


  footer .footer_logo img {
    max-width: 50vw
  }


  footer .footer_social {
    gap: 4vw;
    flex-wrap: wrap
  }

  footer .footer_social .social_icon img {
    width: 6vw;
    height: 6vw
  }

  footer .footer_bottom {
    gap: 4vw;
    padding-top: 4vw
  }

  footer .footer_line {
    height: 2px
  }

  footer .footer_nav {
    gap: 3vw 5vw;
    justify-content: flex-start
  }

  footer .footer_nav a {
    font-size: 3.2vw
  }

  .contact_hero {
    flex-direction: column;
    gap: 6vw
  }

  .contact_hero_content {
    max-width: 100%
  }


  .contact_hero_image {
    max-width: 100%
  }

  .contact_form_section .contact_form_box .form-bg-left-leaf {
    width: 25vw;
    height: 12vw;
    left: -9vw;
    top: 40vw
  }

  .contact_form_section .contact_form_box .form-bg-right-leaf {
    width: 12vw;
    height: 20vw;
    right: -7vw;
    top: 50vw
  }

  .contact_form_section .contact_form_box {
    width: 90%;
    margin: 0 auto
  }






  .contact_map_wrap {
    flex-direction: column;
    gap: 6vw
  }

  .contact_map {
    width: 100%
  }

  .contact_map iframe {
    height: 60vw
  }



  .section-one {
    height: auto;
    padding: 40px 20px
  }

  .why-box {
    width: 100%
  }

  .why-inner {
    max-width: 100%
  }

  .why-item {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #3a2c1c
  }

  .job-row {
    flex-direction: column;
    gap: 15px;
    padding: 22px 12px
  }

  .job-left {
    gap: 15px
  }

  .popup {
    right: auto;
    left: 0
  }

  .hero {
    background-position: center bottom;
    background-size: cover;
    min-height: 250px
  }


  .btn {
    font-size: 4.4vw
  }



  .main-title {
    font-size: 6vw;
    color: #0e3b2e;
    margin-bottom: 16px
  }


  .custom-form {
    width: 100%
  }

  .form-row {
    display: flex;
    gap: 20px
  }

  .form-group {
    flex: 1;
    text-align: left;
    margin-bottom: 30px
  }

  .form-label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: #222
  }

  .form-input,
  .form-select,
  .form-textarea {
    width: 100%;
    padding: 22px 16px;
    border-radius: 10px;
    border: none;
    background-color: #e9e9e9;
    font-size: 15px;
    outline: 0;
    transition: .2s ease;
    box-shadow: 0 2px 5px 0 #00000038
  }

  .phone-combined {
    display: flex;
    width: 100%;
    background-color: #e9e9e9;
    border-radius: 10px;
    overflow: hidden;
    padding: 22px 16px
  }

  .phone-code {
    border: none;
    background: 0 0;
    font-size: 15px;
    outline: 0;
    cursor: pointer
  }

  .phone-number {
    flex: 1;
    border: none;
    background: 0 0;
    font-size: 15px;
    outline: 0
  }

  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus {
    background-color: #e2e2e2
  }

  .form-textarea {
    min-height: 160px;
    resize: vertical
  }

  .phone-wrapper {
    display: flex;
    gap: 8px
  }

  .phone-select {
    width: 90px
  }

  .submit-button {
    margin-top: 20px;
    background-color: #0e3b2e;
    color: #fff;
    border: none;
    padding: 16px 40px;
    border-radius: 40px;
    font-size: 4.4vw;
    font-weight: 500;
    cursor: pointer;
    transition: .3s ease
  }

  .submit-button:hover {
    background-color: #0a2f24
  }

  .why-content h2 {
    font-size: 10vw;
    margin-bottom: 28px;
    color: #3a2c1c
  }


  .job-text h3 {
    font-size: 6vw;
    margin-bottom: 4px;
    font-family: Montserrat, sans-serif;
    font-weight: 600
  }

  .job-id {
    font-size: 6vw;
    color: #777;
    min-width: 30px
  }

  .job-text p {
    font-size: 4vw
  }

  .apply-btn {
    background: #0f3d2e;
    color: #fff;
    border: none;
    padding: 10px 22px;
    border-radius: 22px;
    cursor: pointer;
    margin-bottom: 4px;
    font-family: Montserrat, sans-serif;
    font-size: 4.4vw
  }


  .fade-up {
    opacity: 0;
    transform: translateY(60px);
    will-change: transform, opacity
  }

  .form-right {
    width: 100%
  }

  .experience-form .form-row {
    flex-direction: column;
    gap: 0
  }

  .experience-form input,
  .experience-form textarea {
    font-size: 16px
  }

  .experience-form textarea {
    height: 100px
  }

  .experience-form button {
    width: 100%;
    text-align: center
  }

  .car-inner {
    grid-template-columns: 1fr;
  }

  .testi-section {
    border-radius: 0 60px 0 60px;
  }



  .testi-slide {
    grid-template-columns: 1fr;
  }

  .testi-slide__img {
    width: 100%;
    aspect-ratio: 4/3.5;
    margin: 0 auto
  }

  .ecf-row--1 .ecf-field {
    flex: 0 0 100%
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem
  }

  .mb_btm_pd_0 {
    padding-bottom: 0 !important
  }

  .category_bdr {
    padding-top: 10vw
  }

  .ps-finish-grid {
    margin-top: .8rem;
    margin-bottom: 1.2rem
  }

  h2.heading_s+.para_sm,
  h3.heading_s+.para_sm {
    margin-top: .6rem
  }

  .gap_mb_md {
    gap: 1.8rem
  }

  .gap_sm {
    gap: .8rem
  }

  .ps-text {
    margin-top: .5rem;
    margin-bottom: 1.5rem
  }

  .ps-container {
    max-width: 100%
  }

  .gap_xsm {
    gap: .5rem
  }

  .gallery_title {
    padding: .5rem
  }

  .banner_content.extra_inline_pd {
    left: 50% !important;
    max-width: 100%
  }

  .search-section-label~.search-section-label {
    margin-top: .5rem
  }

  .solutions-search {
    margin-bottom: 1.5rem
  }

  .solutions-search input {
    padding: .6rem 1rem .6rem .5rem;
    border-radius: 2rem
  }

  .solutions-grid {
    gap: .5rem
  }

  #search_result {
    padding: 1rem;
    border-radius: 1remvw;
    row-gap: .5rem
  }

  .search-icon {
    max-width: 20px;
    margin-left: 1rem
  }

  .mt_lg {
    margin-top: 1.2rem
  }
  .mb_dark_header_space_top {
    margin-top: 8vw;
  }



  .radius_md {
    border-radius: 1rem
  }
  .services_slider .service_box .service_img_wrap img.service_img,
.inner_radius {
    border-radius: 0.5rem;
}

    .pd_sm {
    padding: .5rem;
  }
.news-card,
  .pd_md {
    padding: 1rem
  }
  h4.heading_s+.para_sm {
    margin-top: .4rem
  }

  img+h4.heading_s {
    margin-top: .8rem
  }

  .featured_con img {
    border-radius: .5rem;
    width: 30%;
    max-width: 80px
  }

  .gap_md {
    gap: 1.5rem
  }

  .featured_con>div {
    gap: .4rem
  }

  .btn_download {
    border-radius: .3rem;
    min-width: 18px;
    min-height: 18px;
    margin-top: .2rem
  }

  .d_flex.mb_row {
    flex-direction: row
  }

  .featured_con_wrap {
    min-width: 100%
  }

  .padding-s {
    padding: 60px 16px
  }

  .mb_center {
    text-align: center;
    width: 100%
  }

  .padding-vw {
    padding: 12vw 5vw
  }
  .padding-vw-top{
    padding-top: 12vw;
  }
  .padding-vw-bottom{
  padding-bottom: 12vw;
}
  .padding-vw-inline{
  padding-inline: 5vw;
}
.padding-vw-left{
  padding-left: 5vw;
}
.padding-vw-block{
  padding-block: 12vw;
}

  .no-pd-top-mb,
  .no-pd-top {
    padding-top: 0
  }
.no-pd-bottom {
  padding-bottom: 0
}
  .no-pd-block {
    padding-top: 0;
    padding-bottom: 0
  }
.no-mb-inline-pd{
  padding-left: 0;
  padding-right: 0;
}
.inline-pd-mb{
  padding-left: 5vw;
  padding-right: 5vw;
}
.wcu_leaf {
    rotate: 90deg;
    left: 50%;
    top: -28px;
    bottom: auto;
    width: 36px;
    height: 36px;
    transform: translateY(21px);
}




  



  .about .about_sec_flex {
    flex-direction: column-reverse
  }

  .about .about_sec_flex .about_sec_content {
    max-width: 100%
  }

  .about .about_leaf_svg {
    left: initial;
    right: -10vw;
    top: 8vw;
    width: 40vw;
    height: 20vw
  }


.section_border_br{
      border-radius: 0 0 20% 0;
}
  .services_slider .swiper-button-next:after,
  .services_slider .swiper-button-prev:after {
    display: none
  }

  .services_slider .swiper-button-next,
  .services_slider .swiper-button-prev {
    display: none
  }

  .services_slider .service_box .service_info {
    padding: 0;
    gap: 2vw
  }

  .services_slider .service_box .service_info .service_cta {
    width: 12vw;
    height: auto;
    border-radius: 5vw;
    padding: 2vw 3vw
  }

  .services_slider .service_box .service_info .service_cta img {
    width: 3vw
  }




  .our_work .work_tiles .work_box {
    width: 45%;
    padding: 0 2vw;
    margin: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    flex: initial
  }

  .our_work .work_tiles:hover .work_box {
    flex: initial;
    opacity: initial
  }

  .our_work .work_tiles .work_box img {
    border-radius: 0 6vw;
  }

  .our_work .work_tiles .work_box:hover {
    flex: initial;
    opacity: 1
  }

  .our_work .work_tiles .work_box h4 {
    font-size: 3.5vw;
    line-height: 4.5vw;
    margin: 2vw 0 0
  }

  .we_floating {
    padding-bottom: 30vw;
    margin: 0;
    flex-direction: column;
    align-items: center
  }

  .we_floating .we_flex {
    gap: 3vw
  }

  .we_floating .we_flex h2 {
    font-size: 8vw;
    line-height: 9vw
  }

  .we_floating .we_flex .we_list {
    gap: 2vw
  }

  .we_floating .fix_para {
    max-width: 65%;
    margin: 0 0 0 auto
  }

  .we_floating p {
    max-width: 100%;
    font-size: 3.5vw;
    line-height: 5vw
  }

  .gap-2 {
    gap: 4vw
  }


  .radius {
    border-radius: 6vw
  }

  .container_s {
    padding: 0 5vw !important
  }



  .inspire_sec .inspire_tiles .inspire_tile1 {
    display: none
  }

  .inspire_sec .inspire_tiles .inspire_tile3 .inspire_tile3a {
    display: none
  }

  .inspire_sec .inspire_tiles .inspire_tile2 {
    width: 30%
  }

  .inspire_sec .inspire_tiles .inspire_tile2 img {
    height: 100%
  }

  .inspire_sec .inspire_tiles .inspire_tile3 {
    width: 65%
  }

  .inspire_sec .inspire_tiles .inspire_tile3>div {
    padding: 0
  }

  .inspire_sec .inspire_tiles img.inspire_leaf {
    left: 2vw;
    bottom: 2vw
  }

  /* New mobile-only "Design Inspiration" teaser: the 7 rules just above
     (.inspire_tiles ...) used to hide 3 of the 5 images on mobile via
     display:none with nothing replacing them - no slider, no scroll, no
     way to see them. .inspire_tiles now carries .for-dsk (hidden at this
     breakpoint) in favour of a swiper showing all 5 - see
     .inspire_tiles_mb in index.blade.php and the inspireMbSwiper init in
     that page's script block. The rules just above are consequently dead
     (their parent is display:none here) but left in place rather than
     hunting down the ~4 near-duplicate copies of that block scattered
     through this stylesheet's repeated max-width:768px sections. */

  /* .inspire_tiles.for-dsk alone doesn't hide it here: the base rule
     .inspire_sec .inspire_tiles { display: flex } is a 2-class selector
     (0,2,0), which beats the plain 1-class .for-dsk { display: none }
     (0,1,0) on specificity regardless of source order - so the desktop
     collage kept rendering above the mobile swiper instead of being
     replaced by it. This 3-class override (0,3,0) actually wins. */
  .inspire_sec .inspire_tiles.for-dsk {
    display: none
  }

  .inspire_tiles_mb h2 {
    color: #472f22;
    opacity: .6;
    margin: 0 0 4vw
  }

  .inspire-mb-swiper {
    overflow: visible;
  }

  .inspire-mb-swiper .swiper-slide a {
    display: block;
    overflow: hidden;
    border-radius: 4vw
  }

  .inspire-mb-swiper .swiper-slide img {
    height: 60vw;
    object-fit: cover
  }

  .inspire-mb-swiper-nav {
    display: flex;
    gap: 3vw;
    margin: 4vw 0 0
  }

  .inspire-mb-swiper-nav .swiper-button-next,
  .inspire-mb-swiper-nav .swiper-button-prev {
    position: static;
    width: 11vw;
    height: 11vw;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    border-radius: 50%;
    background: var(--lime-green);
    display: flex;
    align-items: center;
    justify-content: center
  }

  .inspire-mb-swiper-nav .swiper-button-next::after,
  .inspire-mb-swiper-nav .swiper-button-prev::after {
    display: none
  }

  .inspire-mb-swiper-nav img {
    width: 5vw;
    min-width: 18px
  }


  .form_s {
    flex-direction: column;
    gap: 4vw;
  }

  .form_s form {
    width: 100%;
    row-gap: 4vw;
    flex-direction: column
  }


  footer {
    padding: 8vw 5vw
  }

  footer .footer_container {
    gap: 6vw
  }

  footer .footer_row {
    flex-direction: column;
    gap: 4vw
  }

  footer .footer_top {
    gap: 10vw
  }

  footer .footer_text {
    width: 100%
  }

  footer .footer_text p {
    font-size: 3.5vw;
    line-height: 1.6
  }

  footer .footer_contact_info {
    width: 100%;
    gap: 3vw
  }

  footer .footer_contact_info .f_info {
    gap: 2vw
  }

  footer .footer_contact_info .f_info:first-child img {
    margin-top: .5vw
  }


  footer .footer_logo img {
    max-width: 50vw
  }


  footer .footer_social {
    gap: 4vw;
    flex-wrap: wrap
  }

  footer .footer_social .social_icon img {
    width: 6vw;
    height: 6vw
  }

  footer .footer_bottom {
    gap: 4vw;
    padding-top: 4vw
  }

  footer .footer_line {
    height: 2px
  }

  footer .footer_nav {
    gap: 3vw 5vw;
    justify-content: flex-start
  }

  footer .footer_nav a {
    font-size: 3.2vw
  }


  .contact_hero_content {
    max-width: 100%
  }


  .contact_hero_image {
    max-width: 100%
  }

  .contact_form_section .contact_form_box .form-bg-left-leaf {
    width: 25vw;
    height: 12vw;
    left: -9vw;
    top: 40vw
  }

  .contact_form_section .contact_form_box .form-bg-right-leaf {
    width: 12vw;
    height: 20vw;
    right: -7vw;
    top: 50vw
  }

  .contact_leaf_marquee {
    padding: 0 0 8vw
  }

  .contact_form_section .contact_form_box {
    width: 90%;
    margin: 0 auto
  }





  .contact_map_wrap {
    flex-direction: column;
    gap: 6vw
  }

  .contact_map {
    width: 100%
  }

  .contact_map iframe {
    height: 60vw
  }



  .mxw-50 {
    max-width: 100%
  }

  .why-box {
    width: 100%
  }


  .heading_s+.para_sm {
    margin-top: .4rem
  }
  .radius_lg {
    border-radius: 1.5rem
  }

  .pd_mb_normal {
    padding: 1.5rem
  }

  .d_flex.mb_column_reverse {
    flex-direction: column-reverse
  }

  .mb_gap_nornal {
    gap: 8vw;
  }

  .mxw-5 {
    max-width: 100%
  }

  .why-inner {
    max-width: 100%
  }

  .why-item {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #3a2c1c
  }


  .job-row {
    flex-direction: column;
    gap: 15px;
    padding: 22px 12px
  }

  .job-left {
    gap: 15px
  }

  .popup {
    right: auto;
    left: 0
  }

  .project-hero__col-cards {
    gap: 1rem
  }


  .fade-up {
    opacity: 0;
    transform: translateY(60px);
    will-change: transform, opacity
  }

  .services_slider .service_box.wyg_b {
    padding: 8vw 5vw;
    gap: 5vw
  }

  .d_flex {
    flex-direction: column
  }

  .wcu .content {
    padding: 5vw
  }

  .how-it-works-steps {
    flex-direction: column;
    gap: 25px
  }

  .how-it-works-step {
    width: 100%
  }

  .mb_no_pd {
    padding: 0
  }

  .project-name {
    font-size: 3vw !important
  }

  .project-title {
    font-size: 10vw !important;
    margin-bottom: 5vw
  }

  .ecf-footer-img {
    height: 18px !important;
    margin-bottom: 20px !important
  }


  .top_banner .banner_content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: start;
    bottom: unset;
    margin: unset;
    max-height: unset;
    z-index: 2
  }

  /* Homepage hero on mobile: the 66px fixed heading size (set above,
     scoped to .home_hero_content) has no phone-width override, so each
     word wraps onto its own line and the text block runs ~475px tall,
     covering most of the vivarium product photo underneath. Shrink it
     back down to a size that still wraps to the same 3 lines as desktop
     ("Curating" / "Biophilic Experiences" / "For Modern Enterprises"). */
  .home_hero_content .heading_animate,
  .home_hero_content .heading_animate * {
    font-size: clamp(22px, 6vw, 24px)
  }

  /* Flat scrim so the (now much smaller) white heading still has
     contrast wherever it lands over the photo, without a gradient that
     would leave one part of the image darker than another. Sits above
     the plain-flow hero images (z-index auto) and below the text. */
  .top_banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .25);
    z-index: 1;
    pointer-events: none
  }



  .design-inspiration-bgimg {
    background-image: none !important
  }

  .carousel-track {
    gap: 61px !important
  }

  .for-mb {
    display: block
  }

  header {
    padding: 4vw
  }

  header .head_menu nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: -100%;
    bottom: 0;
    background: #000;
    height: 100vh;
    width: 100%;
    justify-content: center;
    gap: 3vw;
    z-index: 10
  }

  header a.head_logg {
    max-width: 30%;
    min-width:120px;
  }

  header .head_menu .mb_menu_btn {
    display: flex;
    flex-direction: column;
    gap: 1vw;
    margin-left: 2vw;
    position: relative;
    width: 20px
  }

  .homepage .head_menu .mb_menu_btn span {
    background: #fff
  }

  .head_menu .mb_menu_btn span {
    width: 20px;
    display: block;
    height: 2px;
    transition: all .2s ease-in;
    background: #000
  }

  header:has(+main>.dark_header) .head_menu .mb_menu_btn span {
    background: #000
  }

header.darkHeader .head_menu .mb_menu_btn span{
  background: #ffffff !important;
}

  header:has(+main>.dark_header) .head_menu .mb_menu_btn.close_menu span {
    background: #fff
  }

  header:has(+main>.dark_header) .head_menu nav a {
    color: #fff
  }

  header.open_menu .head_menu .mb_menu_btn span {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: #fff
  }

  header.open_menu .head_menu .mb_menu_btn span.line2 {
    display: none
  }

  header.open_menu .head_menu .mb_menu_btn .line1 {
    transform: rotate(45deg)
  }

  header.open_menu .head_menu .mb_menu_btn .line3 {
    transform: rotate(135deg)
  }

  header .head_menu nav a {
    font-size: 5vw;
    line-height: 5vw;
    padding: 2vw 3vw;
    text-align: center;
    color: #fff
  }

  header .head_menu nav a.nav-mobile-only {
    display: block
  }

  header .head_menu nav>a header .head_menu nav>.has_submenu {
    transform: translatex(100%);
    opacity: 0;
    visibility: hidden
  }



  .about .about_sec_flex {
    flex-direction: column-reverse
  }

  .about .about_sec_flex .about_sec_content {
    max-width: 100%
  }

  .about .about_sec_flex .about_sec_content p {
    margin: 0 0 3vw
  }

  .about .about_leaf_svg {
    left: initial;
    right: -10vw;
    top: 8vw;
    width: 40vw;
    height: 20vw
  }


  .services_slider .service_box {
    width: 100%;
    padding: 3vw;
  }


  .services_slider .service_box .service_info {
    padding: 0;
    gap: 2vw
  }

  .services_slider .service_box .service_info .service_cta {
    width: 12vw;
    height: auto;
    border-radius: 5vw;
    padding: 2vw 3vw
  }

  .services_slider .service_box .service_info .service_cta img {
    width: 3vw
  }


btn_s
  .we_floating {
    margin: 0;
    flex-direction: column;
    align-items: center
  }

  .we_floating .we_flex {
    gap: 3vw
  }

  .we_floating .we_flex h2 {
    font-size: 8vw;
    line-height: 9vw
  }

  .we_floating .we_flex .we_list {
    gap: 2vw
  }

  .we_floating .fix_para {
    max-width: 65%;
    margin: 0 0 0 auto
  }

  .we_floating p {
    max-width: 100%;
    font-size: 3.5vw;
    line-height: 5vw
  }



  .inspire_sec .inspire_tiles .inspire_tile1 {
    display: none
  }

  .inspire_sec .inspire_tiles .inspire_tile3 .inspire_tile3a {
    display: none
  }

  .inspire_sec .inspire_tiles .inspire_tile2 {
    width: 30%
  }

  .inspire_sec .inspire_tiles .inspire_tile2 img {
    height: 100%
  }

  .inspire_sec .inspire_tiles .inspire_tile3 {
    width: 65%
  }

  .inspire_sec .inspire_tiles .inspire_tile3>div {
    padding: 0
  }


  .inspire_sec .inspire_tiles img.inspire_leaf {
    left: 2vw;
    bottom: 2vw
  }

  .form_s {
    flex-direction: column;
    gap: 4vw;
  }

  .form_s form {
    width: 100%;
    row-gap: 4vw;
    flex-direction: column
  }


  footer {
    padding: 8vw 5vw
  }

  footer .footer_container {
    gap: 6vw
  }

  footer .footer_row {
    flex-direction: column;
    gap: 4vw
  }

  footer .footer_top {
    gap: 10vw
  }

  footer .footer_text {
    width: 100%
  }

  footer .footer_text p {
    font-size: 3.5vw;
    line-height: 1.6
  }

  footer .footer_contact_info {
    width: 100%;
    gap: 3vw
  }

  footer .footer_contact_info .f_info {
    gap: 2vw
  }

  footer .footer_contact_info .f_info:first-child img {
    margin-top: .5vw
  }

  footer .footer_contact_info .f_info img {
    width: 4vw;
    min-width: 4vw;
    height: 5vw
  }

  footer .footer_contact_info .f_info>div {
    gap: 1vw
  }

  footer .footer_contact_info .f_info .f_label {
    font-size: 3.2vw
  }
  footer .footer_contact_info .f_info a,
  footer .footer_contact_info .f_info p {
    font-size: 3.2vw
  }

  footer .footer_middle {
    align-items: flex-start;
    gap: 10vw
  }

  footer .footer_logo {
    flex-direction: column;
    align-items: flex-start;
    gap: 8vw
  }

  footer .footer_logo img {
    max-width: 50vw
  }

  footer .footer_social {
    gap: 4vw;
    flex-wrap: wrap
  }

  footer .footer_social .social_icon img {
    width: 6vw;
    height: 6vw
  }

  footer .footer_bottom {
    gap: 4vw;
    padding-top: 4vw
  }

  footer .footer_line {
    height: 2px
  }

  footer .footer_nav {
    gap: 3vw 5vw;
    justify-content: flex-start
  }

  footer .footer_nav a {
    font-size: 3.2vw
  }

  .contact_hero {
    flex-direction: column;
    gap: 6vw
  }

  .contact_hero_content {
    max-width: 100%
  }

  .contact_hero_image {
    max-width: 100%
  }

  .contact_form_section .contact_form_box .form-bg-left-leaf {
    width: 25vw;
    height: 12vw;
    left: -9vw;
    top: 40vw
  }

  .contact_form_section .contact_form_box .form-bg-right-leaf {
    width: 12vw;
    height: 20vw;
    right: -7vw;
    top: 50vw
  }

  .contact_form_section .contact_form_box {
    width: 90%;
    margin: 0 auto
  }






  .contact_map_wrap {
    flex-direction: column;
    gap: 6vw
  }

  .contact_map {
    width: 100%
  }

  .contact_map iframe {
    height: 60vw
  }

  .contact_locations {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 4vw
  }
  .ph-cards__col-right,
  .ph-cards__row {
    gap: .8rem
  }

  .ph-cards__row.ph-cards__row--3 {
    margin-top: -.4rem
  }



  .ecf-row--1 .ecf-field {
    flex: 0 0 100%
  }

  form.green_bg .form-row {
    gap: 0
  }
}

@media (max-width:760px) {
  .experience__container {
    max-width: 100%;
    margin: auto;
    display: block
  }

  .experience__image img {
    width: 100%;
    border-radius: 30px;
    display: block;
    object-fit: cover;
    margin-top: 40px
  }

  .experience-container {
    display: none
  }

  .left h2 {
    font-size: 22px
  }

  .experience__container {
    max-width: 100%;
    margin: auto;
    display: block
  }

  .experience__image img {
    width: 100%;
    border-radius: 30px;
    display: block;
    object-fit: cover;
    margin-top: 40px
  }

  .experience-section:has(.experience-container) {
    display: none
  }

  .left h2 {
    font-size: 22px
  }
}

@media (max-width:600px) {
  .form-row {
    flex-direction: column
  }

  .main-title {
    font-size: 10vw
  }

  #map {
    height: 280px
  }

  .location-list {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 15px
  }

  .form-row {
    flex-direction: column
  }

  .main-title {
    font-size: 10vw
  }

  .ph-cards__row.ph-cards__row--3 {
    margin-top: -.2rem
  }

  #map {
    height: 280px
  }

  .location-list {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 15px
  }

  .ph-cards__row.ph-cards__row--3 {
    margin-top: 0 !important;
    align-items: normal
  }

  .ph-cards__row--top {
    align-items: normal
  }

  .ph-cards__row .ph-card {
    padding: 1rem
  }

  .ph-card__icon {
    width: 24px;
    height: 24px
  }

  #map {
    height: 280px
  }

  .ph-cards__row {
    min-width: auto;
    max-width: 100%
  }
.guide-card {
    flex-direction: column !important;
    border-radius: 1rem;
    padding: 1rem;
}
  .location-list {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 15px
  }

  form.green_bg {
    padding: 1.5rem;
    border-radius: 1.5rem
  }

  form.green_bg .input-group,
  form.green_bg hr {
    margin-bottom: 1.2rem
  }

  form.green_bg label {
    margin-bottom: .6rem
  }

  .solutions-grid {
    grid-template-columns: repeat(2, max-content);
    gap: .5rem
  }
}

@media (max-width:480px) {


  .testi-section {
    border-radius: 0 40px 0 40px;
  }


  .testi-slide__img {
    max-width: 100%;
    aspect-ratio: 4/3
  }

  .testi-text {
    font-size: clamp(.88rem, 3.5vw, 1rem);
    line-height: 1.75
  }


  .ecf-row--2 {
    flex-direction: column;
    gap: 28px
  }

  .ecf-row--1 .ecf-field {
    flex: 0 0 100%
  }

  .ecf-row {
    gap: 28px
  }

  .ecf-submit {
    width: 100%;
    text-align: center
  }

  .roung_bg:after {
    left: 20px;
    z-index: -1;
    min-width: 300px;
    min-height: 300px;
    top: auto;
    bottom: -20px
  }

  .ecf-row--2 {
    flex-direction: column;
    gap: 28px
  }

  .ecf-row--1 .ecf-field {
    flex: 0 0 100%
  }

  .ecf-row {
    gap: 28px
  }

  .ecf-submit {
    width: 100%;
    text-align: center
  }

  .project_grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 5vw !important
  }

  .project_grid .project-content {
          margin: 1rem 0 .5rem;
  }

  .project_grid .project-item .project-btn {
    width: 25%;
    border-radius: 1.5vw;
    line-height: 1;
    font-size: 8vw;
    padding: .5vw  1.8vw !important;
    text-align: center;
  }

  .project-name {
    font-size: 5vw !important
  }
}

@media (max-width:400px) {
  #map {
    height: 240px
  }

  .location-list {
    padding: 15px
  }
}