/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ==========================================================================
   1. Design Tokens
   ========================================================================== */

:root {
  /* Neutrals */
  --color-black: #0F0F0F;
  --color-charcoal: #1C1C1C;
  --color-dark-gray: #636363;
  --color-gray: #B1B1B1;
  --color-light-warm-gray: #F7F6F5;
  --color-white: #FFFFFF;

  /* Brand Colors */
  --color-deep-evergreen: #07271A;
  --color-muted-forest-gray: #61756A;
  --color-soft-mint-green: #99CEA8;
  --color-sage-mist: #DBE7DC;
  --color-ivory-white: #F8F5F1;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

body p:last-child {
  margin-bottom: 0;
}

body :is(ul, ol) {
  margin-bottom: 20px;
}

.btn-icon .elementor-icon {
  display: block;
}

.heading-bullet.dark .elementor-heading-title{
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.heading-bullet.dark .elementor-heading-title::before{
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-muted-forest-gray);
  border: 3px solid var(--color-soft-mint-green);
  box-sizing: border-box;
  margin-top: 6px;
}

.marquee .swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
  -moz-transition-timing-function: linear !important;
  -o-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
  pointer-events: none;
}

.marquee.white .swiper-slide-image {
  filter: brightness(0) invert(1);
}

.map-embed {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%;
  overflow: hidden;
}

.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.bottom-gradient-overlay,
.center-left-gradient-overlay {
  position: relative;
  overflow: hidden;
}

.bottom-gradient-overlay::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 520px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
  opacity: 0.45;
  pointer-events: none;
}

.center-left-gradient-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 66.66%;
  height: 100%;
  background: linear-gradient(-90deg, rgba(0, 0, 0, 0) 21.89%, #000 96.75%);
  opacity: 0.44;
  pointer-events: none;
}

.text-block :is(h1, h2, h3) {
  color: var(--color-black);
  margin: 60px 0 30px;
}
.text-block :is(h1, h2, h3):first-child {
  margin-top: 0;
}
.text-block :is(b, strong) {
  font-weight: 600;
  color: var(--color-black);
}

.list-block ul{
  padding-left: 0;
  list-style: none;
}
.list-block ul li{
  position: relative;
  padding-left: 10px;
  margin-bottom: 10px;
}
.list-block ul li:last-child{
  margin-bottom: 0;
}
.list-block ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  line-height: 1;
}

/* ==========================================================================
   3. Global Button Styles
   ========================================================================== */

.btn-outline .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  color: var(--color-deep-evergreen);
  border: 1px solid var(--color-deep-evergreen);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.btn-outline .elementor-button:hover,
.btn-outline .elementor-button:focus {
  color: var(--color-gray);
  background: none;
  border: 1px solid var(--color-deep-evergreen);
}

.btn-outline.v2 .elementor-button {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(19.65px);
  color: var(--color-white);
  border-color: var(--color-white);
}

.btn-outline.v2 .elementor-button:hover,
.btn-outline.v2 .elementor-button:focus {
  color: var(--color-black);
  background: none;
  border: 1px solid var(--color-white);
}

.btn-secondary .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 6px 4px 9px;
  background: var(--color-white);
  color: var(--color-black);
  border: none;
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
  box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.09);
}

.btn-secondary .elementor-button::after {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background-color: var(--color-charcoal);
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.3125 4.19189L5.3125 0.441895H1.5625M5.3125 0.441895L0.3125 5.44189' stroke='white' stroke-width='0.883883'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 6px 6px;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.btn-secondary .elementor-button:hover,
.btn-secondary .elementor-button:focus {
  color: var(--color-gray);
  background: var(--color-white);
  border-radius: 5px;
}

.btn-secondary .elementor-button:hover::after,
.btn-secondary .elementor-button:focus::after {
  transform: rotate(45deg);
}

/* ==========================================================================
   4. Filter & Dropdown Components
   ========================================================================== */

/* --- Elementor filter widget (native <select>) --------------------------- */

.filter-widget .bpfwe-taxonomy-wrapper {
  position: relative;
  margin: 0;
}

.filter-widget select#service-category-ff098f3 {
  width: 100%;
  padding: 14px 40px 14px 34px;
  font-size: 15px;
  color: #0F0F0F;
  background-color: #FFFFFF;
  border-radius: 8px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

.filter-widget select#service-category-ff098f3:focus {
  outline: none;
  border-color: var(--color-muted-forest-gray);
}

/* Green bullet on the left */
.filter-widget .bpfwe-taxonomy-wrapper::before {
  content: "";
  position: absolute;
  top: 52%;
  left: 16px;
  transform: translateY(-52%);
  width: 8px;
  height: 8px;
  background-color: var(--color-muted-forest-gray);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

/* Chevron arrow on the right, flips when the select is focused/open */
.filter-widget .bpfwe-taxonomy-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 10L8 6L4 10' stroke='%2361756A' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  transition: transform 0.2s ease;
}

.filter-widget .bpfwe-taxonomy-wrapper:focus-within::after {
  transform: translateY(-50%) rotate(180deg);
}

/* --- Custom HTML dropdown (<details>/<summary>, mirrors the filter widget) */

.custom-dropdown-menu {
  width: 100%;
  max-width: 320px;
}

.custom-dropdown {
  position: relative;
}

.custom-dropdown-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 13px 40px 13px 30px;
  color: var(--color-charcoal);
  font-size: 14px;
  font-weight: 600;
  background-color: #FFFFFF;
  border-radius: 50px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  position: relative;
}

/* Remove the default disclosure triangle */
.custom-dropdown-trigger::-webkit-details-marker {
  display: none;
}

/* Green bullet on the left */
.custom-dropdown-trigger::before {
  content: "";
  position: absolute;
  top: 52%;
  left: 16px;
  transform: translateY(-52%);
  width: 8px;
  height: 8px;
  background-color: var(--color-muted-forest-gray);
  border-radius: 50%;
  pointer-events: none;
}

/* Chevron arrow on the right, flips when open */
.custom-dropdown-trigger::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 10L8 6L4 10' stroke='%2361756A' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  transition: transform 0.2s ease;
}

.custom-dropdown[open] .custom-dropdown-trigger::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Options list — left with default browser styling (unstyled by request) */
.custom-dropdown-options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0;
  background-color: #FFFFFF;
  border-radius: 8px;
  list-style: none;
  overflow: hidden;
}

.custom-dropdown-options li a {
  display: block;
  padding: 12px 16px;
  color: var(--color-charcoal);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.custom-dropdown-options li a:hover{
  color: var(--color-muted-forest-gray);
}

.custom-dropdown-options li a.disabled{
  pointer-events: none;
  opacity: 0.5;
}

/* ==========================================================================
   5. Site Navigation (custom)
   ========================================================================== */

.site-nav-wrapper {
  position: relative;
}

.site-nav__list,
.site-nav__sublist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 19px;
}

.site-nav__item {
  position: relative;
}

.site-nav__link,
.site-nav__sublink {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  color: var(--color-black);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; /* 142.857% */
  text-decoration: none;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.site-nav__sublink {
  padding: 8px 24px 8px 16px;
  align-items: first baseline;
}

.site-nav__item.has-children > .site-nav__link::after {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 5px;
  background-image: url("data:image/svg+xml,%3Csvg width='7' height='5' viewBox='0 0 7 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.353577 0.353546L3.35358 3.35355L6.35358 0.353546' stroke='%230F0F0F'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateY(2px);
}

.site-nav__list:hover > .site-nav__item:not(:hover) > .site-nav__link {
  opacity: 0.3;
}

.site-nav__panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  /* padding-top (not margin-top) keeps this box "hoverable" all the way
     down to the visible card below, so there's no dead zone the cursor
     can fall through while moving from the nav link to the flyout. */
  padding-top: 45px;
  z-index: 50;
}

.site-nav__item.has-children:hover > .site-nav__panel,
.site-nav__item.has-children:focus-within > .site-nav__panel {
  display: block;
}

.site-nav__sublist--level-2 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-width: max-content;
  padding-top: 20px;
  padding-bottom: 20px;
  background: var(--color-white);
  border-radius: 13px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.site-nav__sublist--level-2:has(.site-nav__subitem.has-children:hover) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.site-nav__subitem {
  opacity: 1;
  transition: opacity 0.2s ease;
}

.site-nav__subitem > .site-nav__sublink {
  transition: opacity 0.2s ease, padding-left 0.2s ease;
}

.site-nav__subitem:hover > .site-nav__sublink {
  transform: translateX(8px);
  transition: transform 0.3s ease;
}

.site-nav__sublist--level-2:hover > .site-nav__subitem:not(:hover) {
  opacity: 0.3;
}

.site-nav__sublist--level-3 {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  flex-direction: column;
  gap: 13px;
  min-width: max-content;
  /* padding-left (not margin-left) again avoids a hover dead zone between
     the two columns. */
  padding: 24px 24px 24px 48px;
  background: var(--color-white);
  border-top-right-radius: 13px;
  border-bottom-right-radius: 13px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  clip-path: inset(-10px -10px -10px 0);
}

.site-nav__sublist--level-3:hover > .site-nav__subitem:not(:hover) {
  opacity: 0.3;
}

.site-nav__subitem.has-children:hover > .site-nav__sublist--level-3,
.site-nav__subitem.has-children:focus-within > .site-nav__sublist--level-3 {
  display: flex;
}

.site-nav__subitem > .site-nav__sublink::after {
  content: "";
  flex-shrink: 0;
  width: 11px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='10' viewBox='0 0 11 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.74014 8.87323L10 4.61337L5.74014 0.353516M10 4.61337L0 4.61337' stroke='%230F0F0F'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.site-nav__subitem:hover > .site-nav__sublink::after {
  opacity: 1;
}

/* ==========================================================================
   6. Homepage
   ========================================================================== */

.card-loop-1.big .elementor-cta,
.home .featured-services .card-loop-1.big .elementor-cta__content {
  height: 100%;
}

.card-loop-1 .elementor-cta__content {
  position: relative;
}

.card-loop-1 .elementor-cta__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background: rgba(112, 112, 112, 0.25);
  backdrop-filter: blur(14.15px);
}

.card-loop-1 .elementor-cta__title::after {
  content: "";
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background-color: #FFFFFF;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.02407 9.31711L10.4946 4.84655L6.02407 0.375977M10.4946 4.84655L0 4.84654' stroke='%230F0F0F' stroke-width='1.06358'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   7. About
   ========================================================================== */

.about-us .why-section .content-panel {
  display: none;
}

.about-us .why-section .content-panel.active {
  display: block;
}

.about-us .list-style-01 .list h3 {
  padding: 17px 10px;
  color: rgba(255, 255, 255, 0.24);
  border-bottom: 1px solid var(--color-gray);
  transition: opacity 0.3s ease, color 0.3s ease;
}

.about-us .list-style-01 .list.active h3,
.about-us .list-style-01 .list h3:hover {
  color: var(--color-white);
  cursor: pointer;
}

/* ==========================================================================
   8. Services Landing Pages
   ========================================================================== */

.service-loop-grid .card-loop-1 .elementor-cta__content {
  min-height: 550px !important;
}

/* ==========================================================================
   9. Services
   ========================================================================== */

.gallery-section .btn-icon.carousel .elementor-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  background: var(--color-light-warm-gray);
  border-radius: 50px;
}

.gallery-section .btn-icon.carousel svg {
  font-size: 16px;
}

.gallery-section .btn-icon.carousel svg path {
  stroke: var(--color-charcoal);
}

.gallery-section .btn-icon.carousel.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.gallery-section .btn-icon.carousel:hover {
  cursor: pointer;
}

.gallery-section .gallery-img img {
  height: 290px !important;
  object-fit: cover;
  object-position: center center;
}

.why-section .blocks .elementor-icon-box-wrapper {
  height: 100%;
}

.why-section .blocks .elementor-icon-box-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ==========================================================================
   10. Membership
   ========================================================================== */
.membership .plan-blocks .price span{
  font-size: 1rem;
  color: var(--color-dark-gray);
  font-weight: 400;
}

/* ==========================================================================
   11. Table of Contents Sidebar
   ========================================================================== */

.toc-sidebar .sidebar-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

.toc-sidebar .sidebar-nav .nav-item {
  position: relative;
  padding-left: 22px;
  color: var(--e-global-color-a82a67c);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.62em;
  transition: color 0.3s ease, padding-left 0.3s ease;
}

.toc-sidebar .sidebar-nav .nav-item::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 10px;
  height: 10px;
  background-color: transparent;
  border: 1.5px solid var(--color-gray);
  border-radius: 50%;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.toc-sidebar .sidebar-nav .nav-item::after {
  content: "";
  position: absolute;
  top: 11px;
  left: 3px;
  width: 4px;
  height: 4px;
  background-color: transparent;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.toc-sidebar .sidebar-nav .nav-item.active {
  color: var(--color-muted-forest-gray);
  font-size: 1.125rem;
  font-weight: 600;
}

.toc-sidebar .sidebar-nav .nav-item:hover::before {
  border-color: var(--color-muted-forest-gray); /* was `var(red)` — invalid, see note below */
}

.toc-sidebar .sidebar-nav .nav-item:hover::after {
  background-color: var(--color-muted-forest-gray);
}

.toc-sidebar .sidebar-nav .nav-item.active::before {
  top: 10px;
}

.toc-sidebar .sidebar-nav .nav-item.active::after {
  top: 13px;
  background-color: var(--color-muted-forest-gray);
}

/* ==========================================================================
   12. Promos
   ========================================================================== */
.special-offers .active-specials-block{
  position: relative;
}
.special-offers .active-specials-block .elementor-icon-list-items{
  gap: 15px;
}
.special-offers .active-specials-block .special-info{
  background: rgba(112, 112, 112, 0.25);
  backdrop-filter: blur(14.149999618530273px);
}
.special-offers .active-specials-block .special-info .discount .elementor-icon-list-item{
  padding: 6px 15px;
  border: 1px solid var(--color-white);
  border-radius: 50px;
}

/* ==========================================================================
   13. Form
   ========================================================================== */

#default_contact_form .elementor-field-group {
  position: relative;
}

#default_contact_form .elementor-field-group-marketing_acceptance .elementor-field-option,
#default_contact_form .elementor-field-group-nonmarketing_acceptance .elementor-field-option {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
}

#default_contact_form .elementor-field-group-marketing_acceptance input[type="checkbox"],
#default_contact_form .elementor-field-group-nonmarketing_acceptance input[type="checkbox"] {
  margin: 0;
  margin-top: 0.4em;
  accent-color: #383838;
}

/* --- Custom select dropdown icon ----------------------------------------- */

#default_contact_form .select-caret-down-wrapper svg {
  display: none;
}

#default_contact_form .select-caret-down-wrapper {
  width: 12px;
  height: 7px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.495117 0.495117L5.99512 5.99512L11.4951 0.495117' stroke='%230F0F0F' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* --- Radio field pills (no circle, filled when checked) ------------------ */

#default_contact_form .elementor-field-type-radio .elementor-field-label {
  margin-bottom: 10px;
}

#default_contact_form .elementor-field-subgroup.elementor-subgroup-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

#default_contact_form .elementor-field-type-radio .elementor-field-option {
  display: inline-flex;
  align-items: center;
  padding: 4px 13px 5px 13px;
  border: 1px solid var(--color-gray);
  border-radius: 50px;
  cursor: pointer;
}

/* Remove the native radio circle but keep it accessible/clickable */
#default_contact_form .elementor-field-type-radio .elementor-field-option input[type="radio"] {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

#default_contact_form .elementor-field-type-radio .elementor-field-option label {
  margin: 0;
  cursor: pointer;
}

/* Selected state */
#default_contact_form .elementor-field-type-radio .elementor-field-option:has(input[type="radio"]:checked) {
  background-color: var(--color-soft-mint-green);
  border-color: var(--color-soft-mint-green);
}

/* --- Acceptance field label color ----------------------------------------- */

#default_contact_form .elementor-field-type-acceptance label {
  color: var(--color-dark-gray);
}

/* --- Remove focus outline on all fields ----------------------------------- */

#default_contact_form .elementor-field-textual:focus,
#default_contact_form .elementor-field-textual:focus-visible,
#default_contact_form input:focus,
#default_contact_form input:focus-visible,
#default_contact_form textarea:focus,
#default_contact_form textarea:focus-visible,
#default_contact_form select:focus,
#default_contact_form select:focus-visible {
  outline: none;
  box-shadow: none;
}

#default_contact_form .elementor-field-type-html {
  margin: 0;
}

#default_contact_form .form-legacy-menu {
  display: flex;
  position: absolute;
  right: 20px;
  bottom: -35px;
  z-index: 1;
  gap: 20px;
  margin: 0;
  padding: 0;
  color: var(--color-dark-gray);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  list-style: none;
}

#default_contact_form .form-legacy-menu li {
  margin: 0;
  padding: 0;
}

#default_contact_form .form-legacy-menu a {
  color: var(--color-dark-gray);
  text-decoration: none;
}

#default_contact_form .form-legacy-menu a:hover {
  color: var(--color-muted-forest-gray);
}

/* ==========================================================================
   14. Footer
   ========================================================================== */

.main-footer .contact-details .elementor-icon-list-item {
  max-width: 100%;
}

.main-footer .contact-details .elementor-icon-list-item a {
  display: flex;
  align-items: center;
  max-width: 100%;
}

.main-footer .contact-details .elementor-icon-list-text {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

/* ==========================================================================
   15. Responsive Overrides (misc, cross-section)
   ========================================================================== */

@media (max-width: 1200px) and (min-width: 1024px) {
  .site-nav__list {
    gap: 10px;
  }

  .site-nav__link {
    padding: 8px 6px;
  }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .map-embed {
    padding-bottom: 56.25%;
  }
}

/* ==========================================================================
   16. Meet the Team — Carousel

   Nav, cards, and bio panels are plain HTML (pasted into Elementor HTML
   widgets) — none of it carries Elementor's own Container/Widget classes,
   so nothing here fights Elementor's defaults. No !important needed.
   Behavior lives in js/team-carousel.js.
   ========================================================================== */

:root {
  --team-card-height: clamp(360px, 40vw, 520px);
  --team-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --team-duration: 0.6s;
}

/* The root .team container is an Elementor Container, which always
   renders as display:flex regardless of what we declare here — so we
   match that reality instead of fighting it with display:grid (which
   Elementor's own --display:flex variable silently overrides anyway).
   Sidebar gets a fixed width; the content side grows to fill the rest. */
.team {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  max-width: 1400px;
  margin: 0 auto;
}

.team__nav {
  flex: 0 0 220px;
  padding-top: 6px;
}

/* Wrapper Container around the viewport + bio (CSS Classes: team__content).
   Needs to explicitly grow — every Elementor Container in this chain
   defaults to shrink-to-fit, and since almost everything inside is
   position:absolute (no in-flow content to force a width), nothing here
   gets real size unless we declare it ourselves. */
.team__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

/* --- Sidebar navigation (plain HTML, pasted into an HTML widget) ---------
   <ul class="team__nav-list">
     <li class="team__nav-item is-active"><span>Name</span></li>
     ...
   </ul>
   --------------------------------------------------------------------- */

.team__nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.team__nav-item {
  position: relative;
  margin-bottom: 22px;
  padding-left: 22px;
  cursor: pointer;
}

.team__nav-item:last-child {
  margin-bottom: 0;
}

.team__nav-item::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 10px;
  height: 10px;
  background-color: transparent;
  border: 1.5px solid var(--color-gray);
  border-radius: 50%;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.team__nav-item::after {
  content: "";
  position: absolute;
  top: 13px;
  left: 3px;
  width: 4px;
  height: 4px;
  background-color: transparent;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.team__nav-item span {
  display: inline-block;
  color: var(--color-gray);
  font-size: 1rem;
  font-weight: 400;
  transition: color 0.25s ease;
}

.team__nav-item:hover span {
  color: var(--color-muted-forest-gray);
}

.team__nav-item.is-active span {
  color: var(--color-muted-forest-gray);
  font-size: 1.125rem;
  font-weight: 600;
}

.team__nav-item:hover::after,
.team__nav-item.is-active::after {
  background-color: var(--color-muted-forest-gray);
}

/* --- Carousel viewport / track --------------------------------------------
   .team__viewport and .team__track stay as Elementor Containers (no
   positioning conflicts there — Elementor's defaults for those already
   match what we want). The cards themselves (plain HTML, pasted into a
   single HTML widget inside .team__track) become the flex row via the
   widget wrapper Elementor generates around them.
   --------------------------------------------------------------------- */

.team__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.team__track {
  position: relative;
  height: var(--team-card-height);
  transition: transform var(--team-duration) var(--team-ease);
  will-change: transform;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.team__track.is-dragging {
  transition: none;
  cursor: grabbing;
}

.team__track:focus-visible {
  outline: 2px solid var(--color-muted-forest-gray);
  outline-offset: 4px;
}

/* The HTML widget Elementor wraps around the pasted card markup — this
   is what actually needs to be the flex row, since .team__track itself
   only has this one wrapper as a child. */
.team__track > .elementor-widget-html {
  display: flex;
  align-items: stretch;
  gap: 7px;
  height: 100%;
}

.team__card {
  position: relative;
  flex: 0 0 auto;
  /* width is set inline by JS so it can be measured precisely in px */
  height: 100%;
  background: var(--color-ivory-white);
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
}

/* Inactive card: inset portrait sitting on a muted panel.
   background-size: cover + center/center (on the img) fills the frame
   completely while always keeping the subject centered — the only
   spacing comes from the frame's inset off the card edges, kept equal
   on all three open sides (top/left/right). */
.team__card-media {
  position: absolute;
  top: 17%;
  left: 14%;
  right: 14%;
  height: 60%;
  background-color: var(--color-light-warm-gray);
  border-radius: 2px;
  transition: top var(--team-duration) var(--team-ease),
              left var(--team-duration) var(--team-ease),
              right var(--team-duration) var(--team-ease),
              height var(--team-duration) var(--team-ease),
              border-radius var(--team-duration) var(--team-ease);
}

.team__card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: inherit;
  pointer-events: none;
}

/* Active card: photo goes full-bleed, filling and cropping to the
   frame edge-to-edge with no inset at all. */
.team__card.is-active .team__card-media {
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-color: transparent;
  border-radius: 0;
}

/* Scrim only needed once the photo goes full-bleed on the active card */
.team__card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.72) 100%);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.team__card.is-active .team__card-scrim {
  opacity: 1;
  transition-delay: 0.18s;
}

/* Hidden here always — JS moves this out to .team__bio on init. This
   is just a safety net in case JS is slow/blocked, so it never flashes
   visible stacked inside the small card. */
.team__card-bio {
  display: none;
}

.team__card-caption {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
}

.team__card-name {
  display: block;
  margin: 0 0 2px;
  overflow: hidden;
  color: var(--color-black);
  font-family: "Josefin Sans", sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.6px;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color 0.4s ease, font-size 0.4s ease;
}

.team__card-position {
  display: block;
  margin: 0;
  overflow: hidden;
  color: var(--color-gray);
  font-size: 0.875rem;
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color 0.4s ease;
}

.team__card.is-active .team__card-name {
  color: var(--color-white);
}

.team__card.is-active .team__card-position {
  color: rgba(255, 255, 255, 0.85);
}

/* --- Bio (plain HTML pasted into an HTML widget inside .team__bio) ------- */

.team__bio {
  max-width: 760px;
}

.team__bio-panel {
  display: none;
  color: var(--color-dark-gray);
  font-size: 1rem;
  line-height: 1.62em;
  animation: team-bio-in 0.4s ease;
}

.team__bio-panel.is-active {
  display: block;
}

.team__bio-panel p {
  margin: 0 0 18px;
}

.team__bio-panel p:last-child {
  margin-bottom: 0;
}

@keyframes team-bio-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .team__track,
  .team__card-media,
  .team__card-scrim,
  .team__bio-panel {
    transition: none !important;
    animation: none !important;
  }
}

/* --- Responsive ------------------------------------------------------- */

@media (max-width: 1024px) {
  .team__bio {
    max-width: 100%;
    text-align: center;
  }

  .team__nav-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .team__nav-item {
    position: static;
    margin-bottom: 0;
    padding: 10px 20px;
    background-color: var(--color-light-warm-gray);
    border-radius: 999px;
    transition: background-color 0.25s ease;
  }

  .team__nav-item::before,
  .team__nav-item::after {
    display: none;
  }

  .team__nav-item.is-active {
    background-color: var(--color-muted-forest-gray);
  }

  .team__nav-item.is-active span {
    color: var(--color-white);
  }

  .why-section .blocks .elementor-icon-box-content {
    justify-content: flex-start;
  }

  .service-loop-grid .card-loop-1 .elementor-cta__content {
    min-height: 400px !important;
  }

  .list-block ul li {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding-left: 0;
  }
  .list-block ul li::before {
    position: static;
    transform: none;
    flex-shrink: 0;
    margin-top: 6px;
  }
}

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

/* One card at a time on mobile — same sliding carousel as desktop, JS
   just measures VISIBLE_SLIDES_MOBILE = 1 instead of 2.4 at this width.
   Cards stay visible and laid out (never display:none) so offsetLeft/
   scrollWidth keep working for the drag/slide math. */
@media (max-width: 767px) {
  :root {
    --team-card-height: clamp(420px, 130vw, 600px);
  }

  .team__card-name,
  .team__card-position {
    text-align: center;
  }
}

/* ==========================================================================
   17. Popup Menu
   ========================================================================== */
.popup-menu {
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.popup-menu .mobile-menu .elementor-nav-menu{
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.popup-menu .mobile-menu .elementor-nav-menu > li > .sub-menu {
  margin-top: 10px;
}

.popup-menu .mobile-menu .elementor-nav-menu > li > .sub-menu > li:not(:last-child) {
  margin-bottom: 15px;
}

.popup-menu .mobile-menu .elementor-nav-menu > li > .sub-menu > li > .sub-menu {
  margin-top: 10px;
}

.popup-menu .mobile-menu .elementor-nav-menu > li > .sub-menu > li > .sub-menu > li:not(:last-child) {
  margin-bottom: 15px;
}

.popup-menu .mobile-menu .elementor-item,
.popup-menu .mobile-menu .elementor-sub-item {
  opacity: 1;
  transition: opacity 0.2s ease;
}

.popup-menu .mobile-menu .elementor-nav-menu:hover > li:not(:hover) > .elementor-item {
  opacity: 0.3;
}

.popup-menu .mobile-menu .elementor-nav-menu > li > .sub-menu:hover > li:not(:hover) > .elementor-sub-item {
  opacity: 0.3;
}

.popup-menu .mobile-menu .elementor-nav-menu > li > .sub-menu > li > .sub-menu:hover > li:not(:hover) > .elementor-sub-item {
  opacity: 0.3;
}