.section-home-service {
    /* background-color: #1a60fc; */
    /* border-radius: 1.5rem; */
    padding-bottom: 6rem;
    overflow: hidden;
}

.spiral-sticky {
    position: sticky;
    top: 0;
}

.spiral-wrapper {
    justify-content: center;
    align-items: center;
    height: 600px;
    display: flex;
}

.spiral-item {
    perspective: 90rem;
    width: 20rem;
    height: 20rem;
    position: relative;
    transform: perspective(902px);
}

.spiral-block {

    position: absolute;
    inset: 0%;

}

.spiral-box {
    transform-style: preserve-3d;
    width: 20rem;
    height: 20rem;
    transform: translate3d(0, 0, 30rem);
}

.spiral-content-block {
    object-fit: cover;
    background-color: #fcca32;
    border-radius: 1rem;
    width: 100%;
    height: 90%;
    position: absolute;
    inset: 0%;
   
}

.card-content-block {
    background-color: #fff;
    border-radius: 1.25rem;
    /* flex-flow: column;
    justify-content: center;
    align-items: flex-start; */
    height: 100%;
    padding: 2.5rem rem;
}

.service-title {
    color: #10141f;
    margin-bottom: 1.5rem;
    font-family: Thunder, sans-serif;
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1;
}

.card-description {
    color: #10141f;
    font-size: 10px;
}

.spiral-block {
    transform-style: preserve-3d;
    position: absolute;
    inset: 0%;
    transform: rotateX(0)rotateY(45deg)rotateZ(0);
}

.spiral-box._01 {
    transform-style: preserve-3d;
    transform: translate3d(0, 10rem, 30rem);
}

.spiral-box {

    width: 20rem;
    height: 20rem;
}

.spiral-content-block {
    object-fit: cover;
    background-color: #fcca32;
    border-radius: 1rem;
    width: 100%;
    height: 90%;
    position: absolute;
    inset: 0%;
    animation: circular5 25s linear infinite;
}



/* call to action */

.call-to-action-sticky {
    justify-content: center;
    align-items: center;
    height: 100vh;
    display: flex;
    position: sticky;
    top: 0;
    overflow: hidden;
}

.cta-container {
    justify-content: center;
    align-items: flex-start;
    height: 300vh;
    display: flex;
    position: relative;
}

.cta-sticky {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    display: flex;
    position: sticky;
    top: 0;
    overflow: hidden;
}


@media screen and (min-width: 1920px) {


    .cta-sticky {
        height: 75vh;
    }
}

@media screen and (max-width: 479px) {

    .cta-sticky {
        height: 65vh;
    }

}

.cta-image-wrap {
    z-index: 2;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
}

.cta-image-grid {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    perspective: 2000px;
}

.cta-content-block {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.cta-content {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    position: relative;
    top: 0;
}

.cta-button-wrap {
    z-index: 10;
    position: relative;
}

.button-container {
    background-color: #eda6ff;
    border-radius: 10px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 230px;
    height: 70px;
    display: flex;
    overflow: hidden;
}

.arrow.is-secondary {
    filter: invert();
}

.bg-button {
    background-color: var(--blue);
    border-radius: 10px;
    width: 100%;
    height: 100%;
    position: absolute;
}

.text-button {
    z-index: 1;
    color: #10141f;
    margin-left: 24px;
    font-size: 16px;
    position: relative;
}

#w-node-b6392514-c957-3859-1903-a7b1b7f66af8-b7f66af1 {
    grid-area: 2 / 1 / 3 / 2;
}






/*  */




/*  */



@media screen and (max-width: 767px) {


    .spiral-wrapper {
        justify-content: center;
        align-items: flex-start;
        height: 85vh;
        margin-top: 4rem;
    }

    .spiral-item {
        width: 10rem;
        height: 10rem;
    }
    .counter-mains{

       flex-direction: column;
    }
}


.spiral-box._04 {
    transform-style: preserve-3d;
    transform: translate3d(0, 40rem, 30rem);
}

.spiral-box._01 {
    transform-style: preserve-3d;
    transform: translate3d(0, 10rem, 30rem);
}

.spiral-box._02 {
    transform-style: preserve-3d;
    transform: translate3d(0, 20rem, 30rem);
}

.spiral-box._03 {
    transform-style: preserve-3d;
    transform: translate3d(0, 30rem, 30rem);
}

.spiral-block {
    transform-style: preserve-3d;
    position: absolute;
    inset: 0%;
    transform: rotateX(0)rotateY(45deg)rotateZ(0);
}

.spiral-block.first {
    transform-style: preserve-3d;
    transform: rotateX(0)rotateY(-3deg)rotateZ(0);
}

.spiral-content-block {
    object-fit: cover;
    background-color: #fff;
    border-radius: 1rem;
    width: 100%;
    height: 90%;
    position: absolute;
    inset: 0%;
  
}


@media screen and (max-width: 479px) {
    .cta-sticky {
        height: 65vh;
    }

    .cta-image-01, .cta-image-02, .cta-image-03, .cta-image-04 {
        border-radius: 0.5rem;
        width: 25vw;
    }
}


/* counter css */

.counter-mains{

    display: flex;
    align-items: center;
}

.color-fffs{

    color: #fff;
}
/* counter csss */