/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/
/*-----------font-------------*/
@font-face {
  font-family: "Inter Display";
  src: url(fonts/Inter-display.otf);
  src: url(fonts/Inter-display.eot) format("embedded-opentype"),
    url(fonts/Inter-display.woff2) format("woff2"),
    url(fonts/Inter-display.woff) format("woff"),
    url(fonts/Inter-display.ttf) format("truetype"),
    url(fonts/Inter-display.svg#Inter-display) format("svg");
}

@font-face {
  font-family: "Inter Display Bold";
  src: url(fonts/InterDisplay-Bold.otf);
  src: url(fonts/InterDisplay-Bold.eot) format("embedded-opentype"),
    url(fonts/InterDisplay-Bold.woff2) format("woff2"),
    url(fonts/InterDisplay-Bold.woff) format("woff"),
    url(fonts/InterDisplay-Bold.ttf) format("truetype"),
    url(fonts/InterDisplay-Bold.svg#InterDisplay-Bold) format("svg");
}
/*-----------end font-------------*/

.section-tag::before {
  content: "";
  width: 8px;
  height: 8px;
  background: #ff5d17;
  border-radius: 50%;
}
.section-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.mb-0 {
  margin-bottom: 0 !important;
}
body {
	font-family: Inter Display;
	font-size:18px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Inter Display;
	line-height:1.2em !important;
}
h1{
  font-size: 70px;
}
h2 {
  font-size: 52px;
}
.sm-h2 {
  font-size: 32px;
}
span.hr-space {
  width: 200px;
  display: inline-block;
}
.home-banner h1 {
  font-size: 80px;
  line-height: 1.2em !important;
}
.large-txt {
  font-size: 24px;
  line-height: 1.2em;
  font-weight: 600;
}
.reg-trademark {
  font-size: 60px;
  line-height: 1.2em;
}
ul.normal-list {
    margin-left: 20px;
}
.ls-none{
	list-style:none;
	margin-left:0;
}
.fltr-accordion .e-n-accordion-item .elementor-widget-text-editor > h3:not(:first-of-type) {
  margin-top: 15px !important;
  font-size: 20px !important;
}


/*-----------appear-------------*/
.animate-on-appear {
  opacity: 0;
  transform: translateY(12px) scale(1) rotate(0deg);
  filter: blur(4px);
  transition: all 0.7s ease; /* match Framer's ease & duration */
}

.animate-on-appear.active {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0deg);
  filter: blur(0);
}
/*-----------end appear-------------*/

/*-----------slide up button-------------*/

.slide-up-btn {
  position: relative;
  display: inline-block;
  padding: 0;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  overflow: hidden;
  min-width: 160px;
  background-color: transparent;
  -webkit-tap-highlight-color: transparent;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 16.17px 0px !important;
  line-height: 25px;
}
.slide-up-btn:hover {
  background-color: transparent;
  border: 0;
}
/* Label (on top of layers) */
.slide-up-btn span {
  position: relative;
  z-index: 3;
  display: inline-block;
  padding: 18px 32px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #fff;
  transition: color 0.35s ease;
}

/* White layer (underneath) */
.slide-up-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 1;
  transform: none;
}

/* Black layer (on top of white, but under text) */
.slide-up-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 2;
  transform-origin: top;
  transform: scaleY(1);
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1);
  will-change: transform;
}

/* Hover: collapse the black layer upward (scaleY -> 0),
   which reveals the white layer under it */
.slide-up-btn:hover::before {
  transform: scaleY(0);
}

/* Text color flips to dark while white background visible */
.slide-up-btn:hover span {
  color: #ee5b36;
}

/* Accessibility: keyboard focus should behave like hover */
.slide-up-btn:focus::before,
.slide-up-btn:focus-visible::before {
  transform: scaleY(0);
}
.slide-up-btn:focus span,
.slide-up-btn:focus-visible span {
  color: #000;
}

/*-----------end slide up button-------------*/
/*-----------arrow button-------------*/
.learn-more-btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border: none;
      border-radius: 50px;
      font-size: 18px;
      font-weight: 500;
      background: #fff;
      color: #000;
      cursor: pointer;
      overflow: hidden;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
      transition: color 0.4s ease;
      height: 60px;
      padding: 6px 20px 6px 54px;
    }

    /* Orange circle behind arrow */
    .learn-more-btn .arrow {
      position: absolute;
      z-index: 2;
      background: #ff5d17;
      color: #fff;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
      transition: all 0.4s ease;
      left: 4px;
    }

    /* Text styling */
    .learn-more-btn .text {
      position: relative;
      z-index: 2;
      transition: color 0.4s ease;
      margin-left: 10px;
    }

    /* Expanding orange shape (background) */
    .learn-more-btn::before {
      content: "";
      position: absolute;
      left: 7px;
      top: 50%;
      transform: translateY(-50%);
      width: 46px; /* Start at arrow size */
      height: 46px; /* Start at arrow size */
      background: #ff5d17;
      border-radius: 50px;
      transition: all 0.5s ease;
      z-index: 1;
    }

    /* Hover effect */
    .learn-more-btn:hover {
      background: #fff;
      padding: 6px 20px 6px 54px;
      height: 60px;
    }

    .learn-more-btn:focus {
      background: transparent;
      color: #000;
    }

    .learn-more-btn:hover::before {
      width: calc(100% - 14px);
      height: 89%;
      left: 7px;
    }

    .learn-more-btn:hover .text {
      color: #fff;
    }

    .learn-more-btn:hover .arrow {
      transform: scale(1.05);
    }
/*-----------arrow button-------------*/

/*------------avatar group----------*/
.avatar-group {
  display: flex;
  align-items: center;
}

.avatars {
  display: flex;
}

.avatars img {
  width: 48px;
  height: 48px !important;
  border-radius: 50% !important;
  object-fit: cover;
  border: 2px solid #fff !important;
  margin-left: -10px !important;
  transition: transform 0.2s ease;
}

.avatars img:first-child {
  margin-left: 0;
}

.avatars img:hover {
  transform: scale(1.05);
  z-index: 1;
}

.avatar-add {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #f3f3f3;
  border: 2px solid #fff;
  color: #777;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.avatar-add:hover {
  background-color: #e5e5e5;
  color: #333;
}
/*------------avatar group----------*/
/*-----------custom grid-------------*/
.cust-img-btn-grid .elementor-widget-image {
  position: absolute;
  object-fit: cover;
  object-position: center center;
  height: 100%;
  width: 100%;
}
.cust-img-btn-grid .elementor-widget-image img {
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.cust-img-btn-grid-wrapper {
  position: relative;
}

/* Image + Button section */
.cust-img-btn-grid {
  position: relative;
  overflow: hidden;
}

/* Button base state — hidden & scaled down */
.cust-img-btn-grid .grid-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  transform-origin: center center;
}

/* Hover on parent (either image or title) — show smoothly */
.cust-img-btn-grid-wrapper:hover .grid-btn {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* When hover out — scale down smoothly (no instant hide) */
.cust-img-btn-grid-wrapper:not(:hover) .grid-btn {
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Optional: add a gentle hover grow on the button itself */
.cust-img-btn-grid .grid-btn:hover .elementor-button {
  transform: scale(1.05);
  transition: transform 0.3s ease !important;
}
.cust-img-btn-grid-wrapper .grid-main-btn {
  transition: background-color 0.4s ease, transform 0.4s ease !important;
  cursor: pointer;
}

.cust-img-btn-grid-wrapper .grid-main-btn h3 {
  transition: color 0.4s ease;
}
.cust-img-btn-grid-wrapper .grid-main-btn:hover {
  background-color: #ff5d17 !important;
}
.cust-img-btn-grid-wrapper .grid-main-btn:hover h3 {
  color: #fff;
}

/*-----------custom grid-------------*/

/*---------image ticker--------------*/
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7)); /* Move one full set */
  }
}

.slider {
  height: 140px;
  width: 100%;
  margin: auto;
  overflow: hidden;
  position: relative;
}

/* Fading edges */
.slider::before,
.slider::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100px; /* adjust width of fade */
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.slider::before {
  left: 0;
  background: linear-gradient(to right, #000 60%, transparent);
}

.slider::after {
  right: 0;
  background: linear-gradient(to left, #000 60%, transparent);
}

.slide-track {
  display: flex;
  width: calc(250px * 14);
  animation: scroll 40s linear infinite;
}

.slide {
  height: 140px;
  width: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.slide img {
  width: 70%;
  height: auto;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.slide img:hover {
  opacity: 1;
}
/*---------image ticker--------------*/
/*---------testimonial--------------*/
.testimonial-section {
    padding: 15px 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.testimonial-container {
 
}

.testimonial-slider {
    margin-bottom: 40px;
}

.testimonial-slide {
    outline: none;
}

.testimonial-content {
    position: relative;
    margin-bottom: 40px;
}

.testimonial-text {
    font-size: 28px;
    font-weight: 600;
    color: #111;
    line-height: 1.4em;
    min-height: 155px;
}

.testimonial-quote-mark {
    font-size: 80px;
    color: #ff5d17;
    font-weight: bold;
    margin-right: 10px;
    line-height: 0.8;
    vertical-align: baseline;
}

.testimonial-img-btn-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    position: absolute;
    right: 20px;
    bottom: 70px;
}

.testimonial-client-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.testimonial-client-img {
    width: 60px;
    height: 60px;
    border-radius: 50% !important;
    object-fit: cover;
    border: 3px solid #ff5d17;
}

.testimonial-client-details {
    display: flex;
    flex-direction: column;
}

.testimonial-client-name {
    font-size: 18px;
    font-weight: 600;
    color: #111;
    margin-bottom: 4px;
}

.testimonial-client-position {
    font-size: 14px;
    color: #777;
    margin: 0;
}

.testimonial-nav-buttons {
    display: flex;
    gap: 15px;
}

.testimonial-nav-btn {
    width: 55px;
    height: 55px;
    border: 2px solid #ff5d17;
    border-radius: 50%;
    background: transparent;
    color: #ff5d17;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    padding: 0;
}

.testimonial-nav-btn:hover {
    background: #ff5d17;
    color: #fff;
    transform: scale(1.05);
}

.testimonial-nav-btn:active {
    transform: scale(0.95);
}

/* Slick Carousel Custom Styles */
.slick-slide {
    outline: none;
}

.slick-track {
    display: flex;
    align-items: stretch;
}
button:focus {
  background: #ff5d17;
  border-color: #ff5d17;
} 
@media (max-width: 767px) {
.testimonial-section {
    padding: 0px 20px;

}

.testimonial-container {
    padding: 30px 20px;
}

.testimonial-text {
    font-size: 20px;
    min-height: 120px;
}

.testimonial-quote-mark {
    font-size: 60px;
}

.testimonial-img-btn-row {
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    right: auto;
    bottom: auto;
}

.testimonial-nav-buttons {
    width: 100%;
    justify-content: center;
}
}


.testimonial-light .testimonial-text{
	color:#fff;
}
.testimonial-light .testimonial-client-name{
	color:#fff;
}
.testimonial-light .testimonial-client-position{
	color:#ff5d17;
}
/*---------testimonial--------------*/
/*-----------full width testimonials---------*/
.tes-testimonial-section {
            width: 100%;
            overflow: hidden;
        }

        .tes-section-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .tes-section-header h2 {
            font-size: 36px;
            font-weight: bold;
            color: #111827;
            margin-bottom: 10px;
        }

        .tes-section-header p {
            font-size: 18px;
            color: #6b7280;
        }

        .tes-ticker-wrapper {
            position: relative;
            overflow: hidden;
        }

        /* Gradient overlays */
        .tes-ticker-wrapper::before,
        .tes-ticker-wrapper::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 150px;
            z-index: 10;
            pointer-events: none;
        }

        .tes-ticker-wrapper::before {
            left: 0;
            background: linear-gradient(to right, #fff, transparent);
        }

        .tes-ticker-wrapper::after {
            right: 0;
            background: linear-gradient(to left, #fff, transparent);
        }

        .tes-ticker-container {
            display: inline-flex;
            animation: tes-scroll 40s linear infinite;
			margin-bottom:20px;
        }

        .tes-ticker-container:hover {
            animation-play-state: paused;
        }

        @keyframes tes-scroll {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }

        .tes-testimonial-card {
            flex-shrink: 0;
            width: 600px;
            background: #f5f5f5;
            border-radius: 16px;
            padding: 32px;
            margin: 0 16px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .tes-testimonial-card:hover {
            transform: translateY(-5px);
        }

        .tes-quote {
            font-size: 20px;
			font-weight:600;
            line-height: 1.6;
            color: #374151;
            margin-bottom: 24px;
            min-height: 120px;
        }

        .tes-rating-section {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 20px;
        }

        .tes-stars {
            display: flex;
            gap: 4px;
        }

        .tes-star {
            width: 20px;
            height: 20px;
            fill: #f97316;
            color: #f97316;
        }

        .tes-rating-number {
            font-size: 80px;
            font-weight: bold;
            color: #111827;
        }

        .tes-rating-max {
            font-size: 24px;
            color: #9ca3af;
            font-weight: normal;
        }

        .tes-author-name {
            font-size: 24px;
            font-weight: 600;
            color: #111827;
            margin-bottom: 4px;
        }

        .tes-author-title {
            font-size: 18px;
    		color: #96989c;
        }

/*-----------full width testimonials---------*/
/*---------price table--------------*/
.external-bullet {
  list-style: none !important;
  padding: 0 !important;
  margin-left: 0;
}
.external-bullet li {
  margin-left: 1em;
  padding-bottom: 10px;
}
.external-bullet li::before {
  content: "\f058";
  color: #fff;
  font-weight: bold;
  display: inline-block;
  width: 20px;
  margin-left: -1em;
  font-size: 20px;
  font-family: "FontAwesome";
  margin-right: 15px;
}
.blk-external-bullet li::before {
  color: #000;
}
.full-width-btn a {
  width: 100%;
}
.cust-price-table h3 {
  font-size: 28px;
}
.cust-price-table,
.cust-price-table p {
  color: #96989c;
}
.lg-cust-price-table,
.lg-cust-price-table p {
  color: #626262;
}
.price-table-price {
  font-size: 52px;
  font-weight: 600;
  margin-bottom: 0;
  color: #000 !important;
}
.price-table-price-white {
  color: #fff !important;
}
.price-sub {
  font-size: 16px !important;
  font-weight: 400;
}
.price-table-footer {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #000;
  padding-bottom: 10px;
}
/*---------price table--------------*/
/*----------post -------*/
.txt-center {
  justify-content: center;
}

/* Container layout */
.hfe-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
}

/* Card style */
.hfe-post-card {
  display: flex;
  flex-direction: column;
  background-color: #fff !important;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Image */
.hfe-post-image img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 8px;
}

/* Post content */
.hfe-post-content {
  padding: 1.25rem 1.5rem 1.5rem;
}

/* Date */
.hfe-post-meta {
  font-size: 16px;
  color: #777;
  margin-bottom: 0.75rem;
}

/* Title */
.hfe-post-title a {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  color: #000;
  text-decoration: none;
  display: block;
  margin-bottom: 1rem;
  transition: color 0.3s ease;
}

.hfe-post-title a:hover {
  color: #111;
}


.hfe-read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 16px;
  color: #000;
  text-decoration: none;
  transition: color 0.3s ease;
}
.hfe-read-more:hover {
  color: #ff5d17;
}
.hfe-read-more::before {
  content: "→";
  font-size: 1rem;
  margin-right: 6px;
  transition: transform 0.3s ease;
}

.hfe-read-more:hover::before {
  transform: translateX(4px);
}

/* Default thumbnail */
.hfe-post-image {
  width: 100%;
  height: 342px; 
  overflow: hidden;
  border-radius: 8px;
}

/* Image inside container */
.hfe-post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}
/* Zoom effect on hover */
.hfe-post-card:hover .hfe-post-image img {
  transform: scale(1.08);
  transition: transform 0.6s ease;
}

/* Ensure smooth animation even when not hovered */
.hfe-post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  transition: transform 0.6s ease; /* Smooth return */
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .hfe-posts-grid {
    grid-template-columns: 1fr;
  }
}
/*----------post end-------*/
/*----------custom accordion-------*/
.acc-container {
  max-width: 1600px;
  margin: 0 auto;
}

.category-section {
  margin-bottom: 0;
  transition: all 0.8s ease;
  position: relative;
}

.category-section.blur {
  filter: blur(8px);
  opacity: 0.3;
}

/* All Sections */
.simple-section {
  transition: all 0.8s ease;
  cursor: pointer;
  padding: 20px 0 40px 0;
  position: relative;
}

/* Animated border on hover */
.simple-section::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: #000;
  transition: width 0.6s ease;
}

.simple-section:hover::after {
  width: 100%;
}

.simple-section:hover {
  transform: scale(1.02);
}

.simple-title {
  font-size: 80px;
  font-weight: 700;
  line-height: 1.2;
  color: #000000;
  letter-spacing: -2px;
  display: flex;
  align-items: baseline;
  gap: 30px;
}

.simple-number {
  color: #ff5d17;
  font-size: 28px;
  font-weight: 600;
}

/* Expanded Details - Start Closed */
.details-overlay {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.8s ease;
  margin-top: 0;
}

.simple-section:hover .details-overlay {
  max-height: 800px;
  opacity: 1;
  margin-top: 20px;
}

.roles-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.role-button {
  padding: 16px 32px;
  background: #ffffff;
  border: 1.5px solid #000000;
  border-radius: 50px;
  font-size: 16px;
  color: #000000;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.5s ease;
  white-space: nowrap;
}

.role-button:hover {
  border:1.5px solid #ff5d17;
  background: #ff5d17;
  color: #ffffff;
}

@media (max-width: 1024px) {
  .simple-title {
    font-size: 48px;
  }
}

@media (max-width: 768px) {
  .simple-title {
    font-size: 36px;
  }

  .role-button {
    padding: 12px 24px;
    font-size: 14px;
  }
}

/*----------custom accordion-------*/
/*----------process steps-------*/
.sticky-container {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
}

.sticky-title {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px 20px;
	background: #fff;
	z-index: 10;
	transition: opacity 0.3s ease;
}

.sticky-title.fade-out {
	opacity: 0;
}

.title-text {
	font-size: 16px;
	font-weight: 400;
	color: #333;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 600;
}

.title-text::before {
	content: "";
	width: 8px;
	height: 8px;
	background: #ff5d17;
	border-radius: 50%;
}

/* Scroll wrapper with fade masks */
.scroll-wrapper {
  position: relative;
  height: auto;             /* Let it grow with content */
  overflow: visible;        /* Allow normal page scroll */
  padding: 20px 0;
  /* mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 10%,
    rgba(0, 0, 0, 1) 90%,
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 10%,
    rgba(0, 0, 0, 1) 90%,
    rgba(0, 0, 0, 0) 100%
  );*/

}
.scroll-wrapper {
  position: relative;
  height: auto !important;         /* Remove fixed height */
  overflow: visible !important;    /* Disable internal scrolling */
  padding: 20px 0;
  scroll-behavior: auto !important;
}


.content-section-init {
	margin-top: 200px;
}

.content-section {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.process-item {
	font-size: clamp(60px, 12vw, 120px);
	font-weight: 300;
	text-align: center;
	color: #ff5d17;
	letter-spacing: -2px;
	transition: all 0.6s ease;
}

.process-item .number {
	padding-right: 20px;
}

.process-item.active {
	transform: scale(1.05);
}

.process-des {
	font-size: 24px;
	font-weight: 600;
	max-width: 600px;
}

@media (max-width: 768px) {
	.process-item {
		font-size: clamp(52px, 10vw, 80px);
	}
}
.sticky-title::after {
  content: "";
  position: absolute;
  bottom: -56px; /* how far below sticky title it starts */
  left: 0;
  width: 100%;
  height: 60px; /* fade area height */
  rotate: 180deg;
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 30%,
    rgba(0, 0, 0, 1) 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 30%,
    rgba(0, 0, 0, 1) 100%
  );
  background: #fff; /* match your background color */
  pointer-events: none;
  z-index: 9;
}





/*----------mob process steps-------*/
.sticky-container-mob {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 40px 20px;
}

.sticky-title-mob {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px 40px;
  background: #fff;
}

.title-text-mob {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.title-text-mob::before {
  content: "";
  width: 8px;
  height: 8px;
  background: #ff5d17;
  border-radius: 50%;
}

.scroll-wrapper-mob {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0;
}

.content-section-mob {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.process-item-mob {
  font-size: clamp(60px, 12vw, 120px);
  font-weight: 300;
  text-align: center;
  color: #ff5d17;
  letter-spacing: -2px;
  transition: all 0.6s ease;
}

.process-item-mob:hover {
  transform: scale(1.05);
}
.mob-process-des {
    text-align: center;
}
@media (max-width: 768px) {
  .process-item-mob {
    font-size: clamp(52px, 10vw, 80px);
  }

  .sticky-container-mob {
    padding: 20px 10px;
  }
}
/*----------mob process steps-------*/

/*----------end process steps-------*/
/*---------footer--------------*/
.footer-section h4 {
  font-size: 24px;
}
.footer-mob a {
  font-size: 18px;
  color: #000;
  font-weight: 600;
}
.footer-mob a:hover,
.footer-mail a:hover {
  color: #ff5d17;
}
.footer-mail a {
  font-size: 32px;
  color: #000;
  font-weight: 600;
}
.bullet-none {
  list-style: none;
  margin-left: 0;
}
.bullet-none li {
  padding-bottom: 16px;
}
.bullet-none li a {
  font-size: 18px;
  color: #626262;
  font-weight: 600;
}
.bullet-none li a:hover {
  color: #ff5d17;
}
.footer-section .hfe-nav-menu li a {
  font-size: 18px;
  color: #626262 !important;
  font-weight: 600;
  padding-left: 0 !important;
}
.footer-section .hfe-nav-menu li a:hover {
  color: #ff5d17;
}
/*---------end footer--------------*/
/*---------animation--------------*/
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 20%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(60%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}
.fade-up {
  opacity: 0;
  transform: translateY(50px);
  will-change: transform, opacity;
  transition: none !important;
}
/*---------end animation--------------*/
/*-------form-----------*/
.wpcf7-form label{
    margin-top: 10px;
    padding: 0 0 2px 0 !important;
    font-size: 18px;
    font-weight: 600;
}
.input.text, input.title, input[type=email],
 input[type=password], input[type=tel],
  input[type=text],input[type=number], select, textarea {
    /*padding: 25px !important;*/
	  height:50px;
    border-radius: 10px;
    width: 100%;
    background: #f5f5f5;
}
textarea {
    height: 100px;
}
.wpcf7-submit{
  margin-top: 10px;
  padding: 10px 25px;
  cursor: pointer;
}

input[type="file"]{
  border-radius: 4px;
  border: 1px solid #bbb;
}
 input::file-selector-button{
  background:#ffdd00;
  padding: 15px;
  border: none;
  color: #fff;
  border-radius: 4px;
  color: #000;
}
input.text:focus, input.title:focus, input[type=text]:focus,input[type=number]:focus, select:focus, textarea:focus {
    border-color: #bbb;
    color: #3e3e3e;
}
.wpcf7 form.sent .wpcf7-response-output{
    border: 1px solid #a4b49b!important;
    background: #d6f0c8!important;
    color: #557d3f!important;
    border-radius: 5px!important;
    font-size: 14px;
    padding: 10px!important;
    font-weight: 400;
    
}
.wpcf7 form .wpcf7-response-output {
    border: 1px solid #d6a6a7!important;
    background: #ffe9e9!important;
    color: #b74e4e!important;
    border-radius: 4px!important;
    font-size: 14px;
    margin-left: 0!important;
    margin-right: 0!important;
    padding: 10px!important;
    font-weight: 400;
    margin-top: 20px!important;
}
.wpcf7-submit{
    position: relative;
    z-index: 1;
    line-height: 1.7em;
    width: 100%;
    cursor: pointer;
    transition: all 300ms ease 0ms;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 16.17px 0px !important;
    background: #000 !important;
    color: #fff !important;
}
.wpcf7-submit:hover{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 16.17px 0px !important;
    background: #fff !important;
    color: #000 !important;
}

/*-------form-----------*/
/*-------globe-----------*/
.globe-content-wrapper {
	position: relative;
	width: 100%;
	min-height: 500px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#globe-chartdiv {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 400px;
	height: 400px;
	z-index: 1;
	pointer-events: auto;
}

#globe-chartdiv::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 101.5%;
	height: 101.5%;
	background: #ffffff;
	border-radius: 50%;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.12), 
		0 15px 40px rgba(0, 0, 0, 0.08);
	z-index: -1;
}

.globe-text-container {
	position: relative;
	z-index: 10;
	max-width: 720px;
	padding: 60px;
	pointer-events: none;
	text-align: left;
}

.globe-headline {
	font-size: 40px;
	line-height: 1.2;
	color: #000000;
	margin: 0;
}

@media (max-width: 768px) {
	#globe-chartdiv {
		width: 300px;
		height: 300px;
	}

	.globe-headline {
		font-size: 28px;
	}

	.globe-text-container {
		padding: 30px;
	}
}
/*-------End globe-----------*/
/*-------fadeslider-----------*/
.acctslider-wrapper {
  position: relative;
  width: 100%;
  max-width: 1000px;
  overflow: hidden;
}

.acctslider-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: acctslider-scroll 40s linear infinite;
}

.acctslider-card {
  flex: 0 0 300px;
  background: #ecedee;
  border-radius: 8px;
  padding: 40px 24px;
  transition: transform 0.3s ease;
}

.acctslider-icon {
  font-size: 36px;
  color: #999;
  margin-bottom: 20px;
  width: 45px;
}

.acctslider-title {
  font-size: 20px;
  font-weight: 600;
  color: #111;
  margin-bottom: 8px;
}

.acctslider-text {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}

/* Fading Edges */
.acctslider-fade-left,
.acctslider-fade-right {
  position: absolute;
  top: 0;
  width: 120px;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.acctslider-fade-left {
  left: 0;
  background: linear-gradient(to right, #fff 30%, transparent);
}

.acctslider-fade-right {
  right: 0;
  background: linear-gradient(to left, #fff 30%, transparent);
}

/* Infinite scroll animation */
@keyframes acctslider-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/*-------end fadeslider-----------*/
/*-------hr cards-----------*/
 /* hr cards */
    #hr-horizontal-scroll {
      padding: 80px 0;
    }

    .hr-horizontal-wrapper {
      overflow: hidden;
    }

    .hr-horizontal {
      display: flex;
      gap: 40px;
      padding: 0 5% 0 5%;
    }

    .hr-horizontal > div {
      flex-shrink: 0;
    }

    .hr-card {
      background: #f5f5f5;
      width: 460px;
      height: auto;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: transform 0.3s ease;
      gap: 50px;
      margin-bottom: 15px;
    }

    .hr-card-top {
      background: #000;
      color: #fff;
      font-size: 150px;
      font-weight: 700;
      display: flex;
      min-height: 180px;
      margin: 25px;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
    }

    .hr-card-top .num {
      position: absolute;
      bottom: -100px;
    }

    .hr-card-content {
      padding: 24px 32px;
      text-align: left;
    }

    .hr-card-title {
      font-size: 32px;
      font-weight: 700;
      margin-bottom: 10px;
    }

    .hr-card-desc {
      font-size: 16px;
      color: #626262;
      line-height: 1.6;
    }

    @media (max-width: 768px) {
      .hr-card {
        width: 85vw;
        height: auto;
      }

      .hr-card-top {
        height: 120px;
        font-size: 100px;
      }

      .hr-card-top .num {
        bottom: -60px;
      }

      .hr-horizontal {
        gap: 24px;
        padding: 0 20px;
      }
    }
/*-------end hr cards-----------*/
.filter-bar-wrapper {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin; 
}

.filter-bar-wrapper::-webkit-scrollbar {
  display: none; /* Hide scrollbar (Webkit) */
}

.filter-bar {
  display: inline-flex;
  align-items: center;
  background: #f5f5f5;
  padding: 8px;
  border-radius: 40px;
  gap: 20px;
  white-space: nowrap; /* Prevent text wrapping */
  margin: 20px auto;
}

.filter-btn {
  background: transparent;
  border: none;
  outline: none;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 18px 40px;
  border-radius: 40px;
  flex-shrink: 0;
  box-shadow:none;
}

.filter-btn:hover {
  color: #e74c3c;
}

.filter-btn.active {
  background: #e74c3c;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2);
}



/*---------media query--------------*/
@media (min-width: 981px) {
  /* Every even post → taller */
  .hfe-post-card:nth-child(even) .hfe-post-image {
    height: 395px; /* taller image */
  }
}
@media (max-width: 980px) {
	.slide-up-btn{
		font-size:16px;
	}
	.slide-up-btn span{
		padding:18px 28px;
	}
  .home-banner h1,h1 {
    font-size: 60px;
  }
  .reg-trademark {
    font-size: 38px;
  }
  .large-txt {
    font-size: 20px;
  }
  .sm-h2,
  h2 {
    font-size: 32px;
  }
  .price-table-price {
    font-size: 32px;
  }
  .cust-price-table h3 {
    font-size: 24px !important;
  }
  .testimonial-text {
    font-size: 24px;
  }
  .testimonial-client-name {
    font-size: 16px;
  }
  .mob-lg-btn a {
    width: 100%;
  }
  .hfe-post-title a {
    font-size: 20px;
  }
  .hfe-post-meta {
    font-size: 13px;
  }
	.tes-testimonial-card{
		width:450px;
	}
}
@media (max-width: 767px) {
  .home-banner h1 ,h1{
    font-size: 42px;
  }
  .reg-trademark {
    font-size: 38px;
  }
  .large-txt {
    font-size: 18px;
  }
  .sm-h2,
  h2 {
    font-size: 30px;
  }
  span.hr-space {
    width: 120px;
  }
  .cust-img-btn-grid-wrapper h3 {
    font-size: 14px;
  }
  .slide {
    width: 150px;
  }
  .testimonial-img-btn-row {
    flex-direction: column;
  }
  .footer-section h4 {
    font-size: 20px;
  }
  .footer-section .hfe-nav-menu li a {
    font-size: 15px;
  }
  .footer-mail a {
    font-size: 22px;
  }
  .footer-mob a {
    font-size: 15px;
  }
  .hfe-post-title a {
    font-size: 18px;
  }
  .hfe-read-more {
    font-size: 14px;
  }
  
  /*-------cust accordion---------*/
  /* Disable hover animation on mobile */
  .simple-section:hover::after {
    width: 0;
  }

  .simple-section {
    transform: none !important;
    cursor: default;
  }

  /* Force all details to stay open */
  .details-overlay {
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    margin-top: 20px;
  }

  /* Remove blur effect completely */
  .category-section {
    filter: none !important;
    opacity: 1 !important;
  }
  /*-------cust accordion---------*/
	.acctslider-card{
		flex: 0 0 250px;
		padding: 28px 18px;
	}
	.tes-rating-number{
		font-size:50px;
	}
	.tes-testimonial-card {
        width: 300px;
    }
	.tes-quote{
		font-size:18px;
	}
	.testimonial-light .testimonial-text {
        font-size: 20px;
    }
	.acctslider-fade-left, .acctslider-fade-right{
		width:50px;
	}
	.tes-ticker-wrapper::before, .tes-ticker-wrapper::after{
		width:50px;
	}
}