/* Hero section navigation  starts here................................*/

/* ===========================
   SPLIDE — DIAMOND DOTS + ARROWS
   =========================== */
.hero-slider.splide {
  --ui-white: #fff;
  --ui-stroke: rgba(255,255,255,.55);
  --ui-stroke-dim: rgba(255,255,255,.32);
  --ui-hover: rgba(255,255,255,1);
}

/* ========= Pagination: diamond SVG (inactive) + white filled diamond (active) ========= */
.hero-slider .splide__pagination {
  bottom: 40px;
  gap: 15px;
  left: auto;
  right: 56px;
  justify-content: flex-end;
}

.hero-slider .splide__pagination__page {
  position: relative;
  width: 6px;
  height: 6px;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: url("/wp-content/uploads/2025/10/Rectangle-20.svg") center / contain no-repeat;
  transform: none;
  opacity: .75;
  transition: filter .2s ease, background-color .2s ease, transform .2s ease, opacity .2s ease;
}
.hero-slider .splide__pagination__page:hover { 
  opacity: .95; 
  }
.hero-slider .splide__pagination__page.is-active {
  background-image: none !important;
  background-color: #fff;
  transform: rotate(45deg);
  opacity: 1;
}
.hero-slider .splide__pagination__page::before {
  content: "";
  position: absolute;
  inset: -6px;
}

/* ===========================
   ARROWS — SVG HEAD + TAIL
   =========================== */
.hero-slider .splide__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  background: transparent;
  isolation: isolate;
  z-index: 3;

  /* Tunables */
  --head-size: 10px;           /* size of the arrow head */
  --hover-shift: 4px;          /* nudge on hover */
  --tail-height: 2px;          /* visual height of tail */
  --tail-offset: 8px;         /* gap from button edge to tail */
  --tail-w-next: 8px;         /* tail length for NEXT */
  --tail-w-prev: 8px;         /* base tail length for PREV */
  --tail-gap-prev: 8px;        /* distance from center to start of PREV tail */
  --dur: .36s;
  --ease: cubic-bezier(.23,.97,.32,1);

  --idle-opacity: .55;  /* dim at rest */
  --hover-opacity: 1;   /* bright on hover */
}

/* hide default Splide SVG */
.hero-slider .splide__arrow svg { 
  display: none !important; 
  }

/* HEAD */
.hero-slider .splide__arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--head-size);
  height: var(--head-size);
  background: url("/wp-content/uploads/2025/10/3e.svg")
              center / contain no-repeat;
  opacity: var(--idle-opacity);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* TAIL */
.hero-slider .splide__arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  height: var(--tail-height);
  background: url("/wp-content/uploads/2025/10/asdasd.svg") center / contain no-repeat;
  opacity: 0;
  transform: scaleX(0.0001);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* Hover states */
.hero-slider .splide__arrow:hover::before,
.hero-slider .splide__arrow:focus-visible::before { 
  opacity: var(--hover-opacity); 
  }
.hero-slider .splide__arrow:hover::after,
.hero-slider .splide__arrow:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

/* NEXT (right) */
.hero-slider .splide__arrow--next { 
  right: 18px; 
  }
.hero-slider .splide__arrow--next:hover::before,
.hero-slider .splide__arrow--next:focus-visible::before {
  transform: translateX(var(--hover-shift));
}
.hero-slider .splide__arrow--next::after {
  width: var(--tail-w-next);
  transform-origin: right center;
  right: var(--tail-offset);
}

/* PREV (left) — Corrected tail position */
/*.hero-slider .splide__arrow--prev {
  left: 18px;
  --tail-gap-prev: 8px; /* Adjust this if you need tail closer/further */
/*}*/
.hero-slider .splide__arrow--prev::before {
  transform: scaleX(-1);
}
.hero-slider .splide__arrow--prev:hover::before,
.hero-slider .splide__arrow--prev:focus-visible::before {
  transform: scaleX(-1) translateX(calc(var(--hover-shift) * -1));
  opacity: var(--hover-opacity);
}

/* Tail correctly positioned to the right of the head */
.hero-slider .splide__arrow--prev::after {
  width: var(--tail-w-prev);
  --tail-gap-prev: 8px;
  left: calc(50% + var(--tail-gap-prev)); /* start slightly right of center */
  right: auto;
  transform-origin: left center;
  transform: scaleX(0.0001);
}
.hero-slider .splide__arrow--prev:hover::after,
.hero-slider .splide__arrow--prev:focus-visible::after {
  transform: scaleX(1);
}



/* Hero section navigation  ends here................................*/









/* ===========================
   SPLIDE — DIAMOND DOTS + ARROWS (SERVICE SLIDER VARIANT)
   =========================== */
.service-slider.splide {
  --dot-active: #A1835C;      /* Active diamond fill */
  --dot-inactive: #A1835C4D;  /* Inactive fill */
  --arrow-dim: #D9D9D9;       /* Idle arrow color */
  --arrow-hover: #A47B58;     /* Hover arrow + tail color */
}

/* ========= Pagination: equal-sized filled diamonds ========= */
.service-slider .splide__pagination {
  bottom: 28px;
  gap: 15px;
}

.service-slider .splide__pagination__page {
  position: relative;
  width: 6px;
  height: 6px;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: var(--dot-inactive);
  transform: rotate(45deg) scale(1);
  opacity: 1;
  transition: filter .2s ease, background-color .2s ease, transform .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.service-slider .splide__pagination__page:hover { 
  filter: brightness(1.05); 
  }

.service-slider .splide__pagination__page.is-active {
  background-color: var(--dot-active);
  transform: rotate(45deg) scale(1.2);
  animation: diamond-pop .45s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes diamond-pop {
  0%   { transform: rotate(45deg) scale(0.85); filter: brightness(0.9); }
  50%  { transform: rotate(45deg) scale(1.25); filter: brightness(1.3); }
  100% { transform: rotate(45deg) scale(1.2);  filter: brightness(1); }
}

.service-slider .splide__pagination__page::before {
  content: "";
  position: absolute;
  inset: -6px; /* larger tap area */
}

/* ===========================
   ARROWS — custom SVG head + tail (mask-colored)
   =========================== */
.service-slider .splide__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  background: transparent;
  isolation: isolate;
  z-index: 3;

  /* Tunables */
  --head-size: 10px;           /* size of the arrow head */
  --hover-shift: 4px;          /* nudge on hover */
  --tail-height: 2px;          /* visual height of tail */
  --tail-offset: 8px;         /* gap from button edge to tail */
  --tail-w-next: 8px;         /* tail length for NEXT */
  --tail-w-prev: 8px;         /* base tail length for PREV */
  --tail-gap-prev: 8px;        /* distance from center to start of PREV tail */
  --dur: .36s;
  --ease: cubic-bezier(.23,.97,.32,1);
}

/* Hide Splide's default inline SVG */
.service-slider .splide__arrow svg { 
  display: none !important; 
  }

/* HEAD — colorized via mask so we can tint idle/hover */
.service-slider .splide__arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--head-size);
  height: var(--head-size);
  background-color: var(--arrow-dim); /* idle grey */
  /* Use the provided SVG as a mask so we can recolor */
  -webkit-mask: url("/wp-content/uploads/2025/10/brownarrow.svg") center/contain no-repeat;
          mask: url("/wp-content/uploads/2025/10/brownarrow.svg") center/contain no-repeat;
  opacity: .98;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* TAIL — also mask-colored for tint */
.service-slider .splide__arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  height: var(--tail-height);
  width: 0; /* set per-side below */
  background-color: var(--arrow-hover); /* tail uses hover color */
  -webkit-mask: url("/wp-content/uploads/2025/10/brownarrow-tail.svg") center/contain no-repeat;
          mask: url("/wp-content/uploads/2025/10/brownarrow-tail.svg") center/contain no-repeat;
  opacity: 0;
  transform: scaleX(0.0001);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* Hover: head turns brown, tail reveals/grows */
.service-slider .splide__arrow:hover::before,
.service-slider .splide__arrow:focus-visible::before { background-color: var(--arrow-hover); }
.service-slider .splide__arrow:hover::after,
.service-slider .splide__arrow:focus-visible::after { opacity: 1; transform: scaleX(1); }

/* NEXT (right) */
.service-slider .splide__arrow--next { right: 18px; }
.service-slider .splide__arrow--next:hover::before,
.service-slider .splide__arrow--next:focus-visible::before { transform: translateX(var(--hover-shift)); }
.service-slider .splide__arrow--next::after {
  width: var(--tail-w-next);
  transform-origin: right center;   /* grow from the head toward the center */
  right: var(--tail-offset);
}

/* PREV (left) — head mirrored; tail positioned to the RIGHT of the head */
.service-slider .splide__arrow--prev { 
  left: 18px; 
  }
/* Mirror the head */
.service-slider .splide__arrow--prev::before { 
  transform: scaleX(-1); 
  }
/* Nudge opposite on hover */
.service-slider .splide__arrow--prev:hover::before,
.service-slider .splide__arrow--prev:focus-visible::before {
  transform: scaleX(-1) translateX(calc(var(--hover-shift) * -1));
}
/* Tail: start slightly to the RIGHT of the head and grow outward */
.service-slider .splide__arrow--prev::after {
  width: var(--tail-w-prev);
  left: calc(50% + var(--tail-gap-prev)); /* sits to the right of the head */
  right: auto;
  transform-origin: left center;          /* grow rightwards */
}

/* Mobile: larger tap target */
@media (max-width: 640px) {
  .service-slider .splide__arrow { width: 56px; height: 56px; }
}

/* Keep arrows above slides */
.service-slider .splide__arrows { position: relative; z-index: 5; }

/* Reduced motion safety */
@media (prefers-reduced-motion: reduce) {
  .service-slider .splide__arrow::before,
  .service-slider .splide__arrow::after {
    transition: none;
    transform: none !important;
  }
  .service-slider .splide__pagination__page.is-active {
    animation: none;
    transform: rotate(45deg) scale(1);
  }
}








/* ===========================
   SPLIDE — DIAMOND DOTS + ARROWS (TESTIMONIAL SLIDER)
   =========================== */
.testimonials-slider.splide {
  --dot-active: #A1835C;      /* Active diamond fill */
  --dot-inactive: #A1835C4D;  /* Inactive fill */
  --arrow-dim: #D9D9D9;       /* Idle arrow color */
  --arrow-hover: #A47B58;     /* Hover arrow + tail color */
}

/* ========= Pagination: animated filled diamonds ========= */
.testimonials-slider .splide__pagination {
  bottom: 28px;
  gap: 15px;
}

.testimonials-slider .splide__pagination__page {
  position: relative;
  width: 6px;
  height: 6px;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: var(--dot-inactive);
  transform: rotate(45deg) scale(1);
  opacity: 1;
  transition:
    background-color .35s ease,
    transform .35s cubic-bezier(0.25, 1, 0.5, 1),
    filter .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.testimonials-slider .splide__pagination__page:hover { filter: brightness(1.1); }

.testimonials-slider .splide__pagination__page.is-active {
  background-color: var(--dot-active);
  transform: rotate(45deg) scale(1.2);
  animation: diamond-pop .45s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes diamond-pop {
  0%   { transform: rotate(45deg) scale(0.85); filter: brightness(0.9); }
  50%  { transform: rotate(45deg) scale(1.25); filter: brightness(1.3); }
  100% { transform: rotate(45deg) scale(1.2);  filter: brightness(1);   }
}

/* Larger tap area */
.testimonials-slider .splide__pagination__page::before {
  content: "";
  position: absolute;
  inset: -6px;
}






/* ===========================
   ARROWS — custom SVG head + tail (mask-colored)
   =========================== */
.testimonials-slider .splide__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  background: transparent;
  isolation: isolate;
  z-index: 3;

  /* Tunables */
  --head-size: 10px;           /* size of the arrow head */
  --hover-shift: 4px;          /* nudge on hover */
  --tail-height: 2px;          /* visual height of tail */
  --tail-offset: 8px;         /* gap from button edge to tail */
  --tail-w-next: 8px;         /* tail length for NEXT */
  --tail-w-prev: 8px;         /* base tail length for PREV */
  --tail-gap-prev: 8px;        /* distance from center to start of PREV tail */
  --dur: .36s;
  --ease: cubic-bezier(.23,.97,.32,1);
}

/* Hide Splide's default inline SVG */
.testimonials-slider .splide__arrow svg { display: none !important; }

/* HEAD — use your brown arrow SVG as a mask so we can tint */
.testimonials-slider .splide__arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--head-size);
  height: var(--head-size);
  background-color: var(--arrow-dim); /* idle grey */
  -webkit-mask: url("/wp-content/uploads/2025/10/brownarrow.svg") center/contain no-repeat;
          mask: url("/wp-content/uploads/2025/10/brownarrow.svg") center/contain no-repeat;
  opacity: .98;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* TAIL — use tail SVG as mask, animate by scaling X */
.testimonials-slider .splide__arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  height: var(--tail-height);
  width: 0; /* set per-side below */
  background-color: var(--arrow-hover); /* tail color */
  -webkit-mask: url("/wp-content/uploads/2025/10/brownarrow-tail.svg") center/contain no-repeat;
          mask: url("/wp-content/uploads/2025/10/brownarrow-tail.svg") center/contain no-repeat;
  opacity: 0;
  transform: scaleX(0.0001);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* Hover: head turns brown, tail reveals/grows */
.testimonials-slider .splide__arrow:hover::before,
.testimonials-slider .splide__arrow:focus-visible::before { background-color: var(--arrow-hover); }

.testimonials-slider .splide__arrow:hover::after,
.testimonials-slider .splide__arrow:focus-visible::after { opacity: 1; transform: scaleX(1); }

/* NEXT (right) */
.testimonials-slider .splide__arrow--next { right: 18px; }
.testimonials-slider .splide__arrow--next:hover::before,
.testimonials-slider .splide__arrow--next:focus-visible::before { transform: translateX(var(--hover-shift)); }
.testimonials-slider .splide__arrow--next::after {
  width: var(--tail-w-next);
  transform-origin: right center;   /* grow from right edge back toward head */
  right: var(--tail-offset);
}

/* PREV (left) — head mirrored; tail positioned to the RIGHT of the head */
.testimonials-slider .splide__arrow--prev { left: 18px; }
/* Mirror the head */
.testimonials-slider .splide__arrow--prev::before { transform: scaleX(-1); }
/* Nudge opposite on hover */
.testimonials-slider .splide__arrow--prev:hover::before,
.testimonials-slider .splide__arrow--prev:focus-visible::before {
  transform: scaleX(-1) translateX(calc(var(--hover-shift) * -1));
}
/* Tail: start slightly to the RIGHT of the head and grow outward */
.testimonials-slider .splide__arrow--prev::after {
  width: var(--tail-w-prev);
  left: calc(50% + var(--tail-gap-prev)); /* sits to the right of the head */
  right: auto;
  transform-origin: left center;          /* grow rightwards */
}

/* Mobile touch area */
@media (max-width: 640px) {
  .testimonials-slider .splide__arrow { width: 56px; height: 56px; }
}

/* Keep arrows above slides */
.testimonials-slider .splide__arrows { position: relative; z-index: 5; }

/* Reduced motion safety */
@media (prefers-reduced-motion: reduce) {
  .testimonials-slider .splide__arrow::before,
  .testimonials-slider .splide__arrow::after {
    transition: none;
    transform: none !important;
  }
  .testimonials-slider .splide__pagination__page.is-active {
    animation: none;
    transform: rotate(45deg) scale(1);
  }
}


/* body:not(:has([data-sticky-header="0"]), .content-offset--off)
  main:not(.panel-content)
  > *:first-child
  > *:first-child:not(.bricks-shape-divider) {
  margin-block-start: var(--header-height);
} */





.hero-slider .splide__arrow {
    top: auto;
    bottom: 20px; /* Fixed distance from bottom */
    transform: translateY(0);
}

.hero-slider .splide__arrow--prev {
    left: auto;
    right: 130px;
    bottom: 17px;
}

.hero-slider .splide__arrow--next {
       right: 30px;
    bottom: 17px; /* Position relative to right edge */
}

.hero-slider .splide__pagination {
  gap: 15px;
  left: auto;
  bottom: 20px;
  right: 56px;
  justify-content: flex-end;
}

/* Responsive adjustments for smaller screens */
 @media (max-width: 992px) {
    
    .hero-slider .splide__arrow--prev {
      left: 41%;
      right: unset;
      bottom: 27px;
    }
    .hero-slider .splide__arrow--next {
      right: 41%;
      bottom: 27px;
    }
    
} 

 @media (max-width: 767px) {
    
    .hero-slider .splide__arrow--prev {
        left: calc(35% - 5px);
        bottom: 8px;
    }
    .hero-slider .splide__arrow--next {
      right: calc(35% + 5px);
      bottom: 8px;
    }
    
} 

@media (max-width: 477px) {
    .hero-slider .splide__arrow--prev {
        left: calc(33% - 5px);
        bottom: 8px;
    }

    .hero-slider .splide__arrow--next {
        right: calc(33% + 5px);
        bottom: 8px;
    }

    .hero-slider .splide__pagination {
        left: 111px;
        right: auto;
        bottom: 25px;
        gap: 8px;
        justify-content: flex-start;
    }/* Align to left instead of right */
    
}



/* ============================
   Sticky Header Styles (Class-based)
============================ */

/* Smooth transition for logo, links, icons, CTA */
.header-logo,
.header-logo path,
.project-link,
.project-icon,
.project-icon path,
.primary-cta {
  transition: all 0.3s ease;
}

/* Logo fill to gold-tone (#A47B58) when sticky */
.brx-sticky.scrolling .header-logo path {
  fill: #A47B58 !important;
}

/* “Projects” link text color */
.brx-sticky.scrolling .project-link {
  color: #A47B58 !important;
}

.brx-sticky.scrolling .primary-cta:hover {
  color: white !important;
}



/* Project icon stroke color */
.brx-sticky.scrolling .project-icon path {
  stroke: #A47B58 !important;
}

/* CTA text + border */
.brx-sticky.scrolling .primary-cta {
  color: #A47B58 !important;
  border-color: #A47B58 !important;
}

/* Burger icon bars */
.brx-sticky.scrolling .brxe-xburgertrigger .x-hamburger-inner,
.brx-sticky.scrolling .brxe-xburgertrigger .x-hamburger-inner::before,
.brx-sticky.scrolling .brxe-xburgertrigger .x-hamburger-inner::after {
  background-color: #A47B58 !important;
}

/* Optional: border or pseudo-elements under “Projects” area */
.brx-sticky.scrolling .project-link-wrapper {
  border-color: #A47B58;
}
.brx-sticky.scrolling .project-link-wrapper::after {
  background-color: #A47B58;
}

/* Dropdown trigger text color */
.brx-sticky.scrolling .header-drop-down {
  color: #A47B58;
}

.brx-sticky.scrolling .header-drop-down {
  color: #A47B58;
}

.brx-sticky.scrolling .header-2-drop-down{
    color: #A47B58;
}




/* ============================
   End Sticky Header Styles
============================ */



/* Service Slider styles starts here */

.service-slider .splide__arrows {
    position: absolute;
    bottom: -90px;
    right: 50%;
}



.service-slider .splide__arrow--prev {
    left: -190px;
}

.service-slider .splide__arrow--next {
    right: -190px;
}

@media (max-width: 767px) {

  .service-slider .splide__arrow--prev {
    left: -190px;
    top: unset;
}
.service-slider .splide__arrow--next {
    right: -190px;
    top: unset;
}
.service-slider .splide__arrows {
  bottom: -43px;
}
.service-slider.brxe-xproslider > .splide__pagination {
  width : 100%!important;
}
}


@media (max-width: 480px) {
    .service-slider .splide__arrows{
    position: absolute;
    bottom: -39px;
    right: 50%;
}
.service-slider .splide__arrow--prev {
    bottom: -59px !important;
    left: -165px;
}
.service-slider .splide__arrow--next {
    bottom: -59px !important;
    right: -160px;
}
.service-slider .splide__pagination {
  gap : 8px;
}
}





/* Service Slider styles ends here */





/* Testimonial Slider styles starts here */

.testimonials-slider .splide__arrows {
    position: absolute;
    bottom: -90px;
    right: 50%;
}



.testimonials-slider .splide__arrow--prev {
    left: -110px;
}

.testimonials-slider .splide__arrow--next {
    right: -107px;
}


@media (max-width: 767px) {
    .testimonials-slider .splide__arrows {
        bottom: -37px;
        right: 50%;
        transform: translateX(50%);
    }
    .testimonials-slider .splide__arrow--prev {
      bottom: -58px;
      top: unset;
    }
    .testimonials-slider .splide__arrow--next {
      bottom: -58px;
      top: unset;
    }
}


/* Testimonial Slider styles ends here */



#brx-header .brx-submenu-toggle button{
    display: none!important;
}

/* Added by Uditha */


.brxe-offcanvas.brx-open .off-canvas-close{
  visibility: visible!important;
}