: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%
  }

  /* .our-work-hero's 54vw desktop/tablet max-width (set above at the
     1200px breakpoint to clear the wood-column feature in the photo)
     outranks .extra_inline_pd's 100% mobile reset above on specificity
     (3 classes vs 2), so without this it was still shrinking the Our
     Projects hero text to ~54vw on phones - a ~190px column that wrapped
     the intro paragraph into 13 short lines and pushed the hero to
     roughly 2x viewport height. Same specificity as the desktop rule, so
     this wins purely on being later in the file within a narrower
     media query. */
  .top_banner .banner_content.our-work-hero {
    max-width: 100%
  }

  /* Project page gallery heading ("A seamless interplay of..." etc,
     our-work/project.blade.php's gallery_heading_safe) is the first
     subheading after the hero fold on every project page. It inherits
     the generic h3 clamp's 20px mobile floor, same size as small card
     labels elsewhere, so it read as an afterthought instead of the
     editorial statement it's meant to be. Bumped on its own class
     (not the bare h3 rule, to avoid resizing every other h3 on mobile
     site-wide) - same specificity as the h3/.h3 rule above, wins on
     being later in the file. */
  .vivarium-heading {
    font-size: 26px;
  }

  /* .para_sm's mobile floor (14px, set near the top of this file) is
     used for body copy on nearly every page - solutions, about-us,
     experience, the project Challenge/Approach/Result cards, etc - and
     reads too small on a phone. Bumped to match the site's plain <p>
     mobile floor (16px) so "small" text is still a deliberate step down
     from body copy, not under the readable minimum. */
  .para_sm,
  .para-sm {
    font-size: 16px;
  }

  .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 86.2125px 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 very tall,
     covering most of the vivarium product photo underneath. Shrunk back
     down to a size that respects the hard-coded <br> in index.blade.php's
     h1 ("Bringing Life into" / "Spaces.") without wrapping either line a
     second time. Bumped ~27% (was clamp(22px,6vw,24px)) at the user's
     request - 30px ceiling is close to the width "Bringing Life into"
     can take before it'd wrap again inside the 90vw-wide, extra_inline_pd-
     padded hero column. */
  .home_hero_content .heading_animate,
  .home_hero_content .heading_animate * {
    font-size: clamp(28px, 7.2vw, 30px)
  }

  /* 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
  }
}