/*
Theme Name: Kadence Child
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: Kadence WP
Author URI: https://www.kadencewp.com/
Description: Kadence Theme is a lightweight yet full featured WordPress theme for creating beautiful fast loading and accessible websites, easier than ever. It features an easy to use drag and drop header and footer builder to build any type of header in minutes. It features a full library of gorgeous starter templates that are easy to modify with our intelligent global font and color controls. With extensive integration with the most popular 3rd party plugins, you can quickly build impressive ecommerce websites, course websites, business websites, and more.
Tags: translation-ready,two-columns,right-sidebar,left-sidebar,footer-widgets,blog,custom-logo,custom-background,custom-menu,rtl-language-support,editor-style,threaded-comments,custom-colors,featured-images,wide-blocks,full-width-template,theme-options,e-commerce
Version: 1.2.7.1722537387
Updated: 2024-08-01 18:36:27

*/

/* Brand Logos Carousel */

:root {
  --marquee-width: 80vw;
  --marquee-height: 14vh;
  /* --marquee-elements: 12; */ /* defined with JavaScript */
  --marquee-elements-displayed: 5;
  --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
  --marquee-animation-duration: calc(var(--marquee-elements) * 5s);
}

.card-item {
    min-height: 248px;
}

@media (max-width: 1024px) {
	:root {
  --marquee-elements-displayed: 3;
	}
	.e-con-full.card {
		width: 332px!important;
		height: 290px!important;
	}
	.card-item {
		min-height: 240px;
	}
}

.marquee {
  width: var(--marquee-width);
  height: var(--marquee-height);
  background-color: transparent;
  color: #eee;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}
.marquee:before, .marquee:after {
  position: absolute;
  top: 0;
  width: 10rem;
  height: 100%;
  content: "";
  z-index: 1;
}
.marquee:before {
  left: 0;
  background: linear-gradient(to right, #1a1a1a 0%, transparent 100%);
}
.marquee:after {
  right: 0;
  background: linear-gradient(to left, #1a1a1a 0%, transparent 100%);
}
.marquee-content {
  list-style: none;
  height: 100%;
  display: flex;
  animation: scrolling var(--marquee-animation-duration) linear infinite;
}
/* .marquee-content:hover {
  animation-play-state: paused;
} */
@keyframes scrolling {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements))); }
}
.marquee-content li {
  display: flex;
  justify-content: center;
  align-items: center;
  /* text-align: center; */
  flex-shrink: 0;
  width: var(--marquee-element-width);
  max-height: 100%;
  font-size: calc(var(--marquee-height)*3/4); /* 5rem; */
  white-space: nowrap;
}

.marquee-content li img {
  width: 100%;
  height: 100%;
}

@media (max-width: 600px) {
  html { font-size: 12px; }
  :root {
    --marquee-width: 100vw;
    --marquee-height: 16vh;
    --marquee-elements-displayed: 2;
  }
  .marquee:before, .marquee:after { width: 5rem; }
}

/* Services Cards Border Effect */


/* Use Animations - Lottie */

.bodymovinanim {
    width: 100%;
    height: 32px;
    max-width: 32px;
    margin-left: -10px;
    cursor: pointer;
}

.elementor-heading-title {
  text-decoration-thickness: 2px;
  text-underline-offset: 10px; 
}

.custom-list-container {
    counter-reset: item; /* Initialize the counter */
}

.custom-list-item {
    counter-increment: item; /* Increment the counter for each item */
    position: relative;
    padding-left: 60px;
}

.custom-list-item:before {
    content: counter(item);
    position: absolute;
    top: -10px;
    left: 0;
    width: 42px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    border-radius: 50%;
    border: 2px solid #d3d3d3;
    background-color: #fff;
    color: #222222;
}

/* Light Gray Border for All Items */
.custom-list-item.odd:before,
.custom-list-item.even:before {
    border: 2px solid #d3d3d3;
}






/* Apply styles only on the frontend, and only to the custom list */
body:not(.elementor-editor-active) ol.custom-list {
  padding-left: 0;
  list-style-type: none; /* Remove default list markers */
  counter-reset: list-counter; /* Initialize counter for custom numbering */
}

body:not(.elementor-editor-active) ol.custom-list li {
  padding-left: 50px;
  margin-top: 30px;
  position: relative;
  counter-increment: list-counter; /* Increment the counter for each list item */
}

body:not(.elementor-editor-active) ol.custom-list li::before {
  content: counter(list-counter); /* Display the current counter value */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat';
  font-size: 0.9rem;
  color: #667eea;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #667eea;
  background-color: #667eea33;
  position: absolute;
  top: 0;
  left: 0;
}

body:not(.elementor-editor-active) ol.custom-list.alternating-colors li:nth-child(odd)::before {
  border-color: #667eea;
}

body:not(.elementor-editor-active) ol.custom-list.alternating-colors li:nth-child(even)::before {
  border-color: #667eea;
}




#net-section {
  position: relative;
  width: 100%;
  height: 100%;
}

#net::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at top, #2a1a4a 0%, #1a1a1a 50%);
  background-attachment: fixed;
  opacity: 0.9;
  z-index: 1;
}

#net .vanta-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}




.arrow-container {
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateZ(0deg);
}

.arrow-container:hover {
  cursor: pointer;
}

.arrow-container:hover .arrow {
  top: 50%;
}

.arrow-container:hover .arrow:before {
  transform: translate(-50%, -50%) rotateZ(-30deg);
}

.arrow-container:hover .arrow:after {
  transform: translate(-50%, -50%) rotateZ(30deg);
}

.arrow {
  position: absolute;
  left: 50%;
  transition: all .4s ease;
}

.arrow:before,
.arrow:after {
  transition: all .4s ease;
  content: '';
  display: block;
  position: absolute;
  transform-origin: bottom right;
  background: #fff;
  width: 4px;
  height: 50px;
  border-radius: 10px;
  transform: translate(-50%, -50%) rotateZ(-45deg);
}

.arrow:after {
  transform-origin: bottom left;
  transform: translate(-50%, -50%) rotateZ(45deg);
}

.arrow:nth-child(1) {
  opacity: 0.3;
  top: 15%;
}

.arrow:nth-child(2) {
  opacity: 0.6;
  top: 35%;
}

.arrow:nth-child(3) {
  opacity: 0.9;
  top: 55%;
}



/* Ensure that parent container activates hover effect on neighboring cards */
#services:hover .card::before,
#services:hover .card::after {
  opacity: 1;
}

/* Card Base Styles */
.e-con-full.card {
  background-color: rgba(102, 126, 234, 0.1);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  width: 400px;
  height: 280px;
}

/* Card Content Styles */
.e-con-full.card > .e-con-full.card-content {
  background: radial-gradient(ellipse at top, #2a1a4a 0%, #1a1a1a 50%);
  background-attachment: fixed;
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  inset: 1px;
  padding: 2rem;
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
}

/* Pseudo-Element Styles */
.e-con-full.card::before,
.e-con-full.card::after {
  border-radius: inherit;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 500ms ease-in-out;
  width: 100%;
}

/* Gradient Effects */
.e-con-full.card::before {
  background: radial-gradient(
    800px circle at var(--mouse-x) var(--mouse-y),
    rgba(102, 126, 234, 0.06),
    transparent 40%
  );
  z-index: 3;
}

.e-con-full.card::after {
  background: radial-gradient(
    600px circle at var(--mouse-x) var(--mouse-y),
    rgba(102, 126, 234, 0.4),
    transparent 40%
  );
  z-index: 1;
}

/* Hover Effects */
.e-con-full.card:hover::before,
.e-con-full.card:hover::after {
  opacity: 1;
}

/* Animated Elementor Button Style 1 */

.css-button .elementor-button-wrapper {
  position: relative;
  display: inline-block;
}

.css-button .elementor-button {
  position: relative;
  z-index: 1;
  width: 160px!important;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.css-button .elementor-button-wrapper:before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  width: 168px;
  height: 68px;
  border-radius: 10px;
  background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100%);
  z-index: 0;
  pointer-events: none;
  display: block !important;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.css-button .elementor-button-wrapper:after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 10px;
  background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100%);
  filter: blur(20px);
  z-index: -1;
  pointer-events: none;
  opacity: 0.8;
  display: block !important;
}

/* Add the rotation effect on hover */
.css-button .elementor-button-wrapper:hover:before {
  transform: rotate(-180deg);
}

.css-button .elementor-button-wrapper:hover:after {
  filter: blur(12px);
  opacity: 1;
}

/* Add the scale effect when active */
.css-button .elementor-button-wrapper:active:before {
  transform: scale(0.7);
}

.css-button .elementor-button:active {
  transform: scale(0.97);
}

/* Animated Elementor Button Style 2 */

.sec-button .elementor-button .elementor-button-content-wrapper {
  background-color: #fff;
  padding: 20px 40px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
  z-index: 1;
}

/* 3) Keep the text above everything */
.sec-button .elementor-button-text {
  position: relative;
  z-index: 2;
  color: #222;
}

/* 4) Bubble layers on the content wrapper */
.sec-button .elementor-button-content-wrapper::before,
.sec-button .elementor-button-content-wrapper::after {
  content: "";
  position: absolute;
  width: 150%;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

/* 5) Top bubbles on hover */
.sec-button .elementor-button:hover .elementor-button-content-wrapper::before {
  top: -70%;
  background-image:
    radial-gradient(circle, #a89215 20%, transparent 20%),
    radial-gradient(circle, transparent 20%, #13a5be 20%, transparent 30%),
    radial-gradient(circle, #a3b82d 20%, transparent 20%),
    radial-gradient(circle, #590cbe 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #bd1717 15%, transparent 20%),
    radial-gradient(circle, #2a7ce8 20%, transparent 20%),
    radial-gradient(circle, #30e82a 20%, transparent 20%),
    radial-gradient(circle, #e92c75 20%, transparent 20%),
    radial-gradient(circle, #914fe7 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
  background-position: 50% 120%;
  animation: greentopBubbles 0.6s ease forwards;
}

/* 6) Bottom bubbles on hover */
.sec-button .elementor-button:hover .elementor-button-content-wrapper::after {
  bottom: -70%;
  background-image:
    radial-gradient(circle, #ff93db 20%, transparent 20%),
    radial-gradient(circle, #2ae8df 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #71ffbd 15%, transparent 20%),
    radial-gradient(circle, #2a9ce8 20%, transparent 20%),
    radial-gradient(circle, #7814fc 20%, transparent 20%),
    radial-gradient(circle, #73e4f8 20%, transparent 20%),
    radial-gradient(circle, #f8d3a9 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
  background-position: 50% 0%;
  animation: greenbottomBubbles 0.6s ease forwards;
}

/* 7) Click/tap scaling */
.sec-button .elementor-button:active .elementor-button-content-wrapper {
  transform: scale(0.96);
}

/* 8) Keyframes (same) */
@keyframes greentopBubbles {
  0%   { background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,40% 90%,55% 90%,70% 90%; }
  50%  { background-position: 0% 80%,  0% 20%, 10% 40%, 20% 0%,  30% 30%, 22% 50%,50% 50%,65% 20%,90% 30%; }
  100% { background-position: 0% 70%,  0% 10%, 10% 30%, 20% -10%,30% 20%, 22% 40%,50% 40%,65% 10%,90% 20%; background-size: 0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%; }
}

@keyframes greenbottomBubbles {
  0%   { background-position: 10% -10%,30% 10%,55% -10%,70% -10%,85% -10%,70% -10%,70% 0%; }
  50%  { background-position: 0% 80%,  20% 80%,45% 60%,60% 100%,75% 70%,95% 60%,105% 0%; }
  100% { background-position: 0% 90%,  20% 90%,45% 70%,60% 110%,75% 80%,95% 70%,110% 10%; background-size: 0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%; }
}