/*
Theme Name: Hello Elementor Child
Theme URI: https://example.com/
Description: Child Theme for Hello Elementor
Author: Sehrish Anam
Author URI: https://example.com/
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* Custom CSS Below */


.services-slider .e-con-full, .services-slider{
	overflow: hidden;
}
.flip-box-button .elementor-flip-box__button{
	padding: 7px 15px 7px 15px!important;
}
.icon-migration .elementor-icon-box-icon{
    margin-top: 12px;
}

/* Make all Elementor Swiper slides the same height */
#number-slider-ctn .swiper-wrapper {
  display: flex !important;
  align-items: stretch !important;
}

.swiper-button-prev svg path,.swiper-button-next svg path {
	fill: white;
}

#number-slider-ctn .swiper-slide {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
}

.toolstack-tabs button {
	color: white !important;
	border-radius: 0 !important;
}

.toolstack-tabs .e-n-tabs-heading {
	border-bottom: 1px solid #F94C30;
}

#number-slider-ctn .swiper-slide > .elementor-element {
  flex-grow: 1 !important;
}
div.comments-area a, div.page-content a,.page-content a{ 
	text-decoration: none;
}

details .elementor-widget-text-editor {
	margin-top: 20px;
}

.e-n-accordion-item-title {
	padding: 0 !important;
}

.wpforms-container .wpforms-field, .wp-core-ui div.wpforms-container .wpforms-field {
    padding: 13px 0 !important;
}
.elementor-element div.wpforms-container-full, .elementor-element div.wpforms-container-full .wpforms-form * {
    width: 100% !important;
}

.column-box {
	border: 1px solid #f94c30;
	padding: 24px;
	border-radius: 30px;
}

.column-box p:last-child {
 		margin-bottom: 0;
}

.our-process-card {
	border-radius: 30px;
	padding: 44px 24px;
}

.chaty-svg ellipse {
	fill: #f94c30 !important;
}

.our-process-card:nth-child(2n + 2) {
	position: relative;
	top: 40px;
}

.faq-item .e-n-accordion-item {
	border: 1px solid #F94C30;
	background-color: #FFF1EF;
	border-radius: 24px;
	padding: 24px 32px; 
}

.product-service,
.product-service h2,
.product-service p,
.product-service .elementor-widget-text-editor,
.product-service img {
	transition: all .3s ease-in-out .1s;
}

.product-service {
	position: relative;
}

.product-service:hover h2,
.product-service:hover .elementor-widget-text-editor,
.product-service:hover p, 

.product-service.js-hover h2,
.product-service.js-hover .elementor-widget-text-editor,
.product-service.js-hover p{
	color: white !important;
}

.product-service:hover img {
	filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7449%) hue-rotate(142deg) brightness(116%) contrast(113%);
	transform: rotate(-45deg);
}

.product-service::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background-image: url(https://compilex.it.com/wp-content/uploads/2025/10/Rectangle-885-1-scaled.webp);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	opacity: 0;
	visibility: hidden;
	transition: all .4s ease-in-out;
}

.product-service:hover::before,
.product-service.js-hover::before  {
	opacity: 1;
	visibility: visible;
	width: 100%;
}

.our-process-card .elementor-icon-box-icon {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background-color: #fff;
	margin: 0 auto;
	display: flex;
  justify-content: center;
  align-items: center;
}

.our-process-card .elementor-icon-box-icon i{
	color: #f94c30;
	font-size: 36px;
}

.our-process-card .elementor-icon-box-icon i::before,.our-process-card .elementor-icon-box-icon svg {
	width: 36px;
	height: 36px;
}

.core-value-icon {
	width: 72px;
	height: 72px;
	margin: 0 auto;
	border-radius: 50%;
	background-color: white;
	line-height: .6;
}

.core-value-icon,
.core-value-icon .elementor-widget-container {
	display: flex;
	justify-content: center;
	align-items: center;
}

.core-value-icon img {
	max-width: 48px;
	max-height: 48px;
}

.e-n-tab-title {
  color: #1d274e !important;
	border-radius: 40x mportant;
}

button[aria-selected="true"].e-n-tab-title,.e-n-tab-title:hover {
	color: white !important;
}

.e-n-tabs-heading {
	margin-bottom: 20px;
}

#number-slider-ctn div.swiper-button-prev,#number-slider-ctn div.swiper-button-next,.swiper-button-next,.swiper-button-prev {
	width: 44px !important;
	background-color: #f94c30;
	border-radius: 50%;
	opacity: 0.5;
	margin: 0 -10px;
}

#tech-stack-slider .swiper-button-next,#tech-stack-slider .swiper-button-prev {
	background-color: transparent;
	opacity: 1;
}

.number-slider {
	padding: 24px 16px !important;
	border-radius: 24px !important;
}

.swiper-button-prev svg,.swiper-button-next svg ,.swiper-button-prev svg,.swiper-button-next svg{
	width: 12.5px;
}

.tech-stack-box {
	padding: 24px !important;
	border-radius: 24px !important;
}

.cloud-services-slider .swiper-slide,
.tech-services-slider .swiper-slide {
	padding: 40px 14px !important;
	border-radius: 24px !important;
	background-color: #111111BF !important;
}

.slider-container {
	overflow: hidden;
}

.cloud-services-slider .swiper-button-prev,.tech-services-slider .swiper-button-prev {
    top: -26%;
    bottom: 0;
    left: auto;
    right: 85px;
	  opacity: 1;
}

.cloud-services-slider .swiper-button-next,.tech-services-slider .swiper-button-next {
    top: -26%;
    bottom: 0;
    left: auto;
    right: 27px;
	  opacity: 1;
}

.banner-bold-text {
	position: relative;
	font-weight: 500 !important;
}

.header-section .elementor-container {
padding: 17px 57px;
    border: 1px solid #FF715A3B;
    border-radius: 60px;
    background: #36120D;
    background: linear-gradient(90deg, rgba(54, 18, 13, 1) 5%, rgba(0, 0, 0, 1) 100%);
}

.on-hover-text p {
	margin-bottom: 0 !important;
}

.banner-bold-text-bottom {
	padding:10px 0;
}

.footer-wp-menu .elementor-item {
	background-image: url(https://compilex.it.com/wp-content/uploads/2025/04/Symbol-7.svg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 13px;
}

/* .banner-bold-text::after {
	content: "";
	position: absolute;
	top: -32px;
	right: 0;
	width: 32px;
	height: 32px;
	background-image: url(https://compilex.it.com/wp-content/uploads/2025/10/Polygon-1.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
} */

/* .banner-bold-text-bottom::after {
    top: 10px;
    right: -50px;
    transform: rotate(40deg);
} */

.elementor-icon i, .elementor-icon svg {
    transition: all .3s 
ease;
}

.experience-card .ekit-heading--title {
	  font-size: 48px !important;
    font-weight: 600 !important;
}

.ekit-wid-con b,.ekit-wid-con li::marker {
	color: #f94c30;
}

.arrow-button .elementor-button-content-wrapper {
	display: inline-block;
	padding-right: 31px;
	background-image: url(https://compilex.it.com/wp-content/uploads/2025/10/Group.svg);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 14px;
}

.ekit-wid-con li::marker {
	font-weight: 700;
}

.ekit-wid-con ul li,
.ekit-wid-con ol li,
ul li,
ol li {
	margin-bottom: 16px;
}

ol,
ul {
	padding-left: 20px;
}

.icon-tick::before {
		background-color: #f94c30;
	border-radius: 50%;
	    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    font-size: 14px;
}

.process-column::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -25%;
	width: 38px;
	height: 10px;
	margin: auto 0;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	border: none;
} 

.process-column:first-child::before {
	display: none;
}

.black-box::before {
	background-image: url(https://compilex.it.com/wp-content/uploads/2025/10/Arrow-2.svg);
}

.orange-box::before {
	background-image: url(https://compilex.it.com/wp-content/uploads/2025/10/Arrow-3.svg);
}

#testimonials-slider .swiper-slide-active {
	padding-right: 4px;
}

#testimonials-slider .swiper-slide-active .client-img img {
	border: 3px solid #F94C30;
}

/* service-card-item */

.service-card-item *,.elementor-widget-image {
	transition: color .3s ease;
}

.service-card-item:hover .service-card-item-arrow img{
	filter: brightness(0) saturate(100%) invert(38%) sepia(88%) saturate(2777%) hue-rotate(344deg) brightness(101%) contrast(95%);
}

.service-card-item:hover .service-card-item-arrow .elementor-widget-container {
	background-color: white!important;
}

.service-card-item:hover * {
	color: white;
}

@media screen and (max-width: 1023px) {
		
	.banner-home h1 {
		max-width: 667px;
		margin: 0 auto 30px !important;
	}
	
    .banner-home h1 span {
        font-size: 50px!important;
    }
	.banner-bold-text {
    width: 254px;
		padding: 3px 0;
	}
.banner-bold-text-bottom {
        width: 300px !important;
	padding: 9px 0;
    }
	.quote-icon img {
		width: 54px;
	}
	#testimonials-slider .testimonial-text {
    height: 420px;
}
}

@media screen and (max-width: 767px) {
	.toolstack-tabs .e-n-tabs-heading,.services-tab .e-n-tabs-heading{
		display: block;
    white-space: nowrap;
    flex-wrap: nowrap;
		overflow-x: auto;
	}
	.toolstack-tabs button,
	.services-tab .e-n-tabs-heading button{
		display: inline-block !important;
	}
	.services-tab .e-n-tabs-heading button:nth-child(n+2){
		margin-left: 8px;
	}
	.toolstack-tabs button {
		margin: 0 !important;
	}
.our-process-card:nth-child(2n + 2){
	top: 0px;
}
	#flip-box-slider .swiper-button-prev, #flip-box-slider .swiper-button-next{
		top: -7%!important;
	}
	.product-service .elementor-widget-image {
		position: absolute;
		top: 20px;
		right: 20px;
	}
	    .banner-home h1 span {
        font-size: 44x !important;
    }
		.quote-icon img {
		display: none;
	}
	#testimonials-slider .testimonial-text {
        height: 305px;
    }
	.testimonial-text h2 {
		font-size: 18px !important;
	}
	.testimonial-text .elementor-widget-heading .elementor-widget-container {
		padding-bottom: 20px !important;
	}
	.testimonial-text {
		display: block !important;
	}
	div#flip-box-slider1 .swiper-button-next ,div#flip-box-slider1 .swiper-button-prev{
		top: -8%;
	}
	div#flip-box-slider1 .swiper-button-next {
		right: calc(50% - 30px)
	}
	div#flip-box-slider1 .swiper-button-prev {
		right: calc(50% + 30px)
	}
}
.sticky-button-right .elementor-button-text{
	writing-mode: vertical-rl;
	text-orientation: sideways;
}
.ekit-wid-con .elementskit-section-title span{
	font-weight: inherit!important;
}

/* About Page Spinner  */

.spin-image img{
    animation: spin 5s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Home Page */

.banner-bold-text-bottom {
 width: 400px !important;
 background: url(https://compilex.it.com/wp-content/uploads/2025/10/Rectangle-895.svg) no-repeat;
}
.banner-bold-text {
 display: inline-block;
 overflow: visible;
 white-space: nowrap;
 border-right: 0px solid #fff; /* typing cursor */
 animation: blink 0.7s steps(1) infinite;
 width: 324px;
 background: url(https://compilex.it.com/wp-content/uploads/2025/10/Group-67.svg) no-repeat;
 background-size:cover;
}

@keyframes blink {
 50% {
 border-color: transparent;
 }
}

.experience-card {
    text-align: center;
}

/* Our Team Page */

.gallery-blog-section,.circle-650 {
	transition: all .3s ease;    
}

.gallery-blog-section.active {
	background-color: #FFF1EF;
}

.gallery-blog-section.active .circle-650 {
	background-color: #fff !important;
}

/* Services Page */

.spin-image img{
    animation: spin 5s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.services-tab p{
    height: 70px
}

  :root{
    --accent:#e25542;
    --track:#e7e7e7;
    --knob:#fff;
    --text:#1b1b1b;
    --radius:999px;
  }

  /* Container */
  .skills{
    max-width: 820px;          /* desktop/tablet width */
    margin: 0 auto;
    color: var(--text);
    padding: 0 24px;           /* side padding for tablet/desktop */
  }

  .skills h2{
    font-size: clamp(20px, 2.2vw, 28px);
    margin: 0 0 18px;
  }

  /* Rows */
  .skill{ margin: 18px 0 26px; }

  .skill-head{
    display:flex;
    align-items:baseline;
    gap: 12px;
    margin-bottom: 10px;
  }

  .skill-title{ font-weight:400; line-height:1.2; font-size: 24px; }
  .skill-percent{ margin-left:auto; font-weight:700; }

  /* Bars */
  .bar{
    position: relative;
    height: 10px;
    background: var(--track);
    border-radius: var(--radius);
    overflow: visible;
  }

  .fill{
    position:absolute; left:0; top:0; bottom:0;
    width:0;
    background: var(--accent);
    border-radius: var(--radius);
    transition: width 900ms cubic-bezier(.2,.8,.2,1);
  }

  .knob{
    position:absolute; top:50%;
    translate:-50% -50%;
    left:0;
    width: 18px; height: 18px;
    background: var(--knob);
    border:2px solid #6b6b6b;
    border-radius:50%;
    box-shadow:0 2px 6px #6b6b6b22;
    transition:left 900ms cubic-bezier(.2,.8,.2,1);
  }

  .skill + .skill{ margin-top:24px; }

  /* ---------- Tablet (<=1024px) ---------- */
  @media (max-width:1024px){
    .skills{ max-width: 680px; padding: 0 20px; }
    .bar{ height: 9px; }
    .knob{ width:16px; height:16px; }
  }

  /* ---------- Mobile (<=480px) ---------- */
  @media (max-width:480px){
    .skills{ max-width: 100%; padding: 0 16px; }
    .skill-head{ flex-wrap: nowrap; gap:8px; margin-bottom:8px; justify-content: space-between; }
    .skill-title{ font-size: 15px; }
    .skill-percent{ order:2; margin-top: 2px; font-size:14px; }
    .bar{ height: 8px; }
    .knob{ width:14px; height:14px; border-width:1.5px; }
    .skill{ margin: 14px 0 22px; }
  }

  /* Accessibility: respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    .fill, .knob{ transition: none; }
  }

.flip-box-container div.swiper-button-prev, .flip-box-container div.swiper-button-next{
 opacity: 1!important;
 z-index: 1;
}