body {
    font-family: 'Poppins', sans-serif;
    counter-reset: section;
}

.-ml-full {
    margin-left: -100%;
}

.font-gilda {
    font-family: "Italiana", serif;
}

.o-button {
    height: 32px;
}

.o-button span {
    transition: all 0.2s cubic-bezier(0.39, 0.58, 0.57, 1);
}

.o-button-anim:hover span:first-child, .o-figure-link:hover .o-button span:first-child {
    transform: translateY(-40px);
}

.o-button span:nth-child(2) {
    position: absolute;
    --tw-translate-y: 100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.o-button-anim:hover span:nth-child(2), .o-figure-link:hover .o-button span:nth-child(2) {
    top: 50%;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.before-hover-elem::before {
    content:'';
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    --tw-scale-y: 0;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.before-hover-elem:hover::before {
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.before-hover-elem:hover figure {
    opacity: 1;
}

.ir-section .section-pointer .icon-holder::before {
    content:'';
    position: relative;
    display: inline-block;
    height: 0.75rem;
    width: 0.75rem;
    border-radius: 0.75rem;
}

.image-container {
    height: 550px;
    overflow: hidden;
}

.image-container img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    opacity: 0;
    transform: scale(0.9); /* Initial scale transformation */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Smooth transitions for opacity and transform */
}

.iro-text-showcase .iro-text-holder {
    margin: 0 0;
    opacity: 0;
    transform: translateY(30px) translateZ(0) skewY(3deg) scaleY(1.2);
    transform-origin: top left;
    transition: transform .8s cubic-bezier(.16,.09,0,1.02) 0s, opacity .3s 0s;
}

.is-anim-ready .iro-text-showcase .iro-text-holder {
    opacity: 1;
    transform: translateY(0) skewY(0) scaleZ(1);
}

.arrow-angle svg {
    transform: rotate(-45deg);
}

.logo path {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transition-delay: 0s;
    opacity: 1;
  }
  
  .logo path:nth-child(1) {
    transition-delay: 0s;
  }
  
  .logo path:nth-child(2) {
    transition-delay: 0.05s;
  }
  
  .logo path:nth-child(3) {
    transition-delay: 0.1s;
  }
  
  /* Add transition-delay for other paths as needed */

.services--o .service-cell h2 {
    display: inline-block;
    overflow: hidden;
}

[data-splitting] .char {
    --delay: 0ms;
    --char-index: 2;
    transform: translateZ(0);
    transition: transform .35s calc(var(--char-index)* 30ms + var(--delay)) cubic-bezier(.455,.03,.515,.955);
    position: relative;
    display: inline-block;
}

.splitting .char:after, .splitting .char:before {
    content: attr(data-char);
    transition: inherit;
    color: var(--accent);
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.btn__label [data-splitting] .char:before {
    top: 102%;
    transform-origin: left bottom;
    visibility: visible;
}

@media (any-hover: hover) {
    .btn__label:hover::before {
        color: var(--accent);
        opacity: 1!important;
    }
    .btn__label:hover [data-splitting] .char {
        --delay: 0ms;
        --char-index: 2;
        transform: translate3d(0, -102%, 0);
        transition: transform .35s calc(var(--char-index)* 15ms + var(--delay)) cubic-bezier(.455,.03,.515,.955);
    }

    .before-hover-elem:hover .o-hover-item {
        --tw-translate-x: 1rem;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
}

.scroll-text {
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.1);
    background-image: linear-gradient(#fff, #fff);
    background-size: 0% 100%;
    position: relative;
    display: inline;
    background-repeat: no-repeat;
}

.scroll-text.is-inview {
    background-size: var(--progress) 100%; /* Animate the background-size to 100% on hover */
}

/* THEME SWITCHER */

.theme.checkbox {
    position: absolute;
    opacity: 0;
}
  
.checkbox-label {
    border-color: darkgray;
    border-radius: 50px;
    padding: 5px;
    position: relative;
    display: flex;
    height: 1.25rem;
    width: 2.5rem;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    border-width: 1px;
    border-style: solid;
}

.checkbox-label svg {
    width: 13px;
}
  
.fa-moon {fill: var(--accent);}
  
.fa-sun {fill:var(--accent);}
  
.checkbox-label .ball {
    background-color: darkgray;
    width: 14px;
    height: 14px;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    transition: transform 0.325s cubic-bezier(0.57, -0.35, 0, 1.24);
    position: absolute;
}
  
.checkbox:checked + .checkbox-label .ball {
    transform: translateX(18px);
}

.u-home--carousel .carousel-cell img {
    transition: transform 5s ease-out;
}

.u-home-slide-title, .u-home-slide-caption {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.3s ease-out, transform 0.25s ease-out;
}
  
.u-home--carousel .home__slide.active .u-home-slide-title {
    transform: none;
    opacity: 1;
}

.u-home--carousel .home__slide.active .u-home-slide-caption {
    transform: none;
    opacity: 0.6;
}

.u-home-slide-caption {
    transition-delay: 0.1s;
}

/* Set the first image to be visible by default */
.image-container img:first-child {
    opacity: 1;
    transform: translateX(0); /* Initial position inside the viewport */
}

.offset-image-holder {
    z-index: 0;
}

.svg-illustration--map .fill-gray-darker {
    fill: hsla(0, 0%, 100%, 0.625);
  }

.map-section .bg {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background: radial-gradient(hsl(0deg 0% 0% / 15%), hsl(0deg 0% 0% / 10%));
    z-index: 1;
}

.map-section .heading-wrap {
    padding: 1.25rem;
    border-radius: 30px;
    overflow: hidden;
}

.GradientLockup_root .line_root__ {
    width: 0.1rem;
    content: '';
    position: absolute;
    height: 100%;
}

.GradientLockup_root .vline_root__ {
    height: 0.1rem;
    content: '';
    position: absolute;
    top: 50%;
    width: 100%;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.GradientLockup_root .line_root__:nth-child(1) {
    left: 13%;
}

.GradientLockup_root .line_root__:nth-child(2) {
    left: 28.5%;
    z-index: 11;
}

.GradientLockup_root .line_root__:nth-child(3) {
    left: 42.7%;
}

.GradientLockup_root .line_root__:nth-child(4) {
    left: 57%
}

.GradientLockup_root .line_root__:nth-child(5) {
    left: 72.5%
}

.GradientLockup_root .line_root__:nth-child(6) {
    left: 86.5%
}

.GradientLockup_root .line_root__:nth-child(7) {
    left: 14.35%
}

.GradientLockup_root__sBkgs .__sBkgs {
    padding:16px;
    z-index: 1;
}

.GradientLockup_root__sBkgs li button {
    height: 100%;
}

.GradientLockup_root__sBkgs li.client-box {
    display: flex;
    align-items: center;
}

.GradientLockup_root__sBkgs li.client-box img {
    margin: auto;
}

@-webkit-keyframes highlight {
    0% {
        border-color: #999999;
        box-shadow: rgb(190 190 190 / 0%) 0px 1px 6px 0px;
    }
    50% {
        border-color: #e2e2e2;
        box-shadow: rgb(221 221 221 / 40%) 0px 1px 14px 0px;
    }
    
    100% {
        border-color: #c7c7c7;
        box-shadow: rgb(180 180 180 / 0%) 0px 1px 6px 0px;
    }
}

@keyframes highlight {
    0% {
        border-color: #999999;
        box-shadow: rgb(190 190 190 / 0%) 0px 1px 6px 0px;
    }
    50% {
        border-color: #e2e2e2;
        box-shadow: rgb(221 221 221 / 40%) 0px 1px 14px 0px;
    }
    
    100% {
        border-color: #c7c7c7;
        box-shadow: rgb(180 180 180 / 0%) 0px 1px 6px 0px;
    }
}

@media (prefers-color-scheme: dark) {
    .before-hover-elem::before {
        background-color: #27272a;
    }

    .developer {
        border-color: var(--accent);
    }
    
    .developer:hover {
        background-color: var(--accent);
    }

    @-webkit-keyframes highlight {
        0% {
            border-color: #27272a;
            box-shadow: rgba(51, 51, 50, 0) 0px 1px 6px 0px;
        }
        50% {
            border-color: #e86f21; /* Change border color */
            box-shadow: rgba(215, 115, 1, 0.4) 0px 1px 14px 0px;
        }
        100% {
            border-color: #27272a;
            box-shadow: rgba(51, 51, 50, 0) 0px 1px 6px 0px;
        }
    }

    @keyframes highlight {
        0% {
            border-color: #27272a;
            box-shadow: rgba(51, 51, 50, 0) 0px 1px 6px 0px;
        }
        50% {
            border-color: #e86f21; /* Change border color */
            box-shadow: rgba(215, 115, 1, 0.4) 0px 1px 14px 0px;
        }
        100% {
            border-color: #27272a;
            box-shadow: rgba(51, 51, 50, 0) 0px 1px 6px 0px;
        }
    }

    @-webkit-keyframes highlight-cloud {
        0% {
            border-color: #27272a;
            box-shadow: rgba(51, 51, 50, 0) 0px 1px 6px 0px;
        }
        35% {
            border-color: #01d722; /* Change border color */
            box-shadow: rgba(1, 215, 34, 0.4) 0px 1px 14px 0px;
        }
        50% {
            border-color: #27272a;
            box-shadow: rgba(51, 51, 50, 0) 0px 1px 6px 0px;
        }
    }

    @keyframes highlight-cloud {
        0% {
            border-color: #27272a;
            box-shadow: rgba(51, 51, 50, 0) 0px 1px 6px 0px;
        }
        35% {
            border-color: #01d722; /* Change border color */
            box-shadow: rgba(1, 215, 34, 0.4) 0px 1px 14px 0px;
        }
        50% {
            border-color: #27272a;
            box-shadow: rgba(51, 51, 50, 0) 0px 1px 6px 0px;
        }
    }
}

@media(min-width:1200px) {

    .home--callout-2 .offset-image-holder-bottom {
        bottom: -10rem;
        right: -40rem;
    }
    .more-button{
        display: none;
    }
    .header-menu , #request-quote-button , .Hire_Developer-btn{
        display: flex;
    }
}



@media(min-width:1024px) {

    footer .offset-image-holder {
        width: 40rem;
        transform: rotate(35deg);
        right: -35rem;
    }

}

@media(max-width:1024px){
    .e-button-holder{
        display: none;
    }
}




.tech-grids button .svg-wrap {
    border-color: #146ef5;
    border-width: 1px;
    border-style: solid;
    padding:0.65rem;
    border-radius: 10px;
    position: relative;
}

.tech-grids button .svg-wrap .svg-wrap-inner {
    border-radius: 10px;
    height: 100%;
    padding: 0.5rem;
}

.tech-grids button .svg-wrap .svg-wrap-inner.black-shade {
    background: radial-gradient(100% 100% at 50% 0, hsla(0, 0%, 100%, 0.07) 0, hsla(0, 0%, 100%, 0) 100%), linear-gradient(103.94deg, hsla(0, 0%, 100%, 0.05) 7.66%, hsla(0, 0%, 100%, 0.02) 32.57%, hsla(0, 0%, 100%, 0.008) 72.45%, hsla(0, 0%, 100%, 0.05) 96.25%);
}

.tech-grids button.react .svg-wrap .svg-wrap-inner {
    background-color: #171717;
}

.growth_button-rel {
    transition-property: opacity;
    transition-duration: 600ms;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    z-index: -1;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

.growth_button-highlight {
    z-index: -1;
    position: absolute;
    top: 0px;
    bottom: 0px;
    height: 100%;
    width: 100%;
}

[gb-app-highlight] {
    border-radius: 10px;
    border: 1.5px solid #146ef5;
    transition-property: opacity;
    transition-duration: 600ms;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-animation: pulseApp 2s infinite;
            animation: pulseApp 2s infinite;
    will-change: transform, border-radius, opacity;
    -webkit-animation-play-state: running;
            animation-play-state: running;
}

@-webkit-keyframes pulseApp {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    90% {
        transform: scale(1.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

@keyframes pulseApp {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    90% {
        transform: scale(1.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.aspect--portrait, .deferredImageContainer {
    position: relative;
    aspect-ratio:3/4;
}

.aspect--portrait img, .figure-img .imgs img {
    position: absolute;
    left: 0px;
    height: 100%;
    width: 100%;
    opacity: 0;
}

.aspect--portrait img {
    transition: opacity 0.5s ease;
}

.aspect--portrait img.hovered, .figure-img img.hovered {
    opacity: 1;
}

.growth_collab-cloud-c {
    border: 1.25px solid #01d722;
    border-radius: 10px;
    height: 210px;
    margin-left: auto;
    width: 100%; 
}

.growth_collab-cloud {
    position: absolute;
    top: 5rem;
    left: 50%;
    z-index: 20;
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    cursor: pointer;
}

.growth_collab-cloud .growth_button-inner {
    border: 0.1rem solid #01d722;
    border-radius: 7px;

}

.growth_collab-comment-w {
    z-index: 20;
    cursor: pointer;
    width: 3rem;
    height: 3rem;
    position: absolute;
    top: 8rem;
    left: -1rem;
}

.growth_collab-comment-w.growth_collab-comment-w2 {
    top: 12.5rem;
    left: 95%;
}

.growth_collab-comment-inner {
    background: #e86f21;;
    box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.3);
    transition-property: box-shadow, transform;
    transition-duration: 600MS;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-animation: scale 12s infinite linear;
            animation: scale 12s infinite linear;
}

@-webkit-keyframes scale {
    0%,
    100% {
        transform: translate(10px, -10px);
    }
    50% {
        transform: translate(0px);
    }
}

@keyframes scale {
    0%,
    100% {
        transform: translate(10px, -10px);
    }
    50% {
        transform: translate(0px);
    }
}

.growth_collab-comment-inner {
    border-radius: 50% 50% 50% 0;
    width: 100%;
    height: 100%;
    padding: .2rem;
    position: relative;
}

.growth_collab-comment-img-w {
    background-color: #007a41;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
}

.growth_collab-comment-img {
    width: 100%;
    height: 100%;
}

.growth_highlight-ripple-w {
    z-index: -1;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}

.growth_highlight-ripple.is--1, .growth_cloud_highlight-ripple.is--1 {
    flex: none;
    -webkit-animation-delay: 800ms;
            animation-delay: 800ms;
}

.growth_highlight-ripple.is--2, .growth_cloud_highlight-ripple.is--2 {
    flex: none;
    -webkit-animation-delay: 1600ms;
            animation-delay: 1600ms;
}

.growth_highlight-ripple.is--3, .growth_cloud_highlight-ripple.is--3 {
    flex: none;
    -webkit-animation-delay: 2400ms;
            animation-delay: 2400ms;
}

.growth_highlight-ripple.is--4, .growth_cloud_highlight-ripple.is--4 {
    flex: none;
    -webkit-animation-delay: 3200ms;
            animation-delay: 3200ms;
}

.growth_highlight-ripple.is--5, .growth_cloud_highlight-ripple.is--5 {
    flex: none;
    -webkit-animation-delay: 4000ms;
            animation-delay: 4000ms;
}

.growth_highlight-ripple.is--1 {
    width: 120%;
    height: 120%;
}

.growth_highlight-ripple.is--2 {
    width: 140%;
    height: 140%;
}

.growth_highlight-ripple.is--3 {
    width: 160%;
    height: 160%;
}

.growth_highlight-ripple.is--4 {
    width: 180%;
    height: 180%;
}

.growth_highlight-ripple.is--5 {
    width: 200%;
    height: 200%;
}

.growth_cloud_highlight-ripple.is--1 {
    height: 150%;
    width: 115%;
}

.growth_cloud_highlight-ripple.is--2 {
    height: 200%;
    width: 125%;
}

.growth_cloud_highlight-ripple.is--3 {
    height: 250%;
    width: 140%;
}

.growth_cloud_highlight-ripple.is--4 {
    height: 300%;
    width: 150%;
}

.growth_cloud_highlight-ripple.is--5 {
    height: 350%;
    width: 160%;
}

.growth_highlight-ripple {
    transition: box-shadow 1s, border-color 1s;
    border: 1.4px solid rgba(256, 256, 256, 0.05);
    -webkit-animation: highlight 5s infinite;
            animation: highlight 5s infinite;
}

.growth_cloud_highlight-ripple {
    transition: box-shadow 1s, border-color 1s;
    border: 1.4px solid rgba(256, 256, 256, 0.05);
    -webkit-animation: highlight-cloud 5s infinite;
            animation: highlight-cloud 5s infinite;
}

.growth_highlight-ripple, .growth_cloud_highlight-ripple {
    border-radius: 50%;
    position: absolute;
}

.growth_cloud_highlight-ripple.square {
    border-radius: 10px;
}

@-webkit-keyframes highlight-cloud {
    0% {
        border-color: #00d538;
        box-shadow: rgb(0 213 41 / 0%) 0px 1px 6px 0px;
    }
    35% {
        border-color: #00d50b;
        box-shadow: rgb(147 147 147 / 40%) 0px 1px 14px 0px;
    }
    50% {
        border-color: #00d70c;
        box-shadow: rgb(0 212 36 / 0%) 0px 1px 6px 0px;
    }
}

@keyframes highlight-cloud {
    0% {
        border-color: #00d538;
        box-shadow: rgb(0 213 41 / 0%) 0px 1px 6px 0px;
    }
    35% {
        border-color: #00d50b;
        box-shadow: rgb(147 147 147 / 40%) 0px 1px 14px 0px;
    }
    50% {
        border-color: #00d70c;
        box-shadow: rgb(0 212 36 / 0%) 0px 1px 6px 0px;
    }
}















.growth_seo-code-inner {
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #1e1e1e;
    box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.13) inset, 0px 3px 3px -3px rgba(0, 0, 0, 0.17) inset, 0px 4px 4px -4px rgba(0, 0, 0, 0.17) inset, 0px 8px 8px -8px rgba(0, 0, 0, 0.17) inset, 0px 12px 12px -12px rgba(0, 0, 0, 0.13) inset, 0px 16px 16px -16px rgba(0, 0, 0, 0.13) inset;
    padding: 1.1rem;
    position: relative;
    display: flex;
    height: 8rem;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
}

.growth_seo-button-container {
    position: absolute;
    top: 0px;
    bottom: auto;
    left: 0px;
    right: 0px;
    z-index: 20;
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.growth_seo-button-w {
    border-radius: 4px;
    border: 2.003px solid #01d722;
    background: #171717;
    box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.6), 0px 1px 6px 0px rgba(0, 215, 34, 0.2);
    min-height: 3rem;
    padding: .75rem 1rem;
    transition: box-shadow .2s, transform .2s;
    position: relative;
    display: flex;
    flex: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.growth_seo-dot-w {
    border-radius: 8px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 100%;
    overflow: hidden;
    padding: 1rem;
}

.growth_seo-dot-oh {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.growth_seo-code-dot-w {
    /* background-image: url(https://assets-global.website-files.com/6515a6d5f30daec433d0abe2/6515a6d5f30daec433d0ac81_); */
    background: url(/images/growth-code-dot.svg?ba5f6c06ab28a384f6a82d3ccbebbfec);
    background-position: 50%;
    background-size: 3.5%;
    flex-flow: wrap;
    transition: transform .6s;
    transform: scale(2);
    -webkit-animation: scaleTranslate 7s infinite;
            animation: scaleTranslate 7s infinite;
    position: relative;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 0;
    display: flex;
    height: 100%;
    width: 100%;
    align-content: flex-start;
    align-items: flex-start;
}

@-webkit-keyframes scaleTranslate {
    0% {
        transform: scale(1) translate(0, 0);
    }
    25% {
        transform: scale(2.5) translate(30px, 30px);
    }
    
    50% {
        transform: scale(2) translate(20px, 0);
    }
    75% {
        transform: scale(2.5) translate(20px, -10px);
    }
    100% {
        transform: scale(1.5) translate(0, 0);
    }
}

@keyframes scaleTranslate {
    0% {
        transform: scale(1) translate(0, 0);
    }
    25% {
        transform: scale(2.5) translate(30px, 30px);
    }
    
    50% {
        transform: scale(2) translate(20px, 0);
    }
    75% {
        transform: scale(2.5) translate(20px, -10px);
    }
    100% {
        transform: scale(1.5) translate(0, 0);
    }
}

.frameworks ul li:not(:first-child) {
    transform: translate(10px, 10px) skew(0deg, 10deg);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

.frameworks.is-inview ul li:not(:first-child) {
    transform: none;
    opacity: 1;
}

.frameworks ul li:first-child {
    transition-delay: 0.1s;
}

.frameworks ul li:nth-child(2) {
    transition-delay: 0.2s;
}

.frameworks ul li:nth-child(3) {
    transition-delay: 0.3s;
}

.frameworks ul li:nth-child(4) {
    transition-delay: 0.4s;
}

.frameworks ul li:nth-child(5) {
    transition-delay: 0.5s;
}

.frameworks ul li:nth-child(6) {
    transition-delay: 0.6s;
}

.frameworks ul li:nth-child(7) {
    transition-delay: 0.7s;
}

.frameworks ul li:nth-child(8) {
    transition-delay: 0.8s;
}

.frameworks ul li:nth-child(9) {
    transition-delay: 0.9s;
}

.frameworks ul li:nth-child(10) {
    transition-delay: 1000ms;
}

@media(max-width:767px) {
    .anim-delay-850 {
        transition-delay: 850ms;
    }
    
    .anim-delay-950 {
        transition-delay: 950ms;
    }
}

.animation {
    -webkit-animation: grow 60s linear infinite;
            animation: grow 60s linear infinite;
    translate: 65% -40%;
    width: 100%;
    opacity: 0.1;
}

.Entyleftanimation {
    -webkit-animation: Entyleft 0.1s ease-in-out forwards;
            animation: Entyleft 0.1s ease-in-out forwards;
}

.animation-popup {
    transform: translate(0%, 0%);
    /* opacity: 0.6; */
    -webkit-animation: animation-popup 1s ease-in-out forwards;
            animation: animation-popup 1s ease-in-out forwards;
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s; 
}
    
/* @keyframes animation-popup {
    from { opacity: 0.6; } 
    to { opacity: 1; } 
} */
    

@-webkit-keyframes grow {
    from { transform: rotate(180deg); } 
}
    

@keyframes grow {
    from { transform: rotate(180deg); } 
}

/* @keyframes Entyleft {
    from {translate: -60% 0%; } 
    to { translate: 0% 0%; } 
} */

.workListings__item:nth-child(even) {
    --padding-inline: clamp(1rem,4vw,4rem);
    margin: calc(var(--padding-inline)* 3) 0 0 0;
}

.workListings__item {
    aspect-ratio: 3/4;
}


 /* main{
    height: 100vh;
    overflow: hidden;
}  */