/* =====================================================
   COMPREHENSIVE WIDGET & ANIMATION FIX CSS
   Sarovar Builders - Astro Migration
   ===================================================== */

/* =====================================================
   1. ANIMATED NUMBER COUNTERS
   ===================================================== */
.number-percentage-wraper {
  display: flex !important;
  align-items: baseline !important;
  gap: 2px !important;
  justify-content: center;
}
.number-percentage {
  font-size: clamp(2.5rem, 5vw, 4rem) !important;
  font-weight: 700 !important;
  color: #C9A84C !important;
  line-height: 1 !important;
  display: inline-block !important;
}
.number-percentage-wraper .super {
  font-size: clamp(1rem, 2vw, 1.8rem) !important;
  font-weight: 600 !important;
  color: #C9A84C !important;
}
.funfact-content {
  text-align: center !important;
}
.funfact-title {
  display: none !important;
}
.elementskit-funfact {
  text-align: center;
}
.elementskit-funfact-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* =====================================================
   2. FEATURED PROJECTS — Override from hover-only to default
      The post-41.css sets background-image on :hover.
      We move those backgrounds to the default state.
   ===================================================== */

/* Force featured project containers to show bg images always */
.elementor-41 .elementor-element.elementor-element-1824c13e,
.elementor-41 .elementor-element.elementor-element-1824c13e:not(.elementor-motion-effects-element-type-background) {
  background-image: url("/images/2025/10/2221.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
.elementor-41 .elementor-element.elementor-element-6be24d1,
.elementor-41 .elementor-element.elementor-element-6be24d1:not(.elementor-motion-effects-element-type-background) {
  background-image: url("/images/2025/10/2806.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
.elementor-41 .elementor-element.elementor-element-3dcdb0f,
.elementor-41 .elementor-element.elementor-element-3dcdb0f:not(.elementor-motion-effects-element-type-background) {
  background-image: url("/images/2025/10/3188.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
.elementor-41 .elementor-element.elementor-element-87c6043,
.elementor-41 .elementor-element.elementor-element-87c6043:not(.elementor-motion-effects-element-type-background) {
  background-image: url("/images/2025/10/1566.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
.elementor-41 .elementor-element.elementor-element-390bc0c4,
.elementor-41 .elementor-element.elementor-element-390bc0c4:not(.elementor-motion-effects-element-type-background) {
  background-image: url("/images/2025/10/746.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
.elementor-41 .elementor-element.elementor-element-391b59b6,
.elementor-41 .elementor-element.elementor-element-391b59b6:not(.elementor-motion-effects-element-type-background) {
  background-image: url("/images/2025/10/17925.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Make project card inner content (Gp-2 placeholder) transparent so bg shows through */
.elementor-element-1824c13e .elementor-widget-image img,
.elementor-element-6be24d1 .elementor-widget-image img,
.elementor-element-3dcdb0f .elementor-widget-image img,
.elementor-element-87c6043 .elementor-widget-image img,
.elementor-element-390bc0c4 .elementor-widget-image img,
.elementor-element-391b59b6 .elementor-widget-image img {
  opacity: 0 !important;
  pointer-events: none;
}

/* Hover zoom effect on project cards */
.elementor-element-1824c13e:hover,
.elementor-element-6be24d1:hover,
.elementor-element-3dcdb0f:hover,
.elementor-element-87c6043:hover,
.elementor-element-390bc0c4:hover,
.elementor-element-391b59b6:hover {
  transform: scale(1.03);
  transition: transform 0.4s ease;
}

/* Project title text overlay - white on bg image */
.elementor-element-3b57d8fc h3.elementor-heading-title {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.elementor-element-3b57d8fc h6.elementor-heading-title {
  color: #C9A84C !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* =====================================================
   3. WHY CHOOSE SAROVAR - Background Image
      Building photo behind the 3 feature cards
   ===================================================== */
.elementor-41 .elementor-element.elementor-element-4e0729,
.elementor-41 .elementor-element.elementor-element-4e0729:not(.elementor-motion-effects-element-type-background) {
  background-image: url("/images/2025/10/7928953.jpg") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* =====================================================
   4. FLIP-BOX CARDS (Sectors We Serve)
      These need proper height and 3D perspective for
      the flip animation to work
   ===================================================== */
.elementor-flip-box {
  perspective: 1000px !important;
  height: 280px !important;
  width: 100% !important;
  position: relative !important;
  cursor: pointer;
}
.elementor-flip-box__layer {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  backface-visibility: hidden !important;
  transition: transform 0.6s ease !important;
}
.elementor-flip-box__front {
  z-index: 2 !important;
  /* background-image comes from post-41.css via per-element selectors */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.elementor-flip-box__front .elementor-flip-box__layer__overlay {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.elementor-flip-box__front .elementor-flip-box__layer__inner {
  text-align: center;
  color: #fff;
  padding: 20px;
}
.elementor-flip-box__layer__title {
  color: #fff !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  margin-top: 12px;
}
.elementor-flip-box__front .elementor-icon-wrapper {
  margin-bottom: 5px;
}
.elementor-flip-box__front .elementor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
}
.elementor-flip-box__front .elementor-icon svg {
  width: 48px !important;
  height: 48px !important;
  fill: #fff !important;
}
.elementor-flip-box__back {
  transform: rotateY(180deg) !important;
  z-index: 1 !important;
  background: #12365D !important;
}
.elementor-flip-box__back .elementor-flip-box__layer__overlay {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 30px;
  background: #12365D !important;
}
.elementor-flip-box__back .elementor-flip-box__layer__inner {
  text-align: center;
  color: #fff;
}
.elementor-flip-box__back .elementor-flip-box__layer__title {
  color: #C9A84C !important;
}
.elementor-flip-box__back .elementor-flip-box__layer__description {
  color: rgba(255,255,255,0.9) !important;
  font-size: 0.95rem !important;
  line-height: 1.6;
  margin-top: 10px;
}
.elementor-flip-box:hover .elementor-flip-box__front,
.elementor-flip-box:focus .elementor-flip-box__front {
  transform: rotateY(-180deg) !important;
}
.elementor-flip-box:hover .elementor-flip-box__back,
.elementor-flip-box:focus .elementor-flip-box__back {
  transform: rotateY(0) !important;
}

/* Sectors container layout - 5 columns */
.elementor-element-2da6500 > .e-con-inner {
  display: flex !important;
  gap: 20px !important;
}
.elementor-element-2da6500 > .e-con-inner > .e-con {
  flex: 1 !important;
  min-width: 0 !important;
}

/* =====================================================
   5. MARQUEE RUNNING TEXT (Brands We Deal In)
   ===================================================== */
.deensimc-marquee-main-container {
  overflow: hidden !important;
  width: 100% !important;
  padding: 15px 0 !important;
}
.deensimc-marquee-track-wrapper {
  display: flex !important;
  overflow: hidden !important;
  width: 100% !important;
}
.deensimc-marquee-track {
  display: flex !important;
  flex-shrink: 0 !important;
  animation: marquee-scroll 25s linear infinite !important;
  gap: 60px !important;
  align-items: center !important;
  min-width: 100%;
}
.deensimc-text-wrapper {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
.deensimc-scroll-text {
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  color: #333 !important;
  letter-spacing: 1px !important;
  margin: 0 !important;
}
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.deensimc-marquee-pause-on-hover:hover .deensimc-marquee-track {
  animation-play-state: paused;
}
.deensimc-noscript-notice { display: none !important; }

/* =====================================================
   6. ELEMENTOR ENTRANCE ANIMATIONS
   ===================================================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

.animate-fadeInUp { animation: fadeInUp 0.8s ease-out both; }
.animate-fadeInRight { animation: fadeInRight 0.8s ease-out both; }
.animate-fadeInLeft { animation: fadeInLeft 0.8s ease-out both; }
.animate-fadeIn { animation: fadeIn 0.8s ease-out both; }
.animate-zoomIn { animation: zoomIn 0.8s ease-out both; }

/* Heading reveal */
.jkit-heading .heading-title {
  animation: fadeInUp 0.7s ease-out both;
}
.style-color span {
  color: #C9A84C;
}

/* =====================================================
   7. TESTIMONIAL STARS & SLIDER
   ===================================================== */
.elementskit-stars {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 10px 0 !important;
  display: inline-flex !important;
  gap: 3px !important;
}
.elementskit-stars li {
  display: inline-flex !important;
  width: 18px !important;
  height: 18px !important;
}
.elementskit-stars li a {
  display: inline-flex !important;
  width: 18px !important;
  height: 18px !important;
}
.elementskit-stars li svg {
  width: 18px !important;
  height: 18px !important;
  fill: #C9A84C !important;
}
.elementskit-watermark-icon {
  position: absolute !important;
  top: -10px !important;
  right: 10px !important;
  opacity: 0.08 !important;
  font-size: 100px !important;
  z-index: 0 !important;
}
.elementskit-commentor-content p {
  font-size: 1.15rem;
  line-height: 1.8;
  font-style: italic;
  color: #444;
}
.elementskit-commentor-image img {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}
.elementkit-commentor-details {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.elementskit-author-name {
  color: #12365D !important;
  font-size: 1rem !important;
}
.elementskit-author-des {
  color: #888 !important;
  font-size: 0.85rem !important;
}
.ekit-main-swiper, .swiper {
  overflow: hidden !important;
  position: relative !important;
}
.swiper-wrapper {
  display: flex !important;
}
.swiper-slide {
  flex-shrink: 0 !important;
  width: 100% !important;
}