/* Put any custom CSS in here */
a.white-link {
  color: #fff;
}
a.white-link:hover {
  color: #b29c60;
}
span.blue {
  color: #019bd9;
}
ol li,
ul li {
  margin: 10px 0;
}

.custom-form input,
.custom-form select,
.custom-form textarea {
  background-color: #f0f0f0 !important;
  box-shadow: inset 1px 1px 3px 1px rgb(0 0 0 / 20%);
}

.extra-lh p {
  line-height: 1.5em;
}

/* Variables */
:root {
  --nya-horizontal-spacing: 10%;
  --nya-vertical-spacing: 75px;
  --nya-mobile-horizontal-spacing: 50px;
  --nya-mobile-vertical-spacing: 50px;
  --nya-paragraph: clamp(1rem, 2vw, 1.375rem);
  /* Font Sizes: clamp(min-size, scaling size, max-size)*/
  --nya-h1: clamp(2rem, 4vw, 4rem);
  --nya-h2: clamp(1.7rem, 3vw, 3.5rem);
  --nya-h3: clamp(1.7rem, 2.5vw, 3rem);
  --nya-h4: clamp(1.5rem, 2vw, 2.5rem);
  --nya-p: clamp(1rem, 2vw, 1.375rem);
}

/* Containers and Alignment */
.nya-custom-container {
  padding: var(--nya-vertical-spacing) var(--nya-horizontal-spacing);
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
  .nya-custom-container {
    padding: var(--nya-mobile-vertical-spacing)
      var(--nya-mobile-horizontal-spacing);
  }
}
@media screen and (max-width: 767px) {
  .nya-custom-container {
    padding: var(--nya-mobile-vertical-spacing)
      var(--nya-mobile-horizontal-spacing);
  }
}
.nya-custom-horizontal {
  padding-left: var(--nya-horizontal-spacing);
  padding-right: var(--nya-horizontal-spacing);
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
  .nya-custom-container {
    padding-left: var(--nya-mobile-horizontal-spacing);
    padding-right: var(--nya-mobile-horizontal-spacing);
  }
}
@media screen and (max-width: 767px) {
  .nya-custom-container {
    padding-left: var(--nya-mobile-horizontal-spacing);
    padding-right: var(--nya-mobile-horizontal-spacing);
  }
}

/* Font Sizes */
.nya-custom-p p,
.nya-custom-p ul li,
.nya-custom-p ol li {
  font-size: var(--nya-paragraph) !important;
}
.nya-custom-h1 h1 {
  font-size: var(--nya-h1) !important;
}
.nya-custom-h2 h2 {
  font-size: var(--nya-h2) !important;
}
.nya-custom-h3 h3 {
  font-size: var(--nya-h3) !important;
}
.nya-custom-h4 h4,
.nya-custom-h5 h5,
.nya-custom-h6 h6 {
  font-size: var(--nya-h4) !important;
}



/* ==========================================================================
   							Custom Css start 
   ========================================================================== */

/* Scroll Indicator Animation (Floating Arrow) */
@keyframes scrollIndicate {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(25px);
    opacity: 0;
  }
}

/* ==========================================================================
   Heading Responsive Font Size
   H1 custom size for viewport range: 1550px - 1700px
   ========================================================================== */
@media (max-width: 1700px) and (min-width: 1550px) {
  h1 {
    font-size: 115px !important;
    line-height: 90px !important;
  }
}

/* ==========================================================================
   Floating Image Animation
   ========================================================================== */
.float-img {
  animation: scrollIndicate 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.dl-floating {
  animation-delay: -1s;
}

/* ==========================================================================
   Image Blend Mode
   ========================================================================== */
.dodge-img {
  mix-blend-mode: color-dodge;
}

/* ==========================================================================
   Image Overlay (Gradient)
   ========================================================================== */
.img-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(89.73deg, rgba(35, 35, 35, 0.8) 16.52%, rgba(35, 35, 35, 0) 76.11%);
  border-radius: 12px;
}

/* ==========================================================================
   Asymmetric Layout (Content Box + Full-Width Breakout)
   Content stays within min(1600px, 92vw), other side bleeds edge-to-edge
   Only active above 1600px viewport; Elementor's native responsive
   padding handles smaller breakpoints
   ========================================================================== */
@media (min-width: 1600px) {
  .box-left {
    padding-left: calc((100vw - min(1600px, 92vw)) / 2);
  }
}

@media (min-width: 1600px) {
  .box-right {
    padding-right: calc((100vw - min(1600px, 92vw)) / 2);
  }
}

/* ==========================================================================
   Frosted Glass / Background Blur Effect
   ========================================================================== */
.bg-blur {
  backdrop-filter: blur(24px);
}

/* ==========================================================================
   Service Expander Cards
   Four image cards in a flex row; hover/click expands the active card
   to 50% width while the rest share the remaining 50% equally
   ========================================================================== */
.service-expander {
  display: flex;
  overflow: hidden;
}

.service-expander__item {
  position: relative;
  flex: 1 1 0 !important;
  min-width: 17% !important;
  cursor: pointer;
  overflow: hidden;
  transition: 0.4s ease !important;
}

.service-expander__item.is-active {
  flex: 3 1 0 !important;
  min-width: 50% !important;
}

/* Gradient overlay shown only on the active card */
.service-expander__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(360deg, rgba(35, 35, 35, 0.8) 0%, rgba(35, 35, 35, 0) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.service-expander__item.is-active::after {
  opacity: 1;
}

/* Heading + icon content inside each card */
.card-content {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease !important;
}

/* Content fades in with a delay, appearing only after the
   card has fully finished expanding (0.4s card transition) */
.service-expander__item.is-active .card-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.3s ease 0.4s, transform 0.3s ease 0.4s, visibility 0s linear 0.4s !important;
  z-index: 5;
}

/* ==========================================================================
   Projects Image Carousel (Homepage Slider)
   ========================================================================== */
.projects-img-slider .elementor-image-carousel-wrapper {
  overflow: hidden;
}

.projects-img-slider .swiper {
  padding: 0 !important;
}

.projects-img-slider .swiper-wrapper {
  align-items: stretch;
}

.projects-img-slider .swiper-slide {
  height: auto;
}

.projects-img-slider .swiper-slide-inner {
  height: 100%;
  display: block;
}

/* Slide height follows the tallest image; object-fit keeps images cropped nicely */
.projects-img-slider .swiper-slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 400px;
}

/* Pagination dots - left aligned (default / desktop) */
.projects-img-slider .swiper-pagination {
  text-align: left;
  left: 30px;
  bottom: 20px !important;
}

/* Pagination dots - large screens (1600px+) */
@media (min-width: 1600px) {
  .projects-img-slider .swiper-pagination {
    text-align: left;
    left: 50px;
    bottom: 40px !important;
  }
}

/* Tablet - reduced minimum slide height */
@media (max-width: 880px) {
  .projects-img-slider .swiper-slide-image {
    min-height: 360px;
  }
}

/* Mobile - reduced minimum slide height + pagination position */
@media (max-width: 767px) {
  .projects-img-slider .swiper-slide-image {
    min-height: 220px;
  }
  .projects-img-slider .swiper-pagination {
    text-align: left;
    left: 10px;
    bottom: 10px !important;
  }
}