/* ==========================================================================
   Custom Theme Styles
   --------------------------------------------------------------------------
   Table of contents:
     1. Buttons
     2. Text
     3. Hero
     4. Footer
     5. Responsive (max-width: 1024px)
   ========================================================================== */

/* ==========================================================================
   1. Buttons
   ========================================================================== */

.blog-post-inner-element a {
	color: #e5731b !important;
}

.home-case-study:hover a {
  border-color: #e5731b !important;
  color: #e5731b !important;
}
.home-case-study .elementor-widget-image {
  overflow: hidden;
}
.home-case-study img {
  /* Smooth transition for the zoom effect */
  transition: transform 0.4s ease-in-out;
  /* Prevents blurriness on scaling in WebKit browsers */
  will-change: transform;
}
/* Image hover state */
.home-case-study:hover img {
  /* Zooms the image in by 10% */
  transform: scale(1.1);
}
p {
  margin-block-end: unset !important;
  margin-block-start: unset !important;
}

a {
  color: #f1f3f4 !important;
}

/* Secondary button link styling */
.secondary-btn a {
  font-size: 0.6875rem;
  line-height: 1.2;
  font-family: "JetBrains Mono";
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-left: 0.14em;
  color: #f1f3f4;
  background-color: transparent !important;
}

/* Animated underline button: base link reset */
.animate-button a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  padding: 0 !important;
}

/* Animated underline (hidden by default, scales in on hover) */
.animate-button a::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #e5731b;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

/* Grow the underline from the left on hover */
.animate-button a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* On hover removal, animate from left → right */
.animate-button a:not(:hover)::after {
  transform-origin: right;
}

.animated-service {
  position: relative;
}

/* Vertical animated line */
.animated-service::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0px; /* adjust position */
  width: 4px;
  height: 100%;
  background: #0a80e8; /*#7c8790;*/
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s ease;
}

/* Grow top → bottom */
.animated-service:hover::after {
  transform: scaleY(1);
  transform-origin: top;
}

/* Retract top → bottom */
.animated-service:not(:hover)::after {
  transform-origin: top;
}

.animated-service h2 {
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.animated-service:hover h2 {
  transform: scaleX(1.08);
}

.operating-animation {
  position: relative;
}

.operating-animation::after {
  content: "";
  position: absolute;
  top: 0;
  right: -50px;
  width: 1px;
  height: 100%;
  background: #7d907c30;
  z-index: 5;
}

.operating-animation-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: -51px;
  width: 2px;
  height: 20px;
  background: #e5731b;
  z-index: 6;

  animation: slide-line 7s linear infinite;
}

@keyframes slide-line {
  0% {
    top: 0;
  }

  100% {
    top: calc(100% - 10px);
  }
}

.nav-container {
  position: relative;
}

.nav-container .contact-icons {
  position: absolute;
  right: 0;
}

.post-category a, .non-click-terms .elementor-post-info__terms-list-item {
  color: #e5731b !important;
}

.latest-post p {
  visibility: hidden;
}

.post-feature:hover .elementor-divider-separator {
  border-color: #e5731b !important;
}

.post-feature:hover .elementor-post__read-more {
  color: #e5731b !important;
}

.single-post-meta .elementor-post-info__item--type-author {
  color: #f1f3f4 !important;
}

@media (max-width: 1024px) {
  .operating-animation::after,
  .operating-animation-slide::before,
  .about-services .elementor-icon-list-item::after {
    display: none;
  }

  .itm-loop-container .elementor-loop-container {
    display: flex;
    flex-direction: column;
  }

  .itm-loop-container .elementor-loop-container .animated-service {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .itm-loop-container
    .elementor-loop-container
    .animated-service
    .stories-inner {
    flex-direction: column-reverse;
  }
}

.home-divider .elementor-divider-separator {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, #a78bff 45%, transparent) 12%,
    color-mix(in srgb, #6e8cff 45%, transparent) 27.2%,
    color-mix(in srgb, #efe0d0 45%, transparent) 42.4%,
    color-mix(in srgb, #3fd97a 45%, transparent) 57.6%,
    color-mix(in srgb, #ffb061 45%, transparent) 72.8%,
    color-mix(in srgb, #ff6b4a 45%, transparent) 88%,
    transparent 100%
  );
  border-block-start: unset !important;
}

.home-posts .elementor-post__text {
  display: flex !important;
  flex-direction: column-reverse !important;
}

.divider-container .elementor-divider {
  padding: 0 !important;
}

.divider-container .elementor-widget-divider {
  margin-bottom: 0 !important;
}

.itm-logo-marquee__item img {
  opacity: 0.4;
}

.itm-logo-marquee__item:hover img {
  opacity: 1;
}

/* ==========================================================================
   2. Text
   ========================================================================== */

/* Decorative dash placed before intro text */
.intro-text::before {
  content: "";
  width: 16px;
  height: 1px;
  background: #e5731b;
  flex: 0 0 auto;
  display: flex;
  position: absolute;
  top: 7px;
}

/* Indent intro text to make room for the decorative dash */
.intro-text p {
  padding-left: 30px;
}

/* ==========================================================================
   3. Hero
   ========================================================================== */

/* Positioning context for absolutely positioned hero children */
.hero-container {
  position: relative;
}

/* Fluid hero heading size */
.hero-text h2 {
  font-size: clamp(2.15rem, 0.85rem + 5.6vw, 6rem);
}

/* Pin the hero subtitle to the bottom of the hero container */
.hero-subtitle {
  position: absolute;
  bottom: 0;
}

/* ==========================================================================
   4. Footer
   ========================================================================== */

/* Remove left padding from footer navigation links */
.footer-nav-menu a {
  padding-left: 0 !important;
}

/* ==========================================================================
   5. Responsive (max-width: 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
  .animated-service.twin-dev {
    border-color: #0a80e8 !important;
  }

  .animated-service.triple-dev {
    border-color: #e5731b !important;
  }

  /* Allow the nav container to size naturally */
  .nav-container {
    justify-items: unset !important;
  }

  /* Reset explicit ordering before applying custom order below */
  .nav-container > * {
    order: 0;
  }

  /* Move the first child (menu) after the last child (toggle) */
  .nav-container > *:first-child {
    order: 2;
  }

  /* Move the last child (toggle) before the menu */
  .nav-container > *:last-child {
    order: 1;
  }

  /* Reset the menu toggle alignment/spacing */
  .nav-container .elementor-menu-toggle {
    margin-left: 0 !important;
    justify-content: unset !important;
    padding: 0 !important;
  }

  /* Reset the nav menu widget layout */
  .nav-container .elementor-widget-nav-menu {
    gap: 0 !important;
    flex-direction: unset !important;
  }
}