/* Format */
:root {
	--digi-primary-color: #E72531;
	--digi-secondary-color: #4CBD54;
}
.section.digi-banner {
	background:linear-gradient(179.83deg, #EAF5FF 74.14%, rgba(255, 255, 255, 0) 99.41%);
}
.section.digi-banner:before, .section.digi-banner:after {
	content: "";
	position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #FC490B;
    left: 10%;
    top: 73%;
    animation: scale_more 2s ease infinite;
    z-index: 0;
}
.section.digi-banner:before {
    background-color: #FDB846;
    top: 35%;
    animation: scale_more 3s ease infinite;
}
.section-content.relative {
    position: unset !important;
}
.banner-technology {
    position: absolute;
    z-index: -1;
}

@media screen and (max-width: 991px) {
    .banner-technology {
        max-width: 130px;
    }
}

@media screen and (max-width: 767px) {
    .banner-technology {
        max-width: 100px;
    }
}

@media screen and (max-width: 575px) {
    .banner-technology {
        max-width: 60px !important;
    }
}

.banner-technology.wordpress {
    left: 21.5%;
    top: 20%;
    animation: scale 4s ease-in-out infinite;
}

@media (max-width: 1699px) {
    .banner-technology.wordpress {
        left: 15%;
    }
}

@media screen and (max-width: 1199px) {
    .banner-technology.wordpress {
        left: 10%;
    }
}

@media screen and (max-width: 991px) {
    .banner-technology.wordpress {
        left: 5%;
        top: 13%;
        max-width: 100px;
    }
}

.banner-technology.flutter {
    left: 16%;
    top: 44%;
    animation: updown 20s ease infinite;
}

@media (max-width: 1699px) {
    .banner-technology.flutter {
        left: 6%;
    }
}

@media screen and (max-width: 1199px) {
    .banner-technology.flutter {
        left: 1%;
    }
}

@media screen and (max-width: 991px) {
    .banner-technology.flutter {
        left: -3%;
        max-width: 80px;
    }
}

@media screen and (max-width: 575px) {
    .banner-technology.flutter {
        left: -5%;
    }
}

.banner-technology.php {
    left: 17%;
    bottom: 12%;
    animation: updown 10s ease infinite;
}

@media (max-width: 1699px) {
    .banner-technology.php {
        left: 9%;
        bottom: 6%;
    }
}

@media screen and (max-width: 1199px) {
    .banner-technology.php {
        left: 4%;
        bottom: 1%;
    }
}

@media screen and (max-width: 991px) {
    .banner-technology.php {
        left: 0%;
        bottom: 2%;
    }
}

.banner-technology.laravel {
    right: 18%;
    top: 22%;
    animation: updown 20s ease infinite;
}

@media (max-width: 1699px) {
    .banner-technology.laravel {
        right: 8%;
    }
}

@media screen and (max-width: 1199px) {
    .banner-technology.laravel {
        right: 3%;
        top: 15%;
    }
}

@media screen and (max-width: 991px) {
    .banner-technology.laravel {
        right: 2%;
        top: 10%;
    }
}

.banner-technology.figma {
    right: 14%;
    top: 49%;
    animation: updown 15s ease infinite;
}

@media (max-width: 1699px) {
    .banner-technology.figma {
        right: 4%;
    }
}

@media screen and (max-width: 1199px) {
    .banner-technology.figma {
        right: 1%;
    }
}

@media screen and (max-width: 991px) {
    .banner-technology.figma {
        top: 45%;
        right: -3%;
    }
}

.banner-technology.marketing {
    right: 20%;
    bottom: 12%;
    animation: scale 8s ease infinite;
}

@media (max-width: 1699px) {
    .banner-technology.marketing {
        right: 10%;
        bottom: 5%;
    }
}

@media screen and (max-width: 1199px) {
    .banner-technology.marketing {
        right: 5%;
        bottom: 0%;
    }
}

@media screen and (max-width: 991px) {
    .banner-technology.marketing {
        right: 1%;
    }
}

@keyframes scale {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes scale_more {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}

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

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

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

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

    50% {
        transform: rotate(180deg) translateX(20px);
    }

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

.banner-element {
    position: absolute;
}

@media screen and (max-width: 991px) {
    .banner-element {
        display: none;
    }
}

.banner-element.one {
    left: 8%;
    bottom: 16%;
    animation: updown 10s ease infinite;
}

.banner-element.two {
    right: 27%;
    top: 30%;
    animation: rotate 15s ease infinite;
}

.banner-element.three {
    right: 7%;
    top: 40%;
    animation: updown 10s ease infinite;
}

/* ============================== Banner Section End Here ===================*/
.flex-center, .how-to-deal::before {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
}