/* Preloader Background */
body {
    overflow: hidden; 
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--header);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.5s ease;
}
        
#preloader .loader-container {
    position: relative;
    width: 140px;
    height: 140px;
    perspective: 800px;
    transform-style: preserve-3d;
}
        
#preloader .cube {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: cubeRotate 4s infinite ease-in-out;
}
        
#preloader .cube-face {
    position: absolute;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    backface-visibility: visible;
    transform-style: preserve-3d;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}
        
#preloader .front { transform: translateZ(40px); background: linear-gradient(45deg, #3b82f6, #60a5fa); }
#preloader .back { transform: rotateY(180deg) translateZ(40px); background: linear-gradient(45deg, #8b5cf6, #a78bfa); }
#preloader .right { transform: rotateY(90deg) translateZ(40px); background: linear-gradient(45deg, #ec4899, #f472b6); }
#preloader .left { transform: rotateY(-90deg) translateZ(40px); background: linear-gradient(45deg, #14b8a6, #2dd4bf); }
#preloader .top { transform: rotateX(90deg) translateZ(40px); background: linear-gradient(45deg, #f59e0b, #fbbf24); }
#preloader .bottom { transform: rotateX(-90deg) translateZ(40px); background: linear-gradient(45deg, #6366f1, #818cf8); }
        
#preloader .progress-bar {
    position: absolute;
    bottom: -50px;
    left: -30px;
    width: 200px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}
        
#preloader .progress {
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, #3b82f6, #8b5cf6);
    transition: width 0.2s ease;
}
        
#preloader .loading-text {
    position: absolute;
    bottom: -80px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
        
@keyframes cubeRotate {
     0% { transform: rotateX(0deg) rotateY(0deg); }
     25% { transform: rotateX(90deg) rotateY(90deg); }
    50% { transform: rotateX(180deg) rotateY(180deg); }
    75% { transform: rotateX(270deg) rotateY(270deg); }
    100% { transform: rotateX(360deg) rotateY(360deg); }
}
        
#preloader .preloader-done {
    transform: translateY(-100%);
    opacity: 0;
}

/*POPUP  */
#popup {
      display: none; /* hidden by default */
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
        inset: 0;

    }
   

#popup-content{
    width: 80%;
    margin: auto;
}
   
    #popup-content img {
      max-width: 100%;
      height: auto;
      border-radius: 10px;
    }

    /* Close icon styles */
    #close-btn {
      position: absolute;
      top: 40px;
      right: 40px;
      font-size: 24px;
      color: white;
      cursor: pointer;
      border: none;
      background: transparent;
      outline: none;
      transition: color 0.3s ease;
      padding: 0;
    }

    #close-btn:hover {
      color: #ccc;
    }
/*--------------------------*/
/* Banner Section */
/*--------------------------*/


.banner {
    padding-top: 15rem;
    padding-bottom: 5rem;
}

.carousel-item h1 {
    font-size: 3rem;
    font-weight: 700;
    animation: text3D 1s ease;
}

.carousel-item p {
    font-size: 1.1rem;
}

.carousel-item .btn {
    padding: 10px 22px;
    border-radius: 50px;
    background: #1f7aff;
    border: none;
    font-weight: 600;
    color: #fff;
}

.header-banner .carousel-control-prev,
.header-banner .carousel-control-next {
    position: absolute;
    bottom: -15% !important;
    top: auto !important;
    transform: translateY(0);
    background-color: #fff !important;
    border-radius: 50%;
    height: 50px !important;
    width: 50px !important;
    color: #000;
    font-size: 28px;
    opacity: 1;
}

.header-banner .carousel-control-prev i,
.header-banner .carousel-control-next i {
    color: #0000005c;
}

.header-banner .dot-left {
    position: absolute;
    left: 20%;
}

nav {
    position: absolute;
    /*top: 0;*/
    width: 100%;
    z-index: 10;
    background: transparent !important;
    transition: background-color 0.3s ease;
}


.banner .carousel-item {
    position: relative;
    transition: opacity 0.6s ease-in-out;
    transform: translateX(0) !important;
}

.header-banner .carousel-control-prev:hover,
.header-banner .carousel-control-next:hover,
.header-banner .carousel-control-prev:active,
.header-banner .carousel-control-next:active {
    color: #000;
}

.header-banner .carousel-control-prev {
    left: 0 !important;
}

.header-banner .carousel-control-next {
    left: 60px !important;
}

.header-banner {
    background: #1a1b1d url("../images/Home/header-bg.webp") no-repeat center center / cover;
    position: relative;
    z-index: 1;
}

.banner .dot-shape {
    top: -15%;
    right: 6%;
}

.banner .line {
    right: 32%;
}

.box-image-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.box-image-wrapper .main-image {
    width: 470px;
    height: 580px;
    overflow: hidden;
    border-radius: 15px 150px 15px 15px;

}

.main-img {
    transition: all 0.6s ease-in-out;
    overflow: hidden;
    transform: scale(1.5);
    width: 470px;
    height: 580px;
    object-fit: cover;
}

.small-img.animate {
    transform: scale(1);
}

.main-img.animate {
    transform: scale(1);
}

.box-image-wrapper .small-img {
    max-width: 220px;
    height: auto;
    overflow: hidden;
    position: absolute;
}

.box-image-wrapper .small-img video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.box-image-wrapper .small-img.top {
    top: 20%;
    right: 0;
}

.small-img-text {
    color: #fff;
    font-size: 30px;
    bottom: 15%;
    position: absolute;
    right: 7%;
    font-weight: 700;
}

.banner .heading span {
    color: #2563eb;
}

.client-avatars img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-right: -10px;
}

.btn-custom {
    background: #2563eb;
    color: #fff;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 500;
    transition: 0.3s;
}
/* Animation */
.dot-left,
.dot-shape,
.line {
    opacity: 0;
    transition: all 0.8s ease-out;
    position: absolute;
}

.dot-left {
    transform: translateX(100px);
}

.dot-shape {
    transform: translateX(120px);
}

.line {
    transform: translateY(300px);
}

.dot-left.animate {
    transform: translateX(0);
    opacity: 1;
}

.dot-shape.animate {
    transform: translateX(0);
    opacity: 1;
}

.line.animate {
    transform: translateY(0);
    opacity: 1;
}

.split-line1,
.split-line2,
.split-line3,
.split-line4,
.split-line5,
.split-line6,
.split-line7,
.split-line8,
.split-line9,
.split-line10,
.split-line11,
.split-line12,
.split-line13,
.split-line14,
.split-line15,
.split-line16,
.split-line17,
.split-line18,
.split-line19{
    display: block;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transform: scaleY(0) translateY(100px);
    transform: scaleY(0) translateY(100px);
    opacity: 0;
    -webkit-transition: 1.5s cubic-bezier(0.5, -0.75, 0.3, 1.5), opacity 1.5s;
    transition: 1.5s cubic-bezier(0.5, -0.75, 0.3, 1.5), opacity 1.5s;
}

.split-line1.animate,
.split-line2.animate,
.split-line3.animate,
.split-line4.animate,
.split-line5.animate,
.split-line6.animate,
.split-line7.animate,
.split-line8.animate,
.split-line9.animate,
.split-line10.animate,
.split-line11.animate,
.split-line12.animate,
.split-line13.animate,
.split-line14.animate,
.split-line15.animate,
.split-line16.animate,
.split-line17.animate,
.split-line18.animate,
.split-line19.animate{
    -webkit-transform: scaleY(1) translateY(0);
    transform: scaleY(1) translateY(0);
    opacity: 1;
}

/*--------------------------*/
/*About Section*/
/*--------------------------*/

.about {
    background: url(../images/Home/intro-bg-pattern-.png);
    padding: 40px 0;
}

.about-contain {
    padding: 40px 0;
}

.about-container {
    display: flex;
}

#aboutText {
    font-size: 5rem;
    font-weight: 900;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.349);
    text-stroke: 1px var(--light) !important;
    letter-spacing: 10px;
    transition: transform 0.2s linear;
    position: relative;
    z-index: 0;
    margin-bottom: 15px;
}

.about-heading h3 strong {
    font-size: 35px;
    color: var(--primary);
    font-weight: 700;
    font-family: 'Montserrat Alternates', sans-serif;
    line-height: 1.2;
}

.about-left {
    position: relative;
}

.about .main-image {
    border-radius: 20px;
    width: 100%;
    height: auto;
    padding-left: 2rem;
    position: relative;
    z-index: -2;
}

.experience-badge {
    position: absolute;
    top: 90px;
    z-index: -1;
    left: -7px;
    background: var(--header);
    color: #fff;
    padding: 15px 20px;
    border-radius: 15px;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    animation-name: animate1;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

.award {
    display: flex;
    align-items: center;
    gap: 10px;
}

.award i {
    color: var(--light);
    font-size: 24px;
}

.award-icon {
    display: flex;
    height: 40px;
    width: 40px;
    background: var(--button);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}

.check-list {
    font-weight: 600;
}

.check-list i {
    color: var(--primary);
    margin-right: 10px;
}

.seo-rotate {
    width: 200px;
    height: 200px;
    animation: spin 15s linear infinite;
}

.learn-rotate {
    width: 150px;
    height: 150px;
    animation: spin 15s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes animate1 {
    0% {
        transform: translateY(40px);
    }

    100% {
        transform: translateY(0px);
    }
}

/*--------------------------*/
/*Result Section*/
/*--------------------------*/

.result-section {
    /*margin: 3rem 0;*/
    background: url(../images/Home/Software-development_bg_image.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 4rem 0;
}
.progress-bar {
  width: 0%;
  white-space: nowrap;
}

.result-box {
    gap: 24px;
    position: relative;
    margin-bottom: 28px;
    padding: 15px 32px 15px;
    border: 1px solid transparent;
    background: linear-gradient(329.35deg, #57E8DF 0%, #6872FE 100%);
    margin-bottom: 20px;
    border-radius: 10px;
    z-index: 0;
}

.result-box::before {
    left: -2px;
    top: 4px;
    border-radius: 10px;
    width: 99.2%;
    z-index: -1;
    height: 100%;
    content: "";
    position: absolute;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(329.35deg, #57E8DF 0%, #6872FE 100%) border-box;
}

.result-box h4 {
    color: var(--primary);
}

.result-icon img {
    height: auto;
    width: 90px;
}

.bg-image-section {
    background-image: url(../images/Home/bg-result.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}

.overlay-text {
    padding: 20px;
    padding-left: 100px;
}

.result-box {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.result-icon {
    transition: transform 0.6s ease;
}

.result-img {
    width: 48%;
}

.result-img1 {
    width: 48%;
    border-radius: 10px;
}

.result-section .section-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
}

.result-section .subtitle {
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #9cc4ff;
    font-weight: 600;
}

.result-section .info-tags {
    display: flex;
    gap: 30px;
    margin-top: 40px;
    font-weight: 500;
    color: #000000;
}

.result-section .progress-container {
    margin-top: 3rem;
}

.result-section .progress-label {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 5px;
}

.result-section .progress {
    height: 70px;
    background-color: transparent;
    margin-top: -10px;
}

.result-section .progress-bar {
    border-radius: 30px;
    width: 0;
    font-weight: 600;
    align-items: center;
    font-size: 0.85rem;
    flex-direction: row;
    text-align: right;
    padding: 0 25px;
    display: flex;
    justify-content: space-between;
    border-radius: 0 60px 60px 0;
}

.result-section .progress-bar p {
    font-size: 20px;
    font-width: 700px
}

.result-section .bar1 {
    background: #244cc9;
}

.result-section .bar2 {
    background: #8fc351;
}

.result-section .bar3 {
    background: #265c32;
}

.result-section .bar4 {
    background: #272441;
}

/*--------------------------*/
/*Testimonial Section*/
/*--------------------------*/
.testimonial-section{
    padding: 50px 0;    
}

.rating-box{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:25px;
}

.rating-box h3{
  font-weight:700;
  font-size:28px;
  margin:0;
}

.rating-stars i{
  color:#fbbc04;
}

.testimonial-title{
  font-size:42px;
  font-weight:700;
  line-height:1.3;
}

.carousel-control-custom{
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid #ddd;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:0.3s;
}

.carousel-control-custom:hover{
  background:#000;
  color:#fff;
}

/* RIGHT SIDE */
.testimonial-card {
    background: #eef6ff;
    padding: 50px;
    height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.testimonial-logo{
  font-size:22px;
  font-weight:700;
  margin-bottom:20px;
}

.testimonial-text{
  font-size:18px;
  line-height:1.7;
  color:#444;
  margin-bottom:30px;
}

.testimonial-user{
  display:flex;
  align-items:center;
  gap:15px;
}

.testimonial-user img{
  width:55px;
  height:55px;
  border-radius:50%;
  object-fit:cover;
}

.testimonial-user h6{
  margin:0;
  font-weight:600;
}

.testimonial-user span{
  font-size:14px;
  color:#777;
}

@media(max-width:991px){
  .testimonial-title{
    font-size:32px;
  }
}

/*--------------------------*/
/*service Section*/
/*--------------------------*/

.services-section {
    position: relative;
    background: #fff;
    overflow: hidden;
    padding: 100px 0;
}

.services-left {
    position: relative;
    height: 80vh;
    perspective: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-card {
    position: absolute;
    border-radius: 20px;
    display: flex;
    padding: 20px;
    width: 100%;
    max-width: 420px;
    align-items: center;
    background-color: #fff;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    transform-origin: center center;
    transition: all 0.4s ease;
}

.service-card:nth-child(1) {
    border: 20px solid #00C6FF;
    z-index: 6;
}

.service-card:nth-child(2) {
    border: 20px solid #FF7E5F;
    transform: rotate(-11deg);
    z-index: 5;
}

.service-card:nth-child(3) {
    border: 20px solid #43E97B;
    transform: rotate(11deg);
    z-index: 4;
}

.service-card:nth-child(4) {
    border: 20px solid #0052D4;
    transform: rotate(-22deg);
    z-index: 3;
}

.service-card:nth-child(5) {
    border: 20px solid #F7971E;
    transform: rotate(22deg);
    z-index: 2;
}

.service-card:nth-child(6) {
    border: 20px solid #8E2DE2;
    transform: rotate(0deg);
    z-index: 1;
}

.service-card-content h2 {
    font-size: 28px;
    font-weight: 700;
}

.card-item-image img {
    border-radius: 20px;
}

.service-card-content p {
    font-size: 16px;
    margin-bottom: 15px;
}

.service-card a {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    font-size: 18px;
}

.services-right {
    position: relative;
    height: 80vh;
    display: flex;
    align-items: center;
}

.services-right-inner {
    position: sticky;
    top: 150px;
}

.services-right h1 {
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 40px;
}

.services-right ul {
    list-style: none;
    padding: 0;
    font-size: 1.2rem;
}

.services-right li {
    margin: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 5px;
    transition: 0.3s;
    font-size: 26px;
}

.services-right ul li small {
    font-size: 16px;
    margin-right: 10px;
}

.services-right li.active {
    color: var(--primary);
    font-size: 30px;
    font-weight: 700;
    padding-left: 10px;
    border-left: 4px solid var(--primary);
    transform: translateX(10px);
}

/*--------------------------*/
/*Why Choose Us Section*/
/*--------------------------*/

.choose-section {
    padding: 100px 0;
    position: relative;
    background: url(../images/Home/project-bg.jpg) no-repeat center / cover fixed;
}

.left-choose-section {
    position: sticky;
    top: 80px;
}

.choose-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#011230, #09426aeb);
    z-index: 0;
}

.choose-section .container {
    position: relative;
    z-index: 0;
}

.choose-section .sticky-col {
    position: sticky !important;
    top: 100px;
    height: fit-content;
}

.choose-section .choose-title {
    font-size: 48px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--light);
}

.choose-section .choose-title span {
    color: var(--primary);
    font-weight: 700;
}

.choose-section .choose-btn {
    background: transparent;
    border: 1px solid var(--light);
    color: #fff;
    padding: 14px 28px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    margin-top: 30px;
    transition: 0.3s;
    height: 50px;
    text-decoration: none;
}

.choose-section .choose-btn:hover {
    background: var(--primary);
    color: var(--light);
    border: 1px solid var(--primary);
}

.choose-section .choose-box {
    position: relative;
    padding-left: 60px;
}

.choose-section .choose-box::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 0;
    bottom: -30px;
    width: 2px;
    background: rgba(0, 89, 255, 0.4);
}

.choose-section .choose-circle {
    position: absolute;
    left: 10px;
    top: 5px;
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: 0.4s ease;
    z-index: 2;
}

.choose-section .choose-circle::after {
    content: "";
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    transition: 0.4s ease;
}

.choose-section .choose-icon figure {
    height: 70px;
    width: 70px;
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
    transition: .5s;
}

.choose-section .choose-box:hover figure {
    background: #fff;
    transform: rotate(360deg);
}

.choose-section .choose-box:hover figure img {
    filter: invert(1);
}

.choose-section .choose-box h5 {
    font-size: 25px;
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--primary);
}

.choose-section .choose-box p {
    font-size: 15px;
    color: var(--light);
    max-width: 450px;
    margin-bottom: 20px;
}

.choose-section .right-col::before {
    content: "";
    position: absolute;
    top: 30%;
    left: 40%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(166, 255, 0, 0.18) 0%, transparent 70%);
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
}

/*--------------------------*/
/* Expertise Section */
/*--------------------------*/

.expertise-section {
    padding: 80px 20px;
    background: url(../images/Home/professional-background-png-3.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.expertise-section h2 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #222;
}

.expertise-section h2 span {
    color: #32d296;
}

.expertise-section p {
    color: #555;
}

.btn-custom {
    background: #32d296;
    color: #fff;
    font-weight: 600;
    padding: 12px 25px;
    border-radius: 30px;
    text-decoration: none;
    display: inline-block;
}

.coach-card {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(#01123000, #1071b6a6);
    border-radius: 50px;
    padding-right: 22px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    font-size: 15px;
    font-weight: 500;
    transition: transform 0.3s ease-in-out;
    margin: 10px;
    color: #000000;
}

.coach-card:hover {
    transform: translateY(-5px);
}

.coach-card img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
}

.cards-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.cards-row {
    display: flex;
    flex-wrap: nowrap;
}

.cards-row.center {
    justify-content: center;
}

.cards-row.right {
    justify-content: flex-end;
}

/*--------------------------*/
    /*Skill Section*/
/*--------------------------*/

.skills {
    padding: 50px 0;
    background: url(../images/Home/skill-bg.webp);
    background-repeat: no-repeat;
}

.about-skills h6 {
    font-size: 18px;
}

.about-skills h4 {
    font-size: 30px;
    margin: 20px 0;
}

.skills .skill-box {
    position: relative;
    background: #fff;
    height: 300px;
    display: flex;
    border-radius: 90px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.skills .skill-box .about-skills {
    position: relative;
    z-index: 0;
    text-align: center;
}

.about-skills img {
    height: 80px;
    width: 80px;
    object-fit: cover;
}

.skills .skill-box:hover::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 90px;
    padding: 10px;
    background: linear-gradient(90deg, #6a11cb, #2575fc, #ff416c, #ff4b2b, #43cea2, #6a11cb);
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: borderColor 1s linear infinite;
    z-index: 0;
}

@keyframes borderColor {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.skills .skill-box:hover {
    box-shadow: 0 0 20px rgba(0, 0, 255, 0.123), 0 0 40px #2574fc5e, 0 0 60px rgb(128, 128, 128);
}

.marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}

.marquee__content li {
    display: inline-flex;
    align-items: center;
    margin-right: 60px;
    list-style: none;
}

.marquee__content h2 {
    font-size: 65px;
    font-weight: bold;
    color: transparent !important;
    margin: 0;
    -webkit-text-stroke: 1px #000;
    letter-spacing: 2px;
    transition: color 0.3s ease;
}

.marquee:hover h2 {
    color: var(--primary);
    transition: color 0.3s ease;
}

.marquee__content {
    display: inline-block;
    animation: scroll-left 120s linear infinite;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-1000%);
    }
}

.marquee__content img {
    width: 100px;
    height: 100px;
    margin-right: 45px;
}

/*--------------------------*/
/*SEO Section*/
/*--------------------------*/

.seo {
    padding: 3rem 0;
}

.image-stack {
    position: relative;
    width: 100%;
}

.image-stack video {
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/*Workflow Section*/

.workflow .carousel-item video{
    max-width: 100%;
    height: auto;
}

.workflow .carousel-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #8b8787;
}

.workflow .carousel-indicators .active {
  background-color: var(--primary);
}

section.workflow {
    background: #f5f7f9;
}

/* Responsive  */
@media only screen and (max-width: 1199px) {
    .box-image-wrapper .main-image {
        width: 650px;
    }
    .banner {
        gap: 7rem;
        padding-top: 12rem;
    }
    .header-banner .dot-left {
        position: absolute;
        left: 60%;
        top: 20%;
    }
    .carousel-item h1 {
        font-size: 4rem;
    }
    .banner .line {
        right: 40%;
    }
    .box-image-wrapper .small-img.top {
        right: 5%;
    }
    .box-image-wrapper .small-img {
        max-width: 380px;
    }
    .small-img-text {
        bottom: 0%;
        right: 20%;
    }
}

@media only screen and (max-width: 1024px) {
    .img-wrapper {
        bottom: 55px;
    }
    .img-inner img {
        height: 350px;
        width: 250px;
    }
    .working-process #aboutText {
        font-size: 3rem;
    }
    .carousel-item h1 {
        font-size: 3.5rem;
    }
    .box-image-wrapper .main-image {
        width: 500px;
    }
    .banner .line {
        right: 46%;
    }
    .box-image-wrapper .small-img {
        max-width: 330px;
    }
    .small-img-text {
        right: 22%;
    }
    #aboutText {
        font-size: 3rem;
    }
    .result-section {
        margin: 1rem 0;
    }
    .service-card {
        max-width: 320px;
    }
    .heading {
        font-size: 28px;
    }
    .heading strong {
        font-size: 28px;
    }
    .text-muted {
        height: 270px;
    }
}
@media only screen and (max-width: 991px) {
    .about-inner-section {
        padding-top: 0px;
    }
    .services-right {
        display: none;
    }
    .services-section {
        padding: 0;

    }
    .service-card {
        max-width: 420px;
    }
    .working-process-area {
        flex-direction: column;
    }
    .process-item:not(:last-child)::after {
        display: none;
    }
    .text-muted {
        height: 170px;
    }
}

@media (max-width: 991px) and (min-width: 668px) {
    section {
        padding: 40px 0;
    }
    .services-left {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
        height: auto;
    }
    .service-card {
        position: relative !important;
        transform: none !important;
        opacity: 1 !important;
        width: calc(50% - 20px);
        margin-bottom: 20px;
        border-width: 10px;
        font-size: 1rem;
    }
    .services-right-inner {
        position: static;
        margin-top: 40px;
        text-align: center;
    }
    .services-right h1 {
        font-size: 32px;
    }
    .services-right ul li {
        font-size: 20px;
        text-align: center;
        border: none;
    }
    .services-right li.active {
        border-left: none;
        transform: none;
        color: #1100ff;
    }
    .text-muted {
        height: 230px;
    }
}

/* Below 768px → 1 card per row */
@media (max-width: 767px) {
    .banner-img {
        display: none;
    }
    .working-process #aboutText {
        font-size: 2rem;
    }
    .exp-para {
        padding: 0px;
    }
    .exp-area::before {
        display: none;
    }
    #aboutText {
        font-size: 3rem;
    }
    .experience-badge{
        display: none;
    }
    .about .main-image{
        padding-left: 0;
    }
    
    .carousel-item h1 {
        font-size: 3rem;
    }
    .box-image-wrapper .main-image {
        width: 420px;
        height: auto;
    }
    .box-image-wrapper .small-img {
        max-width: 250px;
    }
    .small-img-text {
        right: 16%;
    }
    .banner .line {
        right: 41%;
    }
    .text-muted {
        height: 120px;
    }
    
    .testimonial-card{
        height: auto;
    }
    
    .choose-section{
        overflow: hidden;
        padding: 50px 0;
    }
    
    .testimonial-card{
        padding: 28px;
    }
    
    .about{
        padding-bottom: 0;
    }
}

@media (max-width: 667px) {
    .services-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        height: auto;
    }
    .service-card {
        position: relative !important;
        transform: none !important;
        opacity: 1 !important;
        width: 100%;
        max-width: 100%;
        border-width: 10px;
        font-size: 1rem;
    }
    .services-right-inner {
        position: static;
        top: auto;
        margin-top: 40px;
        text-align: center;
    }
    .services-right h1 {
        font-size: 28px;
    }
    .services-right ul li {
        font-size: 18px;
        text-align: center;
        border: none;
    }
    .services-right li.active {
        border-left: none;
        transform: none;
        color: #1100ff;
    }
    .testimonial .carousel-control-prev,
    .testimonial .carousel-control-next {
        display: none;
    }
    .header-banner{
        height: 120vh;
    }
    
    .about-contain{
        padding: 0;
    }
}

@media (max-width: 568px) {
    .carousel-item h1 {
        font-size: 2rem;
    }
    .client-avatars img {
        width: 35px;
        height: 35px;
    }
    .banner-text {
        padding-bottom: 3rem;
    }
    .header-banner .dot-left {
        left: 35%;
        top: 75%;
    }
    .banner .carousel-item {
        margin-bottom: 2rem;
    }
    .reseller .icon-circle i {
        font-size: 20px;
    }
    #sub-text-stock {
        font-size: 34px;
    }
    .header-banner{
        height: 100vh;
    }
    .header-banner .carousel-control-prev, .header-banner .carousel-control-next {
        bottom: -10% !important;
    }
    .text-muted {
        height: 150px;
    }
}

@media (max-width: 479px) {
    .partner-section {
        padding: 0;
    }
   .result-box {
        flex-direction: column;
    }
    .cards-wrapper {
        display: block;
    }
    .cards-row {
        display: block;
    }
    .coach-card {
        width: 100%;
        font-size: 20px;
        margin: 10px 0;
    }
    .marquee__content h2 {
        font-size: 35px;
    }
    .marquee__content img {
        width: 60px;
        height: 60px;
    }
    .choose-section .choose-title{
        font-size: 30px;
    }
    .expertise-section{
        padding: 40px 0;
    }
    .expertise-section h2{
        font-size: 30px;
    }
   
    .text-muted {
        height: 165px;
    }
}

@media (max-width: 414px) {
    
    .learn-rotate {
    width: 100px;
    height: 100px;
}
}

@media (max-width: 375px) {
    .text-muted {
        height: 250px;
    }
}

@media (max-width: 360px) {
    .carousel-item h1 {
        font-size: 25px;
    }
}

@media (max-width: 325px) {
    .carousel-item h1 {
        font-size: 1.8rem;
    }
    /*.banner {*/
    /*    padding-top: 6rem;*/
    /*}*/
    .home-client{
        display: none !important;
    }
}

@media (max-width: 320px) {
    .hero .title {
        font-size: 35px;
    }
    .hero-img-wrapper::after {
        right: 0;
    }
    .image-stack .seo-img {
        width: 300px;
    }
   .result-div {
        padding: 20px 20px 20px;
        margin-top: 2rem;
        margin-left: 0;
    }
    .header-content {
        padding: 5px;
    }
    .hero .sec-element1 {
        top: -500px;
    }
    
    .circle-wrapper {
        top: 3rem;
    }
    .say2-img img {
        margin-top: 120px;
    }
    .say1-img {
        padding-top: 4rem;
    }
    .heading {
        font-size: 25px;
        margin-top: 1rem;
    }
    .heading strong {
        font-size: 25px;
    }
    .result-img2 {
        display: none;
    }
    .result {
        padding: 1rem 0;
    }
    .seo {
        padding: 1rem 0;
    }
    .text-muted {
        height: 250px;
    }
}