/*
 Theme Name:   Hello Elementor Child
 Theme URI:    http://example.com/hello-elementor-child
 Description:  Hello Elementor Child Theme
 Author:       Your Name
 Author URI:   http://example.com
 Template:     hello-elementor
 Version:      1.0.0
*/

/* Importing the parent theme style.css */
@import url("../hello-elementor/style.css");
:root {
  --color1: #f0147e;
  --color2: #7b6af9;
}
/* Custom CSS can go here */
.hero-banner .owl-stage-outer {
  padding: 0 !important;
}
.hero-banner p {
  margin: 0 !important;
}
.hero-banner h1 {
  position: absolute;
  top: 50%;
  left: 50px;
  translate: 0 -50%;
  color: #fff;
  font-size: 70px;
  text-align: left;
  line-height: 1;
  font-weight: 800;
}
.hero-banner h1 span {
  font-size: 50px;
  display: block;
  line-height: 1.2;
  margin-top: 20px;
}
.imagehover {
  transition: transform 0.3s ease-in-out;
  display: inline-block; /* Ensures proper transformation */
}

.imagehover:hover {
  transform: scale(1.1);
}

#ff_3_numeric_field::-webkit-outer-spin-button,
#ff_3_numeric_field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#ff_3_numeric_field {
  -moz-appearance: textfield; /* For Firefox */
}

.elementor-8
  .elementor-element.elementor-element-b1a8f93
  .elementor-button
  .elementor-button-content-wrapper:hover {
  gap: 10px;
  flex-direction: row;
}

/* Outer container transparent */
.hover {
  background-color: transparent;
  padding: 20px; /* Optional */
  transition: background 0.3s ease-in-out;
}

/* Inner container default state (White background) */
.inner-hover {
  background-color: white; /* Default background white */
  transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}

/* Inner container ke andar ka text (default color black) */

.inner-hover h2;
.inner-hover p,
.inner-hover span {
  color: black !important; /* Force apply black color */
  transition: color 0.3s ease-in-out;
}

/* Hover Effect: Inner container black, text white */
.hover:hover .inner-hover {
  background-color: black;
}

/* Hover hone par heading aur text ka color white hoga */

.hover:hover .inner-hover h2,
.hover:hover .inner-hover span {
  color: white !important; /* Force apply white color */
}
.owce-carousel .owl-nav button {
  position: inherit !important;
  float: inherit !important;
}
.owl-nav button i {
  border-radius: 50% !important;
  margin: 10px 15px !important;
}
.owce-carousel-container {
  padding: 0 !important;
}
.testimonial-box {
  background: #ffe6e6;
  box-shadow: 0px 10px 20px 0px rgba(158, 158, 158, 0.25);
  padding: 30px;
}
.testimonial-box .description {
  font-size: 24px;
  font-weight: lighter;
}
.testimonial-box h3 {
  color: #000;
}
.blog-box h3 {
  font-size: 24px;
  font-weight: bold;
  font-weight: 400;
  font-family: "Outfit", sans-serif;
  color: #000;
}
.single-page-title {
  font-family: "bacalisties", Sans-serif;
  font-size: 65px;
  font-weight: 300;
  color: #000;
  margin-bottom: 30px;
}
.promo-details p,
.promo-details ul li {
  font-size: 24px;
  font-weight: lighter;
  color: #000;
}
.intrested-promo {
  background-color: transparent;
  background-image: linear-gradient(180deg, #fcfcfc 10%, #f1f1f1 100%);
}
.back-btn {
  font-size: 18px;
  font-weight: 600;
  color: #000;
  border: none;
  margin-bottom: 15px;
}
.service-box {
  position: relative;
  overflow: hidden;
}
.service-box img,
.gallery-img img {
  transition: 0.5s ease all;
  height: 450px;
  object-fit: cover;
}
.service-box .service-text {
  transition: 0.5s ease all;
  transform-origin: center;
  height: 100%;
  align-items: center;
  display: grid;
  place-content: center;
}
.service-box:hover .service-text {
  left: 0 !important;
}
.service-box:hover img {
  scale: 1.2;
}
.hfe-nav-menu .menu-item a:before,
.hfe-nav-menu .menu-item a:after {
  display: none;
}
.gallery-item .gallery-icon {
  overflow: hidden;
}
.gallery-item .gallery-icon img {
  transition: 0.5s ease all;
}
.gallery-item .gallery-icon:hover img {
  filter: brightness(0.5);
  scale: 1.1;
}
@media (max-width: 1024px) {
  .service-box img,
  .gallery-img img {
    height: 300px;
  }
  .hero-banner h1 {
    font-size: 45px;
  }
  .hero-banner h1 span {
    font-size: 30px;
  }
}
@media (max-width: 767px) {
  .service-box img,
  .gallery-img img {
    height: auto;
  }
  .hero-banner h1 {
    font-size: 35px;
    left: 15px;
  }
  .hero-banner h1 span {
    font-size: 20px;
  }
}

.scrolled .fix-on-scroll {
  position: fixed;
  top: 0px;
  width: 100%;
  left: 0;
  right: 0;
}
.project-box {
  position: relative;
}
.project-inner {
  translate: -50% -50%;
  opacity: 1;
  transition: 0.2s ease all;
  height: 100%;
  width: 100%;
  display: grid;
  place-content: center;
  background: #000000a3;
}
.project-box:hover .project-inner {
  background: #9c27b080;
}