/*
Theme Name: Hello elementor child
Author: 
Description: Your description goes here
Version: 1.0
Template: hello-elementor

This is the child theme for Hello Elementor theme, generated with Generate Child Theme plugin by catchthemes.

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/
@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&display=swap');



body, h1,h2,h3,h4,h5,h6,p,span,li{
	font-family: "Cal Sans", sans-serif !important;
  	font-weight: 400;
  	font-style: normal;
}

/* --- NORMAL HEADER TRANSITION --- */
/* Normal se floating bante time jhatka na lage isliye transition */
.main-header {
    transition: all 0.5s ease-in-out !important;
}

/* =======================================================
   JAB BODY MEIN 'IS-SCROLLED' CLASS AAYEGI (>500px Scroll)
======================================================== */

/* 1. Header ko Floating, Glass & Pill Shape banana */
body.is-scrolled .main-header {
    position: fixed !important;
    box-shadow: 0 10px 30px rgb(0 0 0 / 15%) !important;
    backdrop-filter: blur(50px) !important;
    -webkit-backdrop-filter: blur(50px) !important;
    background: rgb(0 0 0 / 60%) !important;
    padding: 10px 25px !important;
    z-index: 999999 !important;
    animation: slideDownFade 0.5s ease-out forwards !important;
	top: 0 !important;
}

@keyframes slideDownFade {
    0% { top: -100px; opacity: 0; }
    100% { top: 25px; opacity: 1; }
}

/* 2. FIX: Elementor ke inner backgrounds ko 100% transparent karna */
/* Yahan galti se background color lag gaya tha jis se double dabba ban raha tha */
body.is-scrolled .main-header .e-con-inner, body.is-scrolled .main-header .header_wrap, body.is-scrolled .main-header .e-con {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
    padding-top: 3px;
    padding-bottom: 3px;
}

body.is-scrolled .main-header .hfe-site-logo-img {
	max-width: 200px;
}
@media only screen and (max-width: 767px){
	body.is-scrolled .main-header .hfe-site-logo-img {
		max-width: 150px;
	}
	body.is-scrolled .main-header .header_wrap {
    	flex-wrap: nowrap;
	}
}

.home .main-header {
    position: absolute;
    top: 20px;
}
.home .header_wrap {
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    background: rgb(255 255 255 / 10%);
}

.main-header:not(.home .main-header) {
   background: #000;
}
.header_wrap {
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    background: rgb(0 0 0);
}
{
	backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


@media only screen and (max-width: 767px){
.menu-open {
    overflow: hidden !important;
}
#masthead .hfe-nav-menu-icon {
    padding: 6px;
}
#masthead .hfe-nav-menu nav.hfe-nav-menu__submenu-arrow {
    position: fixed;
    left: 0 !important;
    right: 0;
    top: 100px;
    background: #f2f2f2;
    height: 100vh;
    align-items: self-start;
}

}

.wecode-banner {
  position: relative;
  overflow: hidden;
  z-index: 2;
}
.grid-container {
  position: absolute;
  top: -142px;
  left: 0px;
  width: 100vw;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 80px;
  z-index: 0;
  transform: translate(-50%);
}

.grid-container div {
  border: 1px solid #f4f4f4;
  background: #fff;
  transition: all 0.3s ease;
}

.grid-container div:hover {
  background: #f3f3f3;
}
.animate-title h1{
	min-height: 210px;
}

/* home page 2 section*/
.gradient-text *,
.gradient-text {
  background: linear-gradient(90deg, #3EC4E7 0%, #F4BE50 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent !important;
  display: inline-block; 
}
.subtitle .elementor-icon-wrapper {
	display: flex;
    align-items: center;
}
.subtitle svg {
    height: auto !important;
}
.wecode-port-images img {
    height: 323px;
    object-fit: cover;
}

.wecode-port-images {
    overflow: hidden;
}

.wecode-port-images .swiper {
    overflow: visible !important;
}

.wecode-port-images .swiper-wrapper {
    padding: 0 200px; /* ye space create karega half images ke liye */
}



.call-icon .elementor-icon-wrapper {display: flex;}

/* Marquee  animation for video section */

.marquee-row{
  width: 100%;
  overflow-x: hidden;
}
.marquee-block{
  position:relative;
  display: flex;
  width: 100%;  
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  justify-content: space-between;
}
.marquee-block .elementor-icon-list-items{
 display: inline-flex;
}
.marquee-block .elementor-icon-list-items li{
width: 100%;
list-style: none;
padding-right: 30px;
font-size: 40px;
white-space: nowrap
}
.marquee1{animation-name: marquee1;}
.marquee2{animation-name: marquee2;}
@keyframes marquee1 {
  0% { left: 0; }
  100% {left: -100%;}
}
@keyframes marquee2 {
  100% { left: 0; }
  0% {left: -100%;}
}

/*  */



.sur-image img {
  width: 100%;
  animation: rotateImg 8s linear infinite;
}

@keyframes rotateImg {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* .services-built-block {position: sticky;top: 70px;}
.main-card-block {position: relative;}
.web-card-block {position: sticky;top: 70px;will-change: transform;transform-origin: center top;} */


/* overlap fix */
/* .web-card-block:not(:first-child) {margin-top: 30px;}
 */


html {
    scroll-behavior: auto !important;
}

.main-card-block {
    position: relative;
    padding-top: 50px;
}

.web-card-block {
    background: #ffffff !important;
    border-radius: 25px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    margin-bottom: 20px; /* Cards ke beech gap */
    transform-origin: center top;
    border: 1px solid rgba(0,0,0,0.05);
}

/* Left side heading ko normal sticky rakhein */
.services-built-block {
    position: sticky;
    top: 10%;
    align-self: flex-start;
}




/* 1. Pinning ke waqt background ya container jump na kare */
.services-area {
    will-change: transform;
    transition: none !important; /* Kisi bhi tarah ki CSS transition ko disable karein */
}

.pin-spacer {background-color: transparent !important;}
.main-card-block {overflow: hidden;}

.testimonial-client-info > div:after {
    position: absolute;
    content: '';
    height: 88%;
    left: 62%;
    width: 1px;
    background: #D9D9D9;
    top: 50%;
    transform: translateY(-50%);
}
.testimonial-slider-cl .slick-list {
    padding: 42px 0;
}
.testimonial-slider-cl .slick-slide {
  margin: 0 15px;
}

.testimonial-slider-cl button.testimonial-btns {
	position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    width: 48px;
    height: 48px;
    background: transparent;
    border: 1px solid #ddd;
}
.slick-next.testimonial-btns {
    z-index:2;
	right: -60px;
}
.slick-prev.testimonial-btns {
    left: -60px;
}
.slide_item_wrap {text-align: center;}
button.slick-arrow {
    padding: 0;
    width: 48px;
    height: 48px;
    border-color: #777777;
    color: #777777;
    background: #fff !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
button.slick-arrow:before {
	display:none;
}


.slick-list.draggable {
    margin: 0 -15px;
}

button.slick-arrow svg path {
    fill: #000;
}
.slide_item .item_content img {
    height: 490px;
    object-fit: cover;
}


/* Our Team Page */
@media only screen and (min-width: 1200px){
.slider_show-wrap {
    margin-left: calc((100% - 1300px) / 2);
}
}
.slick-slideshow__slide {
    width: auto;
}

.slider_show-wrap .slick-list {margin: 0 -15px;}
.slider_show-wrap .slick-slide {padding: 0 15px;}

.experience-widget {
    left: auto;
    width: auto;
    max-width: 200px;
}

.t-member figure {
    position: relative;
	    overflow: hidden;
}
.t-member figure::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}

.t-member figure:hover::before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}


.backdrop-filter{
	backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}
.feature-icon svg{
	animation: rotate 10s linear infinite;
}
@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* Mobile view */

@media only screen and (max-width: 767px){
	
	html,body {
		overflow-x: hidden;
	}
	.home .main-header {position: static;}
	.subtitle {
		width: auto !important;
		max-width: max-content;
	}
	
	.wecode-port-images .swiper-wrapper {padding: 0;}
	.testimonial-client-info > div:after {display:none;}
	.testimonial-client-info .elementor-image-box-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
	}
	.slick-dots button {
		padding: 0;
		width: 15px;
		height: 15px;
		font-size: 0;
		border-color: #ddd;
		background: transparent;
	}
	ul.slick-dots {
		padding: 0;
		list-style: none;
		text-align: center;
	}
	.slick-dots li {
		display: inline-block;
		margin: 0 5px;
	}
	.slick-active button {
    	background: linear-gradient(90deg, #3EC4E7 0%, #236D81 100%);
		border-color: transparent;
	}
	
	.footer-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
}
	#masthead .hfe-nav-menu nav.hfe-nav-menu__submenu-arrow {
		height: fit-content;
		top: 84px !important;
	}
	
	.menu-item a:after {
    display:none !important;
}
}

.elementor-2438 .elementor-element.elementor-element-81325e4 ul.slick-dots {
    bottom: -50px;
}
.slick-dots li button {
    background:transparent !important;
}

.slick-dots li button:before {
    border-radius:50%;
    font-size: 12px !important;
    color: #24b7dd !important;
}

.slick-dots li {
    margin: 0px !important;
}

.elementor-element-1d47361 .elementor-widget-image a {
    width: 100%;
}

.elementor-element-1d47361 .elementor-widget-image img {
    aspect-ratio:5/4 !important;
    height:auto !important;
}

.elementor-element-fb043bf .elementor-widget-image-box .elementor-image-box-img img {
    max-width: 100%;
    width: 100%;
    object-fit: cover;
}

.elementor-8 .elementor-element.elementor-element-795063b > div,
.elementor-element-dda65e7 > div {
    padding: 15px;
}




@media (max-width: 1366px) {

.elementor-8 .elementor-element.elementor-element-795063b > div,
.elementor-element-dda65e7 > div {
    flex-direction:column !important;
    text-align: center !important;
    gap: 5px !important;
}

.elementor-8 .elementor-element.elementor-element-795063b > div > div,
.elementor-element-dda65e7 > div > div {
    width: 100% !important;
    max-width: 100% !important;
}

}


@media (max-width: 767px) {
.elementor-element-c73b357 .slick-slide img {
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 15px;
    width:100%;
    height:100%;
}
}

.elementor-element-8cc2615 .elementor-widget-image a {
    width: 100%;
}

.elementor-element-8cc2615 .elementor-widget-image a {
    width: 100%;
    overflow: hidden;
    border-radius:20px;
}

.elementor-element-8cc2615 .elementor-widget-image img {
    transform: scale(1.01);
}

.elementor-49 .elementor-element.elementor-element-6eb63e6.e-con > div {
    width: 100%;
    overflow: hidden;
}