body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #ffffff;
    color: #0f172a;
}

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

    50% {
        transform: translateY(-10px);
    }

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

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes gradient-xy {

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

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

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-scroll {
    animation: scroll 20s linear infinite;
}

.animate-gradient {
    background-size: 200% 200%;
    animation: gradient-xy 6s ease infinite;
}

.mask-linear-fade {
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* .bg-indigo-500{
     background-color: #868364 !important;
}
.text-indigo-600{
     color: #868364 !important;
}
.text-indigo-300{
 color: #868364 !important;
} */
.text-gradient {
    /* background: linear-gradient(to right, #4f46e5, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    color: #7f22fe;
}

/* .floating-dots {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0;
    padding: 0;
    list-style: none
}

.floating-dots li {
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    opacity: .6;
    animation: 20s linear infinite floatUp;
    bottom: -150px
}

.floating-dots li:first-child {
    left: 10%;
    background: #7c83fd;
    animation-delay: 0s
}

.floating-dots li:nth-child(2) {
    left: 20%;
    background: #00c2a8;
    width: 6px;
    height: 6px;
    animation-delay: 2s
}

.floating-dots li:nth-child(3) {
    left: 35%;
    background: #ffb703;
    animation-delay: 4s
}

.floating-dots li:nth-child(4) {
    left: 50%;
    background: #fb7185;
    width: 8px;
    height: 8px;
    animation-delay: 0s
}

.floating-dots li:nth-child(5) {
    left: 65%;
    background: #38bdf8;
    animation-delay: 3s
}

.floating-dots li:nth-child(6) {
    left: 75%;
    background: #a3e635;
    width: 6px;
    height: 6px;
    animation-delay: 6s
}

.floating-dots li:nth-child(7) {
    left: 85%;
    background: #c084fc;
    animation-delay: 1s
}

.floating-dots li:nth-child(8) {
    left: 90%;
    background: #22d3ee;
    width: 7px;
    height: 7px;
    animation-delay: 5s
}

.floating-dots li:nth-child(9) {
    left: 45%;
    background: #fca5a5;
    animation-delay: 7s
}

.floating-dots li:nth-child(10) {
    left: 30%;
    background: #86efac;
    width: 6px;
    height: 6px;
    animation-delay: 9s
}

@keyframes floatUp {
    0% {
        transform: translateY(0);
        opacity: 0
    }

    10% {
        opacity: .7
    }

    100% {
        transform: translateY(-1200px);
        opacity: 0
    }
} */

.bgimg {
    background-image: url(../images/homepage/homebanner1.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}

.bgimg:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #00000091;
    backdrop-filter: blur(5px);
}
.bgcustomeblue{
    background: #7f22fe !important;
}


 /* ====================
           CAPABILITIES SECTION
           ==================== */
        .capabilities {
            padding-top: 6rem;
            padding-bottom: 6rem;
            max-width: 80rem;
            margin: 0 auto;
            padding-left: 1rem;
            padding-right: 1rem;
        }

        .cap-header {
            text-align: center;
            margin-bottom: 5rem;
            max-width: 48rem;
            margin-left: auto;
            margin-right: auto;
        }

        .cap-title {
            font-size: 2.25rem;
            line-height: 1.2;
            margin-bottom: 1.5rem;
        }
        @media (min-width: 768px) { .cap-title { font-size: 3rem; } }

        .cap-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
            row-gap: 4rem;
        }
        @media (min-width: 768px) { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (min-width: 1024px) { .cap-grid { grid-template-columns: repeat(3, 1fr); } }

        .cap-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            cursor: pointer;
        }

        .cap-image-wrap {
            width: 100%;
            aspect-ratio: 4/3;
            border-radius: 1.5rem;
            overflow: hidden;
            margin-bottom: 2rem;
            position: relative;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
            transition: all 0.5s;
        }
        .cap-card:hover .cap-image-wrap {
            box-shadow: 0 25px 50px -12px rgba(124, 58, 237, 0.25);
        }

        .cap-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.7s;
        }
        .cap-card:hover .cap-image { transform: scale(1.05); }

        .cap-card-title {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            transition: color 0.3s;
        }
        .cap-card:hover .cap-card-title { color: #7c3aed; }

        .cap-card-desc {
            color: #6b7280;
            line-height: 1.6;
        }

        .cap-footer {
            margin-top: 5rem;
            text-align: center;
        }

        /* ====================
           APPROACH SECTION
           ==================== */
        .approach {
            padding: 6rem 1rem;
            max-width: 80rem;
            margin: 0 auto;
        }

        .approach-header {
            text-align: center;
            margin-bottom: 4rem;
        }
        .approach-title { font-size: 2.25rem; }
        .approach-title span { color: #7c3aed; }

        .approach-grid-container { position: relative; }
       
        .approach-line {
            display: none;
            position: absolute;
            top: 2rem;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #f3f4f6;
            z-index: -1;
        }
        @media (min-width: 768px) { .approach-line { display: block; } }

        .approach-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
        }
        @media (min-width: 768px) { .approach-grid { grid-template-columns: repeat(4, 1fr); } }

        .approach-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .approach-icon-box {
            width: 4rem;
            height: 4rem;
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #4b5563;
            margin-bottom: 1.5rem;
            transition: all 0.3s;
            z-index: 10;
        }
        .approach-step:hover .approach-icon-box {
            border-color: #ddd6fe;
            color: #7c3aed;
            box-shadow: 0 4px 6px -1px rgba(124, 58, 237, 0.1);
        }

        .approach-step-title {
            font-size: 1.125rem;
            margin-bottom: 0.5rem;
        }
        .approach-step-desc {
            font-size: 0.875rem;
            color: #6b7280;
            max-width: 12rem;
        }

.scrollbarwithnone{
    scrollbar-width: none;
}