.spans {
    color: #000;
}

.bg-purple {
    background-color: #cf2128;
}

.dig-color {
    color: #fff !important;
}

.about-fixed-bg {
    position: relative;
    background-color: #000;
    overflow: hidden;
    z-index: 1;
}

.about-fixed-bg .overlay1-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/bg/change-bg1.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.about-fixed-bg .container {
    position: relative;
    z-index: 2;
}

.about-fixed-bg::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 2px;
    width: 100%;
    height: 100%;
    background-image: url('../img/bg/change-bg22.png');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
    z-index: 2;
    pointer-events: none;
}

.angled-images {
    position: relative;
    height: 500px;
}

.mockup-image {
    position: absolute;
    max-width: 100%;
    height: auto;
    transition: transform 0.3s ease-in-out;
}

.mockup-image.one {
    top: 265px;
    right: 39px;
    transform: rotate(1deg);
    z-index: 2;
    width: 500px;
}

.mockup-image.two {
    top: 135px;
    right: -25px;
    transform: rotate(2deg);
    z-index: 1;
    opacity: 0.95;
    width: 270px;
    animation: floatY 4s ease-in-out infinite;
}

@keyframes floatY {
    0% {
        transform: translateY(0) rotate(2deg);
    }

    50% {
        transform: translateY(10px) rotate(2deg);
    }

    100% {
        transform: translateY(0) rotate(2deg);
    }
}

.custom-floating-icons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.custom-float-left {
    position: absolute;
    top: 100px;
    left: -100px;
    width: 280px;
    animation: customFloatLeft 5s ease-in-out infinite;
}

.custom-float-right {
    position: absolute;
    top: 30px;
    right: -100px;
    width: 280px;
    animation: customFloatRight 5s ease-in-out infinite;
}

@keyframes customFloatLeft {

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

    50% {
        transform: translateY(12px);
    }
}

@keyframes customFloatRight {

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

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

.custom-service-image {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: auto;
}

.custom-main-img {
    position: relative;
    width: 120%;
    left: -10%;
    max-width: none;
    z-index: 2;
}

.custom-overlay-img {
    position: absolute;
    top: 50px;
    left: 0;
    width: 50%;
    z-index: 1;
    animation: floatUpDown 3s ease-in-out infinite;
}

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

    50% {
        transform: translateY(15px);
    }

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

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

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

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

.custom-percent-img {
    width: 130px;
    z-index: 3;
    position: absolute;
}

.custom-percent-75 {
    top: 80%;
    left: 6%;
    animation: floatUpDown 3s ease-in-out infinite;
}

.custom-percent-85 {
    top: 80%;
    left: 33%;
    animation: floatUpDown 4s ease-in-out infinite;
}

.custom-percent-90 {
    top: 80%;
    left: 60%;
    animation: floatUpDown 5s ease-in-out infinite;
}

.why-fixed-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/why/why-backgrounds.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0;
    pointer-events: none;
}

.image-wrappers {
    position: relative;
    max-width: 500px;
    margin: auto;
}

.gear-top-left {
    position: absolute;
    top: -15%;
    left: 13%;
    width: 175px;
    z-index: 1;
}

.icon-seo {
    position: absolute;
    top: 0%;
    left: 22%;
    width: 90px;
    z-index: 2;
}

.gear-top-right {
    position: absolute;
    top: -17%;
    right: 15%;
    width: 175px;
    z-index: 1;
}

.main-device {
    position: relative;
    width: 200px;
    z-index: 3;
    display: block;
    margin: 0 auto;
}

.icon-api {
    position: absolute;
    top: 1%;
    right: 26%;
    width: 65px;
    z-index: 2;
}

.gear-bottom-right {
    position: absolute;
    bottom: 18%;
    right: 8%;
    width: 175px;
    z-index: 1;
}

.icon-growth {
    position: absolute;
    bottom: 27%;
    right: 16%;
    width: 95px;
    z-index: 2;
}

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

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

.gear-top-left,
.gear-top-right,
.gear-bottom-right {
    animation: spin 20s linear infinite;
}

.featured-bgs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/services/features-bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0;
    pointer-events: none;
}

#featured-services .container,
#featured-services .section-title,
#featured-services .services-content,
#featured-services .services-slider {
    position: relative;
    z-index: 1;
}

.services-images {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 400px;
    margin: auto;
}

.services-images img {
    position: absolute;
    max-width: 100%;
    height: auto;
    margin-top: -50px;
}

.main-base {
    position: relative;
    width: 110px;
    height: auto;
    z-index: 1;
    display: block;
    margin-top: -30px;
    left: 40%;
    top: 75%;
}

.rocket {
    top: 21%;
    left: 39%;
    width: 130px;
    z-index: 5;
}

.graphs {
    top: 40%;
    left: 14%;
    width: 65px;
    z-index: 4;
    animation: floatSide 4s ease-in-out infinite;
}

.bulb {
    bottom: 23%;
    left: 30.8%;
    width: 75px;
    z-index: 4;
    animation: floatDiagonal 5s ease-in-out infinite;
}

@keyframes float {

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

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

@keyframes floatSide {

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

    50% {
        transform: translateY(6px);
    }
}

@keyframes floatDiagonal {

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

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

img.piller1 {
    left: 23.7%;
    width: 89px;
    top: 30.4%;
}

img.piller2 {
    left: 44.7%;
    width: 89px;
    top: 47.5%;
}

img.piller3 {
    left: 65.5%;
    width: 89px;
    top: 28%;
}

.hero-visuals {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 550px;
    margin: auto;
}

.hero-visuals img {
    position: absolute;
    height: auto;
}

.img-top {
    top: 4%;
    left: 24%;
    transform: translateX(-50%);
    width: 300px;
    z-index: 4;
    animation: float-updown 3s ease-in-out infinite;
}

.img-center {
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    z-index: 3;
}

.img-left {
    bottom: 55%;
    left: 130px;
    width: 68px;
    z-index: 1;
    animation: float-updown 5s ease-in-out infinite;
}

.gif-left {
    bottom: 55%;
    left: 56px;
    width: 68px;
    z-index: 4;
}

.gif-back {
    bottom: 72%;
    left: 16px;
    width: 100px;
    z-index: 4;
}

.gif-back-right {
    bottom: 71%;
    right: 13px;
    width: 100px;
    z-index: 4;
}

.ahead-left {
    bottom: 33%;
    left: 235px;
    width: 75px;
    z-index: 4;
}

.gif-right {
    bottom: 50%;
    right: 35px;
    width: 111px;
    z-index: 4;
}

.img-right {
    bottom: 54.5%;
    right: 125px;
    width: 68px;
    z-index: 1;
    animation: float-updown 4s ease-in-out infinite;
}

@keyframes float-updown {

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

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

.hero-background1 {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/homes/home-wave-bg.png');
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
    z-index: -1;
}

.hero-background1 .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}

.hero {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.my-element {
    display: inline-block;
    margin: 0 0.5rem;

    animation-duration: 1s;
}

.custom-icon img {
    width: 70px;
    height: auto;
    display: block;
    margin: 0;
}

.custom-icon-box img {
    width: 80px;
    height: auto;
    display: block;
    margin: 8px 0;
}

/* =========================================
   1. Extra Small Phones (≤480px)
========================================= */
/* @media (max-width: 480px) {
    .hero-visuals {
        height: 320px;
    }

    .img-top {
        width: 125px;
        top: 19%;
        left: 88px;
    }

    .img-center {
        width: 240px;
    }

    .img-left {
        width: 26px;
        bottom: 54%;
        left: 84px;
    }

    .img-right {
        width: 26px;
        bottom: 53%;
        right: 79px;
    }

    .services-images {
        height: 200px;
    }

    .main-base {
        width: 547px;
        height: auto;
        margin-top: 0;
    }

    .rocket {
        top: 35%;
        left: 46%;
        width: 50px;
    }

    .graphs {
        top: 40%;
        left: 13%;
        width: 45px;
    }

    .bulb {
        bottom: 28%;
        left: 32%;
        width: 35px;
    }

    .custom-percent-img {
        width: 80px;
    }

    .custom-percent-75 {
        top: 82%;
        left: 8%;
    }

    .custom-percent-85 {
        top: 82%;
        left: 35%;
    }

    .custom-percent-90 {
        top: 82%;
        left: 62%;
    }

    .gif-back-right {
        bottom: 65%;
        right: 15px;
        width: 60px;
        z-index: 4;
    }

    .gif-back {
        bottom: 67%;
        left: 21px;
        width: 50px;
        z-index: 4;
    }

    .ahead-left {
        bottom: 35%;
        left: 127px;
        width: 38px;
        z-index: 4;
    }

    .gif-left {
        bottom: 52%;
        left: 35px;
        width: 45px;
        z-index: 4;
    }

    .gif-right {
        bottom: 49%;
        right: 28px;
        width: 60px;
        z-index: 4;
    }

    .about-fixed-bg::after {
        content: '';
        position: absolute;
        top: 666px;
        right: 2px;
        width: 100%;
        height: 100%;
        background-image: url(../img/bg/change-bg22.png);
        background-repeat: no-repeat;
        background-position: top right;
        background-size: contain;
        z-index: 2;
        pointer-events: none;
    }

    .mockup-image.one {
        top: 100px;
        right: 40px;
        transform: rotate(1deg);
        z-index: 2;
        width: 200px;
    }

    .mockup-image.two {
        top: 52px;
        right: 15px;
        transform: rotate(2deg);
        z-index: 1;
        opacity: 0.95;
        width: 100px;
        animation: floatY 4s ease-in-out infinite;
    }

    .angled-images {
        position: relative;
        height: 162px;
    }

    .custom-float-left {
        position: absolute;
        top: 100px;
        left: -100px;
        width: 188px;
        animation: customFloatLeft 5s ease-in-out infinite;
    }

    .custom-float-right {
        position: absolute;
        top: 30px;
        right: -100px;
        width: 188px;
        animation: customFloatRight 5s ease-in-out infinite;
    }

    .custom-overlay-img {
        position: absolute;
        top: 20px;
        left: 0;
        width: 50%;
        z-index: 1;
        animation: floatUpDown 3s ease-in-out infinite;
    }

    .gear-top-left {
        position: absolute;
        top: -4%;
        left: -1%;
        width: 100px;
        z-index: 1;
    }

    .icon-seo {
        position: absolute;
        top: 4%;
        left: 6%;
        width: 60px;
        z-index: 2;
    }

    .gear-top-right {
        position: absolute;
        top: -3%;
        right: -3%;
        width: 100px;
        z-index: 1;
    }

    .icon-api {
        position: absolute;
        top: 7%;
        right: 7%;
        width: 44px;
        z-index: 2;
    }

    .gear-bottom-right {
        position: absolute;
        bottom: 26%;
        right: -4%;
        width: 100px;
        z-index: 1;
    }

    .icon-growth {
        position: absolute;
        bottom: 31%;
        right: 5%;
        width: 47px;
        z-index: 2;
    }

    img.piller1 {
        left: 24%;
        width: 45px;
        top: 34%;
    }

    img.piller2 {
        left: 45%;
        width: 45px;
        top: 53%;
    }

    img.piller3 {
        left: 66%;
        width: 45px;
        top: 32%;
    }

    .main-base {
        width: 50px;
        top: 87%;
        left: 42%;
    }
} */

/* =========================================
   2. Large Phones (481px–576px)
========================================= */
/* @media (min-width: 480px) and (max-width: 576px) {
    .hero-visuals {
        height: 340px;
    }

    .gif-back-right {
        bottom: 65%;
        right: 43px;
        width: 54px;
        z-index: 4;
    }

    .img-top {
        width: 175px;
        top: 5%;
    }

    .img-center {
        width: 260px;
    }

    .img-left {
        width: 42px;
        bottom: 46%;
    }

    .img-right {
        width: 42px;
        bottom: 46%;
    }

    .services-images {
        height: 250px;
    }

    .main-base {
        width: 500px;
        margin-top: 0;
    }

    .rocket {
        top: 10%;
        left: 42%;
        width: 65px;
    }

    .graphs {
        top: 35%;
        left: 12%;
        width: 48px;
    }

    .bulb {
        bottom: 0%;
        left: 28%;
        width: 42px;
    }

    .custom-percent-img {
        width: 82px;
    }
} */

/* =========================================
   3. Small Tablets / Phablets (577px–767px)
========================================= */
/* @media (min-width: 577px) and (max-width: 767px) {
    .hero-visuals {
        height: 380px;
    }

    .img-top {
        width: 188px;
        top: 6%;
        left: 28%;
    }

    .img-center {
        width: 300px;
        top: 50%;
    }

    .img-left {
        left: 114px;
        width: 40px;
        bottom: 58%;
    }

    .img-right {
        right: 106px;
        width: 44px;
        bottom: 60%;
    }

    .gif-back-right {
        bottom: 71%;
        right: 42px;
        width: 60px;
    }

    .gif-back {
        bottom: 72%;
        left: 45px;
        width: 60px;
    }

    .gif-right {
        bottom: 52%;
        right: 44px;
        width: 89px;
    }

    .gif-left {
        bottom: 57%;
        left: 61px;
        width: 55px;
    }

    .ahead-left {
        bottom: 40%;
        left: 176px;
        width: 45px;
    }

    .services-images {
        height: 350px;
    }

    .rocket {
        top: 15%;
        left: 42%;
        width: 70px;
    }

    .graphs {
        top: 20%;
        left: 8%;
        width: 50px;
    }

    .bulb {
        bottom: 18%;
        left: 32%;
        width: 40px;
    }

    .custom-percent-img {
        width: 80px;
    }

    .gear-top-left {
        top: -17%;
        left: 11%;
        width: 125px;
    }

    .icon-seo {
        top: -2%;
        left: 20%;
        width: 68px;
    }

    .gear-top-right {
        top: -12%;
        right: 7%;
        width: 125px;
    }

    .main-device {
        width: 150px;
    }

    .icon-api {
        top: 6%;
        right: 20%;
        width: 45px;
    }

    .gear-bottom-right {
        bottom: 18%;
        right: 5%;
        width: 125px;
    }

    .icon-growth {
        bottom: 27%;
        right: 14%;
        width: 59px;
    }

    .main-base {
        width: 80px;
        margin-top: -15px;
        top: 46%;
        left: 39%;
    }

    .services-images img {
        margin-top: 85px;
    }
} */

/* =========================================
   4. Tablets (768px–991px)
========================================= */

/* @media (min-width: 768px) and (max-width: 991px) {
    .hero-visuals {
        height: 400px;
    }

    .img-top {
        top: 6%;
        left: 28%;
        width: 188px;
    }

    .img-center {
        width: 300px;
        top: 50%;
    }

    .img-left {
        left: 114px;
        width: 40px;
        bottom: 58%;
    }

    .img-right {
        right: 106px;
        width: 44px;
        bottom: 60%;
    }

    .gif-back-right {
        bottom: 71%;
        right: 42px;
        width: 60px;
    }

    .gif-back {
        bottom: 72%;
        left: 45px;
        width: 60px;
    }

    .gif-right {
        bottom: 52%;
        right: 44px;
        width: 89px;
    }

    .gif-left {
        bottom: 57%;
        left: 61px;
        width: 55px;
    }

    .ahead-left {
        bottom: 40%;
        left: 176px;
        width: 45px;
    }

    .services-images {
        height: 400px;
    }

    .rocket {
        top: 17%;
        left: 42%;
        width: 70px;
    }

    .graphs {
        top: 20%;
        left: 8%;
        width: 50px;
    }

    .bulb {
        bottom: 21%;
        left: 32%;
        width: 40px;
    }

    .gear-top-left {
        top: 12%;
        left: 2%;
        width: 70px;
    }

    .icon-seo {
        top: 18%;
        left: 8%;
        width: 50px;
    }

    .gear-top-right {
        top: 7%;
        right: 2%;
        width: 70px;
    }

    .main-device {
        width: 180px;
    }

    .icon-api {
        top: 14%;
        right: 8%;
        width: 50px;
    }

    .gear-bottom-right {
        bottom: 12%;
        right: 6%;
        width: 70px;
    }

    .icon-growth {
        bottom: 10%;
        right: 8%;
        width: 50px;
    }
} */


/* =========================================
   1. Extra Small Phones (≤320px)
========================================= */
@media (max-width: 320px) {
    .hero-visuals { height: 156px; }
    .img-center { width: 200px; }
    .img-right {
        width: 22px;
        top: 26px;
        right: 97px;
    }
    .img-left {
        width: 22px;
        top: 27px;
        left: 95px;
    }
    .custom-percent-img {
        width: 70px;
        z-index: 3;
        position: absolute;
    }
    .custom-overlay-img {
        position: absolute;
        top: 25px;
        left: 0;
        width: 46%;
        z-index: 1;
        animation: floatUpDown 3s ease-in-out infinite;
    }
    .custom-main-img {
        position: relative;
        width: 108%;
        left: -10%;
        max-width: none;
        z-index: 2;
    }
    .custom-percent-75 {
        top: 80%;
        left: 4%;
        animation: floatUpDown 3s ease-in-out infinite;
    }
    .custom-percent-85 {
        top: 80%;
        left: 28%;
        animation: floatUpDown 4s ease-in-out infinite;
    }
    .custom-percent-90 {
        top: 80%;
        left: 51%;
        animation: floatUpDown 5s ease-in-out infinite;
    }
    .main-device {
        position: relative;
        width: 160px;
        z-index: 3;
        display: block;
        margin: 0 auto;
    }
    .gear-top-right {
        position: absolute;
        top: -6%;
        right: 5%;
        width: 100px;
        z-index: 1;
    }
    .icon-api {
        position: absolute;
        top: 7%;
        right: 16%;
        width: 40px;
        z-index: 2;
    }
    .gear-top-left {
        position: absolute;
        top: -8%;
        left: 5%;
        width: 100px;
        z-index: 1;
    }
    .icon-seo {
        position: absolute;
        top: 2%;
        left: 13%;
        width: 58px;
        z-index: 2;
    }
    .gear-bottom-right {
        position: absolute;
        bottom: 22%;
        right: 1%;
        width: 100px;
        z-index: 1;
    }
    .icon-growth {
        position: absolute;
        bottom: 29%;
        right: 9%;
        width: 50px;
        z-index: 2;
    }
    .services-images img {
        position: absolute;
        max-width: 100%;
        height: auto;
        margin-top: 0px;
    }
    .rocket {
        top: 26%;
        left: 42%;
        width: 68px;
        z-index: 5;
    }
    .bulb {
        bottom: -7%;
        left: 32.8%;
        width: 30px;
        z-index: 4;
        animation: floatDiagonal 5s ease-in-out infinite;
    }
    .graphs {
        top: 50%;
        left: 14%;
        width: 35px;
        z-index: 4;
        animation: floatSide 4s ease-in-out infinite;
    }
    img.piller1 {
        left: 23.7%;
        width: 48px;
        top: 36.4%;
    }
    img.piller2 {
        left: 44.7%;
        width: 48px;
        top: 56.5%;
    }
    img.piller3 {
        left: 65.5%;
        width: 48px;
        top: 34%;
    }
    .services-images { height: 180px; }
    .main-base { width: 45px; top: 85%; left: 42%; }
    .ahead-left {
        bottom: 28%;
        left: 130px;
        width: 30px;
        z-index: 4;
    }
    .img-top {
        width: 90px;
        top: 3%;
        left: 103px;
    }
    .gif-right {
        bottom: 47%;
        right: 43px;
        width: 60px;
        z-index: 4;
    }
    .gif-left {
        bottom: 58%;
        left: 53px;
        width: 38px;
        z-index: 4;
    }
    .gif-back-right {
        bottom: 81%;
        right: 39px;
        width: 45px;
        z-index: 4;
    }
    .gif-back {
        bottom: 83%;
        left: 40px;
        width: 45px;
        z-index: 4;
    }
    .about-fixed-bg::after {
        content: '';
        position: absolute;
        top: 660px;
        right: 2px;
        width: 100%;
        height: 100%;
        background-image: url(../img/bg/change-bg22.png);
        background-repeat: no-repeat;
        background-position: top right;
        background-size: contain;
        z-index: 2;
        pointer-events: none;
    }
    .mockup-image.one {
        top: 75px;
        right: 34px;
        transform: rotate(1deg);
        z-index: 2;
        width: 215px;
    }
    .mockup-image.two {
        top: 2px;
        right: 4px;
        transform: rotate(2deg);
        z-index: 1;
        opacity: 0.95;
        width: 125px;
        animation: floatY 4s ease-in-out infinite;
    }
    .angled-images {
        position: relative;
        height: 156px;
    }
    .custom-float-left {
        position: absolute;
        top: 100px;
        left: -100px;
        width: 200px;
        animation: customFloatLeft 5s ease-in-out infinite;
    }
    .custom-float-right {
        position: absolute;
        top: 30px;
        right: -100px;
        width: 200px;
        animation: customFloatRight 5s ease-in-out infinite;
    }
}

/* =========================================
   2. Small Phones (321px–375px)
========================================= */
@media (min-width: 321px) and (max-width: 376px) {
    .hero-visuals { height: 225px;
     }
    .img-top {
        width: 150px;
        top: -10%;
        left: 95px;
    }
    .img-center {
        top: 55%;
        left: 48%;
        transform: translate(-50%, -50%);
        width: 330px;
        z-index: 3;
    }
    .ahead-left {
        bottom: 21%;
        left: 143px;
        width: 47px;
        z-index: 4;
    }
    .gif-right {
        bottom: 48%;
        right: 10px;
        width: 100px;
        z-index: 4;
    }
    .gif-back-right {
        bottom: 84%;
        right: -3px;
        width: 91px;
        z-index: 4;
    }
    .gif-left {
        bottom: 60%;
        left: 21px;
        width: 51px;
        z-index: 4;
    }
    .gif-back {
        bottom: 88%;
        left: -9px;
        width: 78px;
        z-index: 4;
    }
    .img-left {
        bottom: 63%;
        left: 82px;
        width: 40px;
        z-index: 1;
        animation: float-updown 5s ease-in-out infinite;
    }
    .img-right { 
        bottom: 63%;
        right: 95px;
        width: 40px;
        z-index: 1;
        animation: float-updown 5s ease-in-out infinite;
    }
    .custom-float-left {
        position: absolute;
        top: 100px;
        left: -100px;
        width: 190px;
        animation: customFloatLeft 5s ease-in-out infinite;
    }
    .custom-float-right {
        position: absolute;
        top: 30px;
        right: -100px;
        width: 190px;
        animation: customFloatRight 5s ease-in-out infinite;
    }
    .mockup-image.one {
        top: 121px;
        right: 78px;
        transform: rotate(1deg);
        z-index: 2;
        width: 225px;
    }
    .mockup-image.two {
        top: 37px;
        right: 34px;
        transform: rotate(2deg);
        z-index: 1;
        opacity: 0.95;
        width: 135px;
        animation: floatY 4s ease-in-out infinite;
    }
    .angled-images {
        position: relative;
        height: 209px;
    }
    .custom-percent-img {
        width: 85px;
        z-index: 3;
        position: absolute;
    }
    .gear-top-left {
        position: absolute;
        top: -12%;
        left: 0%;
        width: 150px;
        z-index: 1;
    }
    .icon-seo {
        position: absolute;
        top: 1%;
        left: 11%;
        width: 79px;
        z-index: 2;
    }
    .gear-top-right {
        position: absolute;
        top: -9%;
        right: -4%;
        width: 150px;
        z-index: 1;
    }
    .icon-api {
        position: absolute;
        top: 6%;
        right: 10%;
        width: 58px;
        z-index: 2;
    }
    .gear-bottom-right {
        position: absolute;
        bottom: 18%;
        right: -6%;
        width: 150px;
        z-index: 1;
    }
    .icon-growth {
        position: absolute;
        bottom: 26%;
        right: 3%;
        width: 85px;
        z-index: 2;
    }
    .services-images img {
        position: absolute;
        max-width: 100%;
        height: auto;
        margin-top: -25px;
    }
    .bulb {
        bottom: -7%;
        left: 32.8%;
        width: 33px;
        z-index: 4;
        animation: floatDiagonal 5s ease-in-out infinite;
    }
    .rocket {
        top: 29%;
        left: 41%;
        width: 84px;
        z-index: 5;
    }
    .graphs {
        top: 48%;
        left: 10%;
        width: 47px;
        z-index: 4;
        animation: floatSide 4s ease-in-out infinite;
    }
    img.piller1 {
        left: 23.6%;
        width: 59px;
        top: 40.4%;
    }
    img.piller2 {
        left: 43.7%;
        width: 59px;
        top: 63.5%;
    }
    img.piller3 {
        left: 65.5%;
        width: 59px;
        top: 37%;
    }
    .services-images { height: 190px; }
    .main-base {
        width: 56px;
        top: 111%;
        left: 42%;
    }
    .about-fixed-bg::after {
        content: '';
        position: absolute;
        top: 600px;
        right: 2px;
        width: 100%;
        height: 100%;
        background-image: url(../img/bg/change-bg22.png);
        background-repeat: no-repeat;
        background-position: top right;
        background-size: contain;
        z-index: 2;
        pointer-events: none;
    }
}

/* =========================================
   3. Medium Phones (376px–414px)
========================================= */
@media (min-width: 376px) and (max-width: 414px) {
    .hero-visuals { height: 320px; }
    .img-top {
        width: 125px;
        top: 19%;
        left: 127px;
    }
    .img-center {
        width: 290px;
        left: 48%;
    }
    .gif-back-right {
        bottom: 71%;
        right: 49px;
        width: 60px;
        z-index: 4;
    }
    .gif-back {
        bottom: 72%;
        left: 35px;
        width: 60px;
        z-index: 4;
    }
    .gif-right {
        bottom: 48%;
        right: 55px;
        width: 80px;
        z-index: 4;
    }
    .gif-left {
        bottom: 54%;
        left: 53px;
        width: 50px;
        z-index: 4;
    }
    .ahead-left {
        bottom: 34%;
        left: 163px;
        width: 44px;
        z-index: 4;
    }
    .img-left {
        bottom: 57%;
        left: 130px;
        width: 30px;
        z-index: 1;
        animation: float-updown 5s ease-in-out infinite;
    }
    .img-right { 
        bottom: 57%;
        right: 130px;
        width: 30px;
        z-index: 1;
        animation: float-updown 5s ease-in-out infinite;
    }
    .about-fixed-bg::after {
        content: '';
        position: absolute;
        top: 600px;
        right: 2px;
        width: 100%;
        height: 100%;
        background-image: url(../img/bg/change-bg22.png);
        background-repeat: no-repeat;
        background-position: top right;
        background-size: contain;
        z-index: 2;
        pointer-events: none;
    }
    .mockup-image.one {
        top: 137px;
        right: 61px;
        transform: rotate(1deg);
        z-index: 2;
        width: 275px;
    }
    .mockup-image.two {
        top: 55px;
        right: 19px;
        transform: rotate(2deg);
        z-index: 1;
        opacity: 0.95;
        width: 150px;
        animation: floatY 4s ease-in-out infinite;
    }
    .angled-images {
        position: relative;
        height: 240px;
    }
    .custom-percent-img {
        width: 95px;
        z-index: 3;
        position: absolute;
    }
    .gear-top-left {
        position: absolute;
        top: -8%;
        left: 9%;
        width: 120px;
        z-index: 1;
    }
    .icon-seo {
        position: absolute;
        top: 3%;
        left: 19%;
        width: 54px;
        z-index: 2;
    }
    .gear-top-right {
        position: absolute;
        top: -5%;
        right: 7%;
        width: 120px;
        z-index: 1;
    }
    .icon-api {
        position: absolute;
        top: 7%;
        right: 16%;
        width: 55px;
        z-index: 2;
    }
    .gear-bottom-right {
        position: absolute;
        bottom: 18%;
        right: 5%;
        width: 120px;
        z-index: 1;
    }
    .icon-growth {
        position: absolute;
        bottom: 25%;
        right: 13%;
        width: 60px;
        z-index: 2;
    }
    .bulb {
        bottom: -3%;
        left: 32.8%;
        width: 40px;
        z-index: 4;
        animation: floatDiagonal 5s ease-in-out infinite;
    }
    .services-images { height: 200px; }
    .main-base {
        width: 50px;
        top: 118%;
        left: 44%;
    }
    img.piller1 {
        left: 22.7%;
        width: 70px;
        top: 40.4%;
    }
    img.piller2 {
        left: 43.7%;
        width: 70px;
        top: 64.5%;
    }
    img.piller3 {
        left: 64.5%;
        width: 70px;
        top: 37%;
    }
    .graphs {
        top: 47%;
        left: 10%;
        width: 55px;
        z-index: 4;
        animation: floatSide 4s ease-in-out infinite;
    }
    .rocket {
        top: 33%;
        left: 40%;
        width: 90px;
        z-index: 5;
    }
}

/* =========================================
   4. Large Phones (415px–480px)
========================================= */
@media (min-width: 415px) and (max-width: 480px) {
    .hero-visuals { height: 340px; }
    .img-top {
        width: 175px;
        top: 8%;
        left: 114px;
    }
    .img-center { width: 340px; }
    .gif-back-right {
        bottom: 71%;
        right: 7px;
        width: 100px;
        z-index: 4;
    }
    .gif-back {
        bottom: 73%;
        left: 9px;
        width: 100px;
        z-index: 4;
    }
    .img-left {
        width: 46px;
        left: 111px;
        top: 75px;
    }
    .img-right {
        width: 46px;
        right: 111px;
        top: 75px;
    }
    .gif-left {
        bottom: 55%;
        left: 45px;
        width: 60px;
        z-index: 4;
    }
    .gif-right {
        bottom: 49%;
        right: 31px;
        width: 87px;
        z-index: 4;
    }
    .ahead-left {
        bottom: 33%;
        left: 175px;
        width: 47px;
        z-index: 4;
    }
    .about-fixed-bg::after {
        content: '';
        position: absolute;
        top: 600px;
        right: 2px;
        width: 100%;
        height: 100%;
        background-image: url(../img/bg/change-bg22.png);
        background-repeat: no-repeat;
        background-position: top right;
        background-size: contain;
        z-index: 2;
        pointer-events: none;
    }
    .mockup-image.one {
        top: 135px;
        right: 75px;
        transform: rotate(1deg);
        z-index: 2;
        width: 270px;
    }
    .mockup-image.two {
        top: 59px;
        right: 39px;
        transform: rotate(2deg);
        z-index: 1;
        opacity: 0.95;
        width: 145px;
        animation: floatY 4s ease-in-out infinite;
    }
    .angled-images {
        position: relative;
        height: 245px;
    }
    .custom-percent-img {
        width: 100px;
        z-index: 3;
        position: absolute;
    }
    .custom-overlay-img {
        position: absolute;
        top: 59px;
        left: 24px;
        width: 39%;
        z-index: 1;
        animation: floatUpDown 3s ease-in-out infinite;
    }
    .gear-top-left {
        position: absolute;
        top: -15%;
        left: 2%;
        width: 175px;
        z-index: 1;
    }
    .icon-seo {
        position: absolute;
        top: 1%;
        left: 13%;
        width: 90px;
        z-index: 2;
    }
    .gear-top-right {
        position: absolute;
        top: -12%;
        right: 0%;
        width: 175px;
        z-index: 1;
    }
    .icon-api {
        position: absolute;
        top: 6%;
        right: 14%;
        width: 65px;
        z-index: 2;
    }
    .gear-bottom-right {
        position: absolute;
        bottom: 18%;
        right: -5%;
        width: 175px;
        z-index: 1;
    }
    .icon-growth {
        position: absolute;
        bottom: 27%;
        right: 5%;
        width: 95px;
        z-index: 2;
    }
    .services-images { height: 210px; }
    .main-base {
        width: 55px;
        top: 113%;
        left: 43%;
    }
    .bulb {
        bottom: -1%;
        left: 32.8%;
        width: 40px;
        z-index: 4;
        animation: floatDiagonal 5s ease-in-out infinite;
    }
    .graphs {
        top: 54%;
        left: 12%;
        width: 54px;
        z-index: 4;
        animation: floatSide 4s ease-in-out infinite;
    }
    img.piller1 {
        left: 23%;
        width: 70px;
        top: 40.4%;
    }
    img.piller2 {
        left: 44%;
        width: 70px;
        top: 64.5%;
    }
    img.piller3 {
        left: 65%;
        width: 70px;
        top: 37%;
    }
    .rocket {
        top: 30%;
        left: 40%;
        width: 99px;
        z-index: 5;
    }
}

/* =========================================
   5. XL Mobiles / Small Tablets Portrait (481px–600px)
========================================= */
@media (min-width: 481px) and (max-width: 600px) {
    .hero-visuals { height: 360px; }
    .img-top { width: 175px; top: 5%; }
    .img-center { width: 260px; }
    .img-left, .img-right { width: 42px; }
    .services-images { height: 250px; }
    .main-base { width: 500px; margin-top: 0; }
    .rocket { top: 10%; left: 42%; width: 65px; }
    .graphs { top: 35%; left: 12%; width: 48px; }
    .bulb { bottom: 0%; left: 28%; width: 42px; }
    .custom-percent-img { width: 82px; }
}

/* =========================================
   6. Small Tablets / Phablets (601px–767px)
========================================= */
@media (min-width: 601px) and (max-width: 767px) {
    .hero-visuals { height: 380px; }
    .img-top { width: 188px; top: 6%; left: 28%; }
    .img-center { width: 300px; top: 50%; }
    .img-left { left: 114px; width: 40px; bottom: 58%; }
    .img-right { right: 106px; width: 44px; bottom: 60%; }
    .services-images { height: 350px; }
    .rocket { top: 15%; left: 42%; width: 70px; }
    .graphs { top: 20%; left: 8%; width: 50px; }
    .bulb { bottom: 18%; left: 32%; width: 40px; }
    .main-base { width: 80px; top: 46%; left: 39%; margin-top: -15px; }
}

/* =========================================
   7. Tablets (768px–991px)
========================================= */
@media (min-width: 768px) and (max-width: 991px) {
    .hero-visuals { height: 650px; }
    .img-top {
        top: 9%;
        left: 36%;
        width: 260px;
    }
    .img-center {
        width: 650px;
        top: 50%;
        left: 56%;
    }
    .gif-back-right {
        bottom: 78%;
        right: -85px;
        width: 155px;
        z-index: 4;
    }
    .gif-back {
        bottom: 79%;
        left: -3px;
        width: 145px;
        z-index: 4;
    }
    .ahead-left {
        bottom: 37%;
        left: 290px;
        width: 98px;
        z-index: 4;
    }
    .img-left {
        left: 189px;
        width: 70px;
        bottom: 64%;
    }
    .img-right {
        right: 105px;
        width: 70px;
        bottom: 63%;
    }
    .gif-right {
        bottom: 55%;
        right: -50px;
        width: 157px;
        z-index: 4;
    }
    .gif-left {
        bottom: 62%;
        left: 62px;
        width: 75px;
        z-index: 4;
    }
    .about-fixed-bg::after {
        content: '';
        position: absolute;
        top: 455px;
        right: 2px;
        width: 100%;
        height: 100%;
        background-image: url(../img/bg/change-bg22.png);
        background-repeat: no-repeat;
        background-position: top right;
        background-size: contain;
        z-index: 2;
        pointer-events: none;
    }
    .services-images { height: 400px; }
    .rocket {
        top: 28%;
        left: 42%;
        width: 120px;
    }
    .graphs {
        top: 48%;
        left: 16%;
        width: 57px;
    }
    .main-base {
        position: relative;
        width: 110px;
        height: auto;
        z-index: 1;
        display: block;
        margin-top: -30px;
        left: 41%;
        top: 85%;
    }
    .bulb {
        bottom: 16%;
        left: 33%;
        width: 56px;
    }
    img.piller1 {
        left: 23.5%;
        width: 100px;
        top: 32%;
    }
    img.piller2 {
        left: 44%;
        width: 100px;
        top: 51.5%;
    }
    img.piller3 {
        left: 65.5%;
        width: 100px;
        top: 30%;
    }
    .main-device { width: 180px; }
}