@keyframes gridMove {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 600px 600px;
    }
}

/* Icon square */
.icon-box {
    width: 48px;
    height: 48px;
    background: #EDEDFC;
    color: #4f46e5;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.purpose-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

/* Inner corner glow */
.purpose-card::after {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(66, 81, 200, 0.35), transparent 70%);
    pointer-events: none;
}

/* Animated gradient border */
.purpose-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    padding: 2px;
    /* ← increase thickness here */
    background: linear-gradient(270deg,
            #4251C8,
            #22d3ee,
            #10b981,
            #4251C8);
    background-size: 400% 400%;
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: borderFlow 6s linear infinite;
    animation-play-state: paused;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}


/* Hover states */
.purpose-card:hover {
    transform: translateY(-6px);
}

.purpose-card:hover::before {
    opacity: 1;
    animation-play-state: running;
}

/* Icon base */
.purpose-card .icon-box {
    font-size: 1.5rem;
    transition: transform 0.35s ease;
    transform-origin: center;
}

/* FontAwesome icon */
.purpose-card .icon-box i {
    color: #101959;
    transition: color 0.35s ease;
}

/* Hover effect */
.purpose-card:hover .icon-box {
    transform: rotate(-12deg);
}

.purpose-card:hover .icon-box i {
    color: #39A818;
}

/* Gradient movement */
@keyframes borderFlow {
    0% {
        background-position: 0% 50%;
    }

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

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

/* Replace tech lines with background image */
.tech-lines {
    background-image: url('/assets/images/corevalues/valuebg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.05;
    /* subtle overlay */
    z-index: 1;
}

/* Core wrapper */
.core-wrapper {
    position: relative;
    height: 600px;
}

/* Center circle */
.center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.outer-circle {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 3px dashed #4251C8;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: rotateCircle 12s linear infinite;
}

.inner-circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #4251C8;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Rotate outer circle */
@keyframes rotateCircle {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Core boxes positions and width */
.core-box {
    position: absolute;
    width: 400px;
    z-index: 2;
    background-color: #F5F7FF;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
    will-change: transform;
}

/* Hover interaction */
.core-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Icon subtle animation */
.core-box:hover .icon-circle {
    transform: scale(1.1);
}

.icon-circle {
    background-color: #4251C8;
    position: absolute;
    top: -15px;
    left: -15px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

/* Top-left, top-right, bottom-left, bottom-right positions */
.top-left {
    top: 50px;
    left: -140px;
}

.top-right {
    top: 50px;
    right: -140px;
}

.bottom-left {
    bottom: 50px;
    left: -140px;
}

.bottom-right {
    bottom: 50px;
    right: -140px;
}

/* Disable hover motion on touch devices */
@media (hover: none) {
    .core-box:hover {
        transform: none;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .core-wrapper {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .core-box {
        position: static;
        width: 100%;
    }

    .center-circle {
        position: static;
        transform: none;
        margin-bottom: 20px;
    }
}

/* =======================
   DESKTOP (default)
======================= */
.core-wrapper {
    position: relative;
    max-width: 900px;
    height: 600px;
    margin: auto;
}

/* =======================
   SMALL LAPTOPS (≤1200px)
======================= */
@media (max-width: 1200px) {
    .core-wrapper {
        max-width: 760px;
        height: 540px;
    }

    .core-box {
        width: 340px;
    }

    .top-left,
    .bottom-left {
        left: -100px;
    }

    .top-right,
    .bottom-right {
        right: -100px;
    }
}

/* =======================
   TABLETS / SMALL LAPTOPS (≤1024px)
======================= */
@media (max-width: 1024px) {
    .core-wrapper {
        max-width: 780px;
        height: 500px;
    }

    .core-box {
        width: 340px;
    }

    .top-left,
    .bottom-left {
        left: -70px;
    }

    .top-right,
    .bottom-right {
        right: -70px;
    }
}

/* =======================
   LARGE PHONES / SMALL TABLETS (≤768px)
======================= */
@media (max-width: 768px) {
    .core-wrapper {
        max-width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 0 12px;
    }

    .core-box {
        position: static;
        width: 100%;
    }

    .center-circle {
        position: static;
        transform: none;
        margin-bottom: 24px;
    }

    .icon-circle {
        top: -12px;
        left: -12px;
    }
}

/* =======================
   SMALL PHONES (≤576px)
======================= */
@media (max-width: 576px) {
    .outer-circle {
        width: 110px;
        height: 110px;
    }

    .inner-circle {
        width: 80px;
        height: 80px;
    }
}

/* Promise Section */
.promise-section {
    background: linear-gradient(135deg,
            rgba(66, 81, 200, 0.06),
            rgba(34, 211, 238, 0.05),
            rgba(16, 160, 185, 0.04));
}

/* Button refinement */
.promise-section .btn-primary {
    background-color: #4251C8;
    border: none;
}

.promise-section .btn-primary:hover {
    background-color: #3442b5;
}