/*
Theme Name: Divi Child
Theme URI: https://diviextended.com/
Version: 1.0
Description: Child Theme of Divi
Author: Divi Extended
Template: Divi
*/
.call-to-action {
  margin-top: -74px;
}
.span-bg span {
  position: relative;
  padding: 0px 0px 0px 0px;
  background-color: transparent;
  border-radius: 5px 5px 5px 5px;
  background-position: 100%;
  background-image: linear-gradient(180deg, #ffffff12 53%, #fff 100%, #fff);
}

.split-text-container {
    display: flex;
    overflow: hidden;
}

.split-text-container h1 {
    display: inline-block;
    position: relative;
    transform: translateX(0);
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    transform: translateX(200%);
    animation-name: slide-in-right;
}

@keyframes slide-in-right {
    0% {
        transform: translateX(200%);
    }
    100% {
        transform: translateX(0);
    }
}


@keyframes slide-in-right2 {
    0% {
        transform: translateX(200%);
    }
    100% {
        transform: translateX(0);
    }
}
.split-text-container.h2-main {
  justify-content: center;
}
.split-text-container h2 {
    display: inline-block;
    position: relative;
    transform: translateX(200%); /* Initially Off-Screen */
    opacity: 0; /* Hidden Initially */
    transition: transform 1.5s ease-out, opacity 1.5s ease-out;
}

/* SCROLL TRIGGER - JavaScript Se Class Add Hogi */
.split-text-container h2.animate {
    transform: translateX(0);
    opacity: 1;
}


/* Hover Animation - Rotate Icon */
.benefits-box:hover .et_pb_image_wrap {
    transform: rotate(360deg); /* Rotate the icon 360 degrees */
    transition: transform 0.5s ease-out; /* Smooth rotation transition */
}

/* Hover Effect - Box effects */
.benefits-box:hover {
    transform: translateY(-5px); /* Lift on hover */
    box-shadow: 0 10px 30px rgba(106, 17, 203, 0.2), 0 10px 20px rgba(37, 117, 252, 0.2); /* Deep glow */
}


.quick-text-bg {
  animation: borderPulse 1000ms infinite ease-out, colorShift 10000ms infinite ease-in;
}

.quick-text-bg-hover {
  animation: colorShift 10000ms infinite ease-in;
}

.quick-text-bg:hover,
.quick-text-bg:focus {
  animation: borderPulse 1000ms infinite ease-out, colorShift 10000ms infinite ease-in, hoverShine 200ms;
}

@keyframes colorShift {
  0%, 100% {
      background: linear-gradient(45deg, #6a11cb, #2575fc);
  }
  33% {
    background: linear-gradient(45deg, #6a11cb, #2575fc);
  }
  66%{
    background: linear-gradient(45deg, #6a11cb, #2575fc);
  }
}

@keyframes borderPulse {
  0% {
    box-shadow: inset 0px 0px 0px 5px rgba(106, 17, 203,.4), 0px 0px 0px 0px rgba(255,255,255,1); /* Purple */
  }
  100% {
    box-shadow: inset 0px 0px 0px 3px rgba(37, 117, 252,.2), 0px 0px 0px 10px rgba(255,255,255,0); /* Blue */
  }
}

@keyframes hoverShine {
  0%{
    background-image: linear-gradient(135deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
  }
  50%{
    background-image: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 50%, rgba(255,255,255,0) 100%);
  }
  100%{
    background-image: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,.4) 100%);
  }
}



.benefits-box {
    position: relative;
    opacity: 0;
    transform: translateY(50px); /* Initially below */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    background: #fff;
    border-radius: 30px; /* Border radius of 30px */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Light shadow */
    padding: 20px;
    overflow: hidden;
}

/* Scroll trigger effect */
.benefits-box.show {
    opacity: 1;
    transform: translateY(0);
}

/* Border Effect: Initially Hidden with Icon Color Gradient */
.benefits-box::before {
    content: "";
    position: absolute;
    bottom: 0; /* Start from bottom */
    left: 0;
    width: 100%;
    height: 0%; /* Initially 0% height */
    background: linear-gradient(180deg, #6a11cb, #2575fc); /* Linear gradient of your icon's colors */
    transition: height 0.8s ease-out; /* Speed up transition */
    border-radius: 30px; /* Same border-radius */
    z-index: -1; /* To place behind the content */
}

/* Hover Effect - Bottom to Top Border Animation */
.benefits-box:hover::before {
    height: 100%; /* Expand to full height on hover */
    transition: height 0.8s ease-out; /* Speed up transition */
}
.benefits-box:hover p {
    color: #fff;
}
/* Hover Effect on the box */
.benefits-box:hover {
    transform: translateY(-5px); /* Lift on hover */
    box-shadow: 0 10px 30px rgba(106, 17, 203, 0.2), 0 10px 20px rgba(37, 117, 252, 0.2); /* Deep glow */
}




.banner-logo-box {
    position: relative;
    transition: transform 0.3s ease-in-out; /* Smooth Zoom Transition */
}

/* Hover Pe Sirf Zoom Effect */
.banner-logo-box:hover {
    transform: scale(1.05); /* 5% Zoom */
}


.common-button {
    position: relative;
    display: inline-block;
   
    color: #fff;
    background: linear-gradient(45deg, #6a11cb, #2575fc);

    border: none;
    border-radius: 50px;
    
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    overflow: hidden;
}

/* Hover Effect - Smooth Scale + Soft Glow */
.common-button:hover {
    transform: scale(1.07); /* Slight Zoom */
    box-shadow: 0 4px 12px rgba(106, 17, 203, 0.5), 0 0 15px rgba(37, 117, 252, 0.5); /* Softened Shadow */
    background: linear-gradient(45deg, #2575fc, #6a11cb);
}

/* Left to Right Shining Effect */
.common-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
    transition: left 0.6s ease-in-out;
}

/* Hover pe Shining Effect Move Karega */
.common-button:hover::after {
    left: 100%;
    transition: left 0.6s ease-in-out;
}

/* Ripple Wave Effect */
.common-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    transition: transform 0.5s ease-out;
}

/* On Click - Wave Expanding Effect */
.common-button:active::before {
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.3s ease-out;
}

.span-bg.span-bg2 span {
  position: relative;
  padding: 0px 0px 0px 0px;
  background-color: transparent;
  border-radius: 5px 5px 5px 5px;
  background-position: 100%;
  background-image: linear-gradient(180deg, #ffffff12 53%, #f4f4f4 100%, #f4f4f4);
}

.bg-text .et_pb_module_heading {
  position: relative;
  z-index: 999;
}
.bg-text .et_pb_module_heading::after {
  content: " Conclusion ";
  position: absolute;
  left: 4px;
  font-size: 147px;
  color: #f2f4fe;
  text-shadow: -1px -1px 0 #a6a6a629, 1px -1px 0 #a6a6a629, -1px 1px 0 #a6a6a629, 1px 1px 0 #a6a6a629;
  z-index: -099;
}
.services-main-box2 {
  justify-content: center;
}
.services-main-box2 .et_pb_column {
  width: 29.6667%;
}
.strip-image p {
  display: flex;
  align-content: center;
  justify-content: center;
  gap: 20px;
}
.strip-image p img {
  width: 100%;
  height: auto;
  object-fit: contain;
  max-width: 32%;
}
.benefits-icon .et_pb_image_wrap {
  background-color: #5e17eb;
  padding: 23px;
  border-radius: 100px;
  margin-top: -54px;
  position: relative;
  z-index: 99999;
  border: 5px solid #fff;
}

.benefits-box:hover .et_pb_image_wrap {
  border: 5px solid #fff;
}
.benefits-box {
  transition: all 0.3s ease;
}
.services-main-box {
  display: flex;
}
.strip-image p br {
  display: none;
}
.banner-logo-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 68%;
  background-color: #f4f4f4;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  z-index: -1;
  border-radius: 20px;
}
.case-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f4f4f4;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  z-index: -1;
  border-radius: 20px;
}

.companies {
  display: flex;
  flex-wrap: wrap;
}
#footer-bottom {
  display: none;
}
.companies.logo img {
  width: 300px;
  height: 200px;
  object-fit: contain;
}

/* -------------media----------------- */
@media screen and (max-width: 992px) {
.strip-image p {
  flex-wrap: wrap;
}
 .case-box::before {
    height: 100%;
  }	
.services-main-box {
  flex-wrap: wrap;
  gap: 70px;
}
}
@media screen and (max-width: 480px) {
.et_pb_button_module_wrapper.et_pb_button_alignment_center.et_pb_module .common-button {
  padding: 12px 49px !important;
  font-size: 15px !important;
  line-height: 2 !important;
}
.et_pb_button_module_wrapper.et_pb_button_alignment_left.et_pb_module .common-button {
  padding: 12px 49px !important;
  font-size: 15px !important;
  line-height: 2 !important;
}	
span {
  font-size: 20px;
  line-height: 1.2;
}
.bg-text .et_pb_module_heading::after {
  font-size: 56px;
}
.banner-logo-box::before {
   height: 100%;
  
}	
}