.elementor-kit-6{--e-global-color-primary:#F9F9F9;--e-global-color-secondary:#1A1A1A;--e-global-color-text:#595959;--e-global-color-accent:#DCDCDC;--e-global-color-6a07a25:#61CE7000;--e-global-color-65fabf3:#FEFEFE;--e-global-color-a47c4c7:#F2F2F2;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-size:12px;--e-global-typography-accent-font-weight:500;--e-global-typography-d65c0f9-font-size:56px;--e-global-typography-d65c0f9-font-weight:700;--e-global-typography-d65c0f9-text-transform:uppercase;--e-global-typography-d65c0f9-line-height:2lh;}.elementor-kit-6 h1{font-family:"Manrope", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1300px;}.e-con{--container-max-width:1300px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6{--e-global-typography-accent-font-size:10px;--e-global-typography-d65c0f9-font-size:36px;--e-global-typography-d65c0f9-line-height:1em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;--container-default-padding-top:20px;--container-default-padding-right:20px;--container-default-padding-bottom:20px;--container-default-padding-left:20px;}}
/* Start custom CSS *//* Make .Service-box and .Project-box fully clickable */
.Service-box,
.Project-box {
  position: relative;
  cursor: pointer;
}

.Service-box a,
.Project-box a {
  position: static;
}

.Service-box a:first-of-type::after,
.Project-box a:first-of-type::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* ─── Make the whole box clickable ─── */
.service-box {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: block;
}

/* ─── Slide-up container ─── */
.service-box-hover {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;

  /* Only the title height is visible by default.
     Adjust the translateY value if your title is taller/shorter. */
  transform: translateY(calc(100% - 6.5rem));
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: transform;

  /* Optional dark scrim so text stays readable over any image */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.6) 60%,
    transparent 100%
  );
}

/* ─── Reveal on hover ─── */
.service-box:hover .service-box-hover {
  transform: translateY(0);
}

/* ─── Title styling ─── */
.service-box-hover .elementor-heading-title {
  margin-bottom: 0.75rem;
  color: #ffffff;
}

/* ─── Description styling ─── */
.service-description {
  color: rgba(255, 255, 255, 0.85);
}
/* ─── Button icon rotation on hover ─── */
.button-3 .elementor-button-icon {
  transition: transform 0.3s ease;
}

.button-3:hover .elementor-button-icon {
  transform: rotate(45deg);
}
/* ─── Glass blur effect ─── */
.blur {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ─── Icon rotation on service-box hover ─── */
/* ─── Icon rotation on service-box hover ─── */
.service-box .service-box-icon {
  transition: transform 0.3s ease;
  transform-origin: center center;
  position: relative;
  top: 0;
  left: 0;
  margin: 0 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
    width: fit-content; /* ensures transform-origin is relative to the icon itself */

}

.service-box:hover .service-box-icon {
  transform: rotate(45deg);
}

/* ─── Icon rotation on service-box hover ─── */
.service-box .service-box-icon {
  transition: transform 0.3s ease;
  transform-origin: center center;
  position: relative;
  top: 0;
  left: 0;
  margin: 0 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  width: fit-content;
}

.service-box:hover .service-box-icon {
  transform: rotate(45deg);
}

/* ─── Dropdown arrow rotation on menu hover/open ─── */
.e-n-menu-dropdown-icon svg {
  transition: transform 0.3s ease;
}

.e-n-menu-item:hover .e-n-menu-dropdown-icon svg {
  transform: rotate(180deg);
}

/* ─── Dropdown menu open animation ─── */
.menu-1 {
  transform-origin: top center;
  animation: menuOpen 0.3s ease forwards;
}

@keyframes menuOpen {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}/* End custom CSS */