body {
    /* background: url(../img/bg/main.png); */
    background: #000;
    margin: 0;
    padding: 0;
    font-family: Montserrat, sans-serif;
    color: #fff;
    overflow-x: hidden;
    background-size: 100% 100%;
    background-attachment: fixed;
    /* max-width: 100%; */
    /* cursor: none; */
}

.bodyOverlay{
    background: url(../img/bg/main.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    z-index: -1;
    position: fixed;
    /* background-attachment: fixed; */
}


body p {
    text-align: justify;
    text-align-last: left;
}
body p.text-centerImp {
    text-align: center;
    text-align-last: center;
}

.text-centerImp{
    text-align: center !important;
    text-align-last: center !important;
}

/* .partices02 {
    background: url(../img/bg/main01.png);
    width: 90%;
    min-height: 80%;
    background-repeat: repeat-y;
    background-size: cover;
    background-attachment: fixed;
    z-index: 999;
    position: absolute
} */

.z-99 {
    z-index: 999
}

html {
    scroll-behavior: smooth
}

::-webkit-scrollbar {
    width: 10px
}

::-webkit-scrollbar-track {
    background: #000
}

::-webkit-scrollbar-thumb {
    /* background: #180f81; */
    background: #f83e3e;
    border-radius: 35px;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}

::-webkit-scrollbar-thumb:hover {
    background: #fd6161;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}


/* ================================== */

.packageCard .cardBody .features::-webkit-scrollbar {
    width: 4px
}

.packageCard .cardBody .features::-webkit-scrollbar-track {
    background: #ffffff4f !important;
}

.packageCard .cardBody .features::-webkit-scrollbar-thumb {
    background: #8f39ff;
    border-radius: 35px;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}

.packageCard .cardBody .features::-webkit-scrollbar-thumb:hover {
    background: #ab78fb;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}
/* ================================== */

p {
    letter-spacing: .2pt;
    line-height: 2;
    font-size: 15px;
    color: #e7e7e7
}

.ps-10p {
    padding-left: 10%
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Fjalla One", sans-serif
}

.ff-1 {
    font-family: "Fjalla One", sans-serif
}

.ff-2 {
    font-family: Montserrat, sans-serif
}

.stroke {
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #fff;
    text-transform: uppercase
}

.stroke-1 {
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: .5px;
    -webkit-text-stroke-color: #fff;
    text-transform: uppercase
}

.stroke-l {
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: .5px;
    -webkit-text-stroke-color: #fff;
    text-transform: uppercase
}

.bothLines,
.rightLine {
    position: relative;
    display: inline-block
}

.uppecase {
    text-transform: uppercase
}

#translations-main {
    color: #fff !important
}

.trustpilot-widget a {
    color: #fff !important
}

.profile-link {
    color: #fff !important
}

.fs-13 {
    font-size: 13px
}

.fs-14 {
    font-size: 14px
}

.fs-18 {
    font-size: 18px
}

.fc-white {
    color: #fff !important
}

.roman li{
    list-style-type: none;
}



.rightLine::after {
    content: "";
    position: absolute;
    right: -130px;
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    height: 1px;
    background: #fff
}

.bothLines::before {
    content: "";
    position: absolute;
    left: -130px;
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    height: 1px;
    background: #fff
}

.bothLines::after {
    content: "";
    position: absolute;
    right: -130px;
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    height: 1px;
    background: #fff
}

.cardAbout.ab2 svg {
    position: absolute;
    left: 60px;
    top: 143px;
    width: 660px
}

.mainBanner {
    min-height: 70vh;
    display: flex;
    align-items: center;
    overflow-x: clip
}

.innerBanner {
    min-height: 500px;
    display: flex;
    align-items: center;
    overflow-x: clip
}

.sec-about {
    min-height: 700px;
    display: flex;
    align-items: center;
    overflow: hidden
}

.sec-services02 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden
}

.abt-img {
    transform: scale(3);
    opacity: 0
}

.scaleDown {
    transform: scale(3);
    opacity: 0
}

.ball {
    width: 50px;
    height: 50px;
    background: #f144fc61;
    background-size: contain;
    background-repeat: no-repeat;
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 999
}

.serviceSecNew {
    min-height: 500px
}

.dotRight img {
    position: absolute;
    width: 160px;
    right: 0;
    top: 50px;
    object-fit: cover
}

.dotLeft img {
    position: absolute;
    width: 160px;
    left: 0;
    top: 50px;
    object-fit: cover
}

.contactCard {
    background: linear-gradient(242.23deg, rgba(0, 10, 255, 0) 0, rgba(0, 10, 255, .2) 60.59%);
    border: 1px solid #a8abff;
    box-shadow: 0 0 10px #000aff;
    backdrop-filter: blur(15px);
    border-radius: 60px;
    padding: 80px 15px
}

.contactCard .form-control {
    background: 0 0;
    min-height: 55px;
    border: 2px solid #fff;
    border-radius: 7px;
    resize: none;
    color: #fff
}

.contactCard .form-control::placeholder {
    color: #fff
}

.floatingPhone img {
    object-fit: contain;
    max-width: 250px;
    position: absolute;
    bottom: -30px;
    left: 10px;
    transform: scale(1)
}

.packageCard {
    background: #472282;
    background: linear-gradient(180deg, rgba(71, 34, 130, 1) 18%, rgba(2, 6, 128, 1) 100%);
    color: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, .5);
    backdrop-filter: blur(2px);
    border-radius: 30px;
    height: 100%;
    transform: scale(.5)
}

.packageCard.left .cardHeader {
    border-top-right-radius: 30px;
    padding: 25px
}

.packageCard.right .cardHeader {
    border-top-left-radius: 30px;
    padding: 25px
}

.packageCard.center .cardHeader {
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    padding: 25px
}

.packageCard .cardBody {
    padding: 40px 20px
}

.packageCard .cardBody .features li {
    /* list-style-type: none; */
    padding: 7px 0
}

.headerBottom img {
    position: relative;
    /* top: -2px; */
    top: 0px;
    z-index: -1;
    width: 100%;
    object-fit: 100%
}

.packageCard .features {
    height: 240px;
    overflow-y: auto
}

.ty-70 {
    transform: translateY(70px)
}

.packageCard .cardHeader {
    /* background: #8f39ff; */
    background: linear-gradient(314deg, hsla(0, 100%, 50%, 0.83) 50%, rgba(0, 1, 18, 0.48) 290%);
    color: #fff
}

.footerTop {
    background: url(../img/bg/foot-bg.png) no-repeat;
    background-size: 100% 80%;
    min-height: 500px;
    position: relative;
    bottom: 0px;
    background-position: bottom
}

.footer {
    /* background: linear-gradient(109.26deg, #482984 15.87%, #702bdf 98.89%); */
    background: linear-gradient(234deg, hsla(0, 100%, 50%, 0.73) 50%, rgba(0, 1, 18, 0.48) 130%);
    min-height: 450px;
    background-size: cover;
    background-position: ce;
    padding: 50px 0 20px 0
}

.footer .socialIcons li {
    list-style-type: none;
    display: inline-block;
    padding: 0 10px
}

.footer .socialIcons li a {
    font-size: 20px;
    color: #fff
}

.footerTxt {
    font-size: 13px
}

.footer .links li {
    list-style-type: none;
    padding: 5px 0
}

.footer .links li a {
    text-decoration: none;
    color: #fff;
    font-size: 13px;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}

.footer .links li a:hover {
    color: #cfb9ce;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}

.bannerLines {
    position: absolute;
    top: 10%;
    right: 0;
    background: url(../img/decor/bannerLines.png);
    width: 120px;
    height: 190px;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -96;
    opacity: .8
}

.BottomRightShade {
    position: absolute;
    bottom: -200px;
    right: -100px;
    width: 500px;
    height: 500px;
    border-radius: 100%;
    background: #240147;
    z-index: -1;
    filter: blur(100px)
}

.bottomLeftShade {
    position: absolute;
    bottom: 0;
    left: -100px;
    width: 500px;
    height: 500px;
    border-radius: 100%;
    background: #010449;
    z-index: -1;
    filter: blur(150px);
    /* animation: 2s glowing infinite ease */
}

.topRightShade2 {
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    height: 400px;
    border-radius: 100%;
    background: #010449;
    z-index: -1;
    filter: blur(150px);
    /* animation: 3s glowing infinite ease */
}

.serviceShade {
    position: absolute;
    top: 50%;
    left: 10%;
    width: 400px;
    height: 400px;
    border-radius: 100%;
    background: #010449;
    z-index: -1;
    filter: blur(150px);
    /* animation: 3s glowing infinite ease */
}

.leftShade {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    left: -200px;
    width: 350px;
    height: 350px;
    border-radius: 100%;
    background: #240147;
    z-index: -1;
    filter: blur(150px);
    /* animation: 5s glowing2 infinite ease */
}

.rightShade {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -100px;
    width: 500px;
    height: 500px;
    border-radius: 100%;
    background: #240147;
    z-index: -1;
    filter: blur(150px);
    /* animation: 5s glowing2 infinite ease */
}

.rightShadeServices {
    position: absolute;
    top: 20%;
    right: 0;
    width: 500px;
    height: 500px;
    border-radius: 100%;
    background: #240147ac;
    z-index: -1;
    filter: blur(150px);
    /* animation: 5s glowing2 infinite ease */
}

.topLeftShade {
    position: absolute;
    top: -300px;
    left: -200px;
    width: 700px;
    height: 700px;
    border-radius: 100%;
    background: #010449;
    z-index: -1;
    filter: blur(150px);
    /* animation: 3s glowing infinite ease */
}

.topRightShade {
    position: absolute;
    top: -300px;
    right: -100px;
    width: 500px;
    height: 500px;
    border-radius: 100%;
    background: #010449;
    z-index: -1;
    filter: blur(150px);
    /* animation: 2s glowing infinite ease */
}

.portShade1 {
    position: absolute;
    top: 200px;
    left: 10%;
    width: 500px;
    height: 500px;
    border-radius: 100%;
    background: #010449;
    z-index: -1;
    filter: blur(100px)
}

.portShade2 {
    position: absolute;
    top: 0;
    right: 10%;
    width: 500px;
    height: 500px;
    border-radius: 100%;
    background: #010449;
    z-index: -1;
    filter: blur(100px)
}

.testiShade {
    position: absolute;
    top: 0;
    left: 5%;
    width: 500px;
    height: 500px;
    border-radius: 100%;
    background: #010449;
    z-index: -1;
    filter: blur(150px)
}

.aboutShade {
    position: absolute;
    top: 10%;
    right: 10%;
    width: 400px;
    height: 400px;
    border-radius: 100%;
    background: #240147;
    z-index: -1;
    filter: blur(150px);
    /* animation: 5s glowing2 infinite ease */
}

.aboutShadeRight {
    position: absolute;
    top: 30%;
    left: 10%;
    width: 400px;
    height: 400px;
    border-radius: 100%;
    background: #240147;
    z-index: -1;
    filter: blur(150px);
    /* animation: 5s glowing2 infinite ease */
}

.dotAbout {
    background: url(../img/decor/dotAbout.png);
    position: absolute;
    bottom: -15%;
    right: 5%;
    width: 159px;
    height: 236px;
    z-index: -1;
    background-size: contain;
    background-repeat: no-repeat
}

.stickerServices {
    background: url(../img/decor/services.png);
    position: absolute;
    top: 5%;
    left: 0;
    width: 159px;
    height: 236px;
    z-index: -1;
    background-size: contain;
    background-repeat: no-repeat
}

.rocket {
    position: absolute;
    width: 170px;
    left: 0;
    bottom: -20px
}

.stickerAbout img {
    width: 70%
}

.stickerServices {
    position: absolute;
    top: -100px;
    right: 0
}

.stickerServices2 {
    position: absolute;
    /* top: 0; */
    top: 100px;
    right: 0;
    width: 99px;
    height: 136px;
    z-index: -1;
    background-size: contain;
    background-repeat: no-repeat
}

.stickertesti {
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
    height: 170px;
    z-index: -1;
    background-size: contain;
    background-repeat: no-repeat
}

.sideBar {
    position: absolute;
    top: 0;
    width: 10%;
    border-right: 1px solid #ccc;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center
}

.scrollDown {
    transform: rotate(-90deg) translateX(100px)
}

.navbar-brand img {
    object-fit: contain;
    max-width: 90px
}

.headSocialIcons li {
    list-style-type: none;
    padding: 10px 0
}

.headSocialIcons li a {
    font-size: 22px;
    color: #fff;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}

.servicesBar {
    padding: 10px 0;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    white-space: nowrap;
    transition: all .5s;
    overflow: hidden
}

.moveX {
    transform: translateX(1000px)
}

.moveX2 {
    transform: translateX(400px)
}

.abt-text {
    /* transform: translateX(1000px) */
    transform: scale(0)
}

.counter {
    background: linear-gradient(180deg, rgba(23, 23, 23, .9) 0, #000 149.27%), linear-gradient(0deg, rgb(255 255 255), rgb(132 132 132));
    border-top: 7px solid transparent;
    border-top-left-radius: 70px;
    border-left: 7px;
    border-right: 7px;
    border-bottom-right-radius: 100px;
    padding: 25px 0;
    min-height: 150px
}

.counter .counterBg {
    width: 100%;
    height: 130px;
    position: absolute;
    bottom: -10px;
    right: 0;
    /* background: #ab78fb; */
    background: #FF0000ba;
    z-index: -1;
    border-bottom-right-radius: 100px;
    overflow: hidden;
    /* box-shadow: 0 1px 34px 8px #3f049d */
    box-shadow: 0 0 10px 1px #FF0000;
}

.shade {
    width: 200px;
    height: 100%;
    background: #000aff;
    background: linear-gradient(90deg, rgba(0, 10, 255, 0) 0, rgb(255 255 255 / 75%) 50%, rgba(255, 255, 255, 0) 100%);
    position: relative;
    left: auto;
    transform: skewX(-50deg) translateX(1700%);
    animation: 4s shine infinite forwards ease-in
}

@keyframes shine {
    to {
        transform: translateX(-300%)
    }
}

.cardBlog {
    border-radius: 20px;
    position: relative;
    cursor: pointer;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}

.cardBlog .cardDesc {
    text-align: start;
    position: absolute;
    bottom: 20px;
    left: 20px;
    transform: translateY(60px);
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}

.cardBlog .cardDesc p {
    visibility: hidden;
    opacity: 0;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}

.cardBlog:hover .cardDesc {
    transform: translateY(0)
}

.cardBlog:hover .cardDesc p {
    visibility: visible;
    opacity: 1
}

.cardReview .reviewStars span {
    font-size: 14px
}

.cardReview .reviewStars span.checked {
    color: #ff0
}

.aboutSideTxt {
    position: absolute;
    top: 50%;
    left: -110px;
    transform: translateY(-50%) rotate(-90deg);
    letter-spacing: 14px;
    color: #ffffff2b
}

.serviceCircle {
    position: relative;
    background: #6a2ad0;
    filter: drop-shadow(0 0 30px 20px #9747ff4d);
    width: 300px;
    height: 300px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    filter: drop-shadow(0 0 10px #6a2ad0);
    box-shadow: 0 0 20px #6a2ad0
}

.serviceCircle .cardImg img {
    height: 70px;
    object-fit: contain;
    margin-bottom: 20px
}

.projectRoundedCard {
    position: relative;
    padding: 30px 200px 30px 40px;
    border: 2px dashed #fff;
    border-radius: 150px
}

.projectRoundedCard::before {
    content: "";
    position: absolute;
    top: 30px;
    right: -360px;
    transform: rotate(-9deg);
    background: url(../img/decor/vec-1.png) no-repeat;
    width: 440px;
    height: 390px;
    background-size: 100% 100%
}

.projectRoundedCard.d-con-none::before {
    display: none
}

.projectRoundedCard .cube {
    position: absolute;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    gap: 30px;
    top: 50%;
    right: -30px;
    transform: translateY(-50%);
    background: #000aff;
    background-image: radial-gradient(50% 50% at 50% 50%, rgb(0 10 255) 0, #0073ff 100%);
    border: 2px solid #71ddff;
    box-shadow: 0 0 40px 20px rgba(0, 115, 255, .4)
}

.projectRoundedCard p,
.projectRoundedCard2 p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical
}

.projectRoundedCard .cube img,
.projectRoundedCard2 .cube img {
    height: 120px;
    object-fit: contain
}

.projectRoundedCard2 {
    position: relative;
    padding: 30px 40px 30px 200px;
    border: 2px dashed #fff;
    border-radius: 150px
}

.projectRoundedCard2::before {
    content: "";
    position: absolute;
    top: 30px;
    left: -360px;
    transform: rotate(9deg);
    background: url(../img/decor/vec-2.png) no-repeat;
    width: 440px;
    height: 390px;
    background-size: 100% 100%
}

.projectRoundedCard2 .cube {
    position: absolute;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    gap: 30px;
    top: 50%;
    left: -30px;
    transform: translateY(-50%);
    background: #000aff;
    background-image: radial-gradient(50% 50% at 50% 50%, rgb(0 10 255) 0, #0073ff 100%);
    border: 2px solid #71ddff;
    box-shadow: 0 0 40px 20px rgba(0, 115, 255, .4)
}

.cardMap .cardDesc {
    padding: 15px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgb(13 60 116) 0, rgb(0 0 0) 100%);
    border: 2px solid #71ddff;
    box-shadow: 0 0 40px rgba(0, 115, 255, .4);
}
/* 
.cardMap .cardDesc {
    padding: 15px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(0, 115, 255, .24) 0, rgba(0, 115, 255, 0) 100%);
    border: 2px solid #71ddff;
    box-shadow: 0 0 40px rgba(0, 115, 255, .4)
} */

.roadMap {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    min-height: 100%
}

.blueEllipseBorder {
    position: absolute;
    width: 155%;
    height: 100%;
    border-radius: 100%;
    transform: rotate(53deg);
    top: 0;
    left: -43%;
    border: 2px dashed #cccccc85
}

.blueEllipseSticker {
    position: absolute;
    width: 150%;
    height: 100%;
    border-radius: 100%;
    /* background: #0007c9;
    background: linear-gradient(148deg, rgba(0, 7, 201, 1) 0, rgba(0, 0, 0, 0) 99%); */
    background: #FF0000ba;
    background: linear-gradient(148deg, hsla(0, 100%, 50%, 0.73) 50%, rgba(0, 1, 18, 0.48) 100%);
    transform: rotate(45deg);
    top: 0;
    left: -40%
}

.margins {
    margin: 150px 0
}

.margin2 {
    margin-top: 150px
}

.roadMap2 {
    margin: 200px 0;
    height: 1000px
}

.cardMap .cardDesc p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 11px;
}

.step0 {
    position: absolute;
    width: 50%;
    top: -270px;
    left: 60%;
    transform: translateX(-50%) scale(0)
}

.step01 {
    position: absolute;
    width: 50%;
    top: -180px;
    left: 110px;
    transform: scale(0)
}

.step01 .cardDesc {
    transform: translateX(-250px)
}

.step02 {
    position: absolute;
    width: 50%;
    top: -120px;
    right: 0;
    transform: scale(0)
}

.step03 {
    position: absolute;
    width: 50%;
    top: 190px;
    left: -100px;
    transform: scale(0)
}

.step03 .cardDesc {
    transform: translateX(-200px)
}

.step04 {
    position: absolute;
    width: 50%;
    top: 290px;
    right: 0;
    transform: scale(0)
}

.track {
    white-space: nowrap;
    will-change: transform;
    animation: marquee 32s linear infinite
}

.carda2 {
    position: relative;
    top: 270px;
    left: 20px
}

.ab1 {
    position: relative
}

.ab1::before {
    content: "";
    position: absolute;
    bottom: -110%;
    left: 30%;
    transform: translateX(-50%);
    background: url(../img/decor/l1.png);
    width: 334px;
    height: 339px;
    background-repeat: no-repeat;
    background-size: contain
}

.ab2 {
    position: relative;
    transform: translateY(250px) translateX(170px) scale(.98)
}

.ab2::before {
    content: "";
    position: absolute;
    bottom: -140%;
    left: 121%;
    transform: translateX(-50%);
    background: url(../img/decor/l2.png);
    width: 590px;
    height: 427px;
    background-repeat: no-repeat;
    background-size: contain
}

.cardAbout.ab3 {
    position: relative;
    transform: translateY(310px) translateX(11px) scale(.88)
}

.ab3::before {
    content: "";
    position: absolute;
    bottom: -140%;
    left: 132%;
    transform: translateX(-50%);
    background: url(../img/decor/l3.png);
    width: 415px;
    height: 556px;
    background-repeat: no-repeat;
    background-size: contain
}

.cardAbout.ab4 {
    position: relative;
    transform: scale(.84) translate(-80px, 590px)
}

.ab4::before {
    content: "";
    position: absolute;
    bottom: -125%;
    left: -67%;
    transform: translateX(-50%);
    background: url(../img/decor/l4.png);
    width: 415px;
    height: 556px;
    background-repeat: no-repeat;
    background-size: contain
}

.ab5 {
    position: relative;
    transform: scale(.79) translate(200px, 410px)
}

.ab5::before {
    content: "";
    position: absolute;
    bottom: -50%;
    left: 190%;
    transform: translateX(-50%);
    background: url(../img/decor/l6.png);
    width: 660px;
    height: 186px;
    background-repeat: no-repeat;
    background-size: contain
}

.ab6 {
    position: relative;
    transform: scale(.7) translate(-220px, 370px)
}

.ab6::before {
    content: "";
    position: absolute;
    bottom: -170%;
    right: -210px;
    transform: translateX(-50%);
    background: url(../img/decor/l7.png);
    width: 815px;
    height: 556px;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -11;
}

.cardAbout.ab7 {
    position: relative;
    transform: scale(0.7) translate(-770px, 240px);
}

.ab7::before {
    content: "";
    position: absolute;
    bottom: -175%;
    left: 193%;
    transform: translateX(-50%);
    background: url(../img/decor/l8.png);
    width: 815px;
    height: 556px;
    background-repeat: no-repeat;
    background-size: contain;
}

.ab8 {
    position: relative;
    transform: scale(.7) translate(1160px, -10px);
}

.ab8::before {
    content: "";
    position: absolute;
    bottom: -168%;
    left: 0%;
    transform: translateX(-50%);
    background: url(../img/decor/l9.png);
    width: 700px;
    height: 526px;
    background-repeat: no-repeat;
    background-size: contain;
}

.ab9 {
    position: relative;
    transform: scale(.7) translate(-810px, -20px);
}
.ab9::before {
    content: "";
    position: absolute;
    bottom: -148%;
    left: 60%;
    transform: translateX(-50%);
    background: url(../img/decor/l10.png);
    width: 700px;
    height: 576px;
    background-repeat: no-repeat;
    background-size: contain;
}


.ab10 {
    position: relative;
    transform: scale(.7) translate(1160px, -10px);
}

.ab10::before {
    content: "";
    position: absolute;
    bottom: -168%;
    left: 0%;
    transform: translateX(-50%);
    background: url(../img/decor/l9.png);
    width: 700px;
    height: 526px;
    background-repeat: no-repeat;
    background-size: contain;
}

.ab11 {
    position: relative;
    transform:scale(.7) translate(-680px, 100px);
}

.ab11::before {
    content: "";
    position: absolute;
    bottom: -168%;
    left: 0%;
    transform: translateX(-50%);
    background: url(../img/decor/l9.png);
    width: 700px;
    height: 526px;
    background-repeat: no-repeat;
    background-size: contain;
}


.cardAbout.ab12 {
    position: relative;
    transform: scale(0.7) translate(-970px, 120px);
}

.ab12::before {
    content: "";
    position: absolute;
    bottom: -175%;
    left: 193%;
    transform: translateX(-50%);
    background: url(../img/decor/l8.png);
    width: 815px;
    height: 556px;
    background-repeat: no-repeat;
    background-size: contain;
}

.cardAbout.ab13 {
    position: relative;
    transform: scale(0.7) translate(-370px, -170px);
}

a.default{
    text-decoration: none;
    color: #fff !important;
}


.cardAbout {
    position: relative;
    background: radial-gradient(50% 50% at 50% 50%, rgb(0 0 0) 0, rgb(0 23 50) 100%);
    border: 2px solid #71ddff;
    width: 300px;
    height: 300px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0 auto;
    cursor: pointer;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}

.cardAbout:hover {
    box-shadow: 0 0 16px 8px #0940a7;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}

.cardAbout .cardImg img {
    height: 110px;
    object-fit: contain;
    margin-bottom: 10px
}

.cardAbout .bgShades {
    width: 475px;
    height: 475px;
    position: absolute;
    animation: 9s sunEffect infinite linear;
    z-index: -1
}

.cardAbout.scale01 {
    transform: scale(.8)
}

.stickerDot {
    position: absolute;
    top: -240px;
    right: 35%
}

.rightDot {
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    background: url(../img/decor/dotRight.png);
    width: 200px;
    height: 100px;
    background-repeat: no-repeat;
    background-size: contain
}

.serviceHeading,
.serviceHeading2,
.logoBack,
.seo,
.gd,
.vd,
.anime,
.app,
.ecom,
.illust,
.copy,
.motion,
.smm {
    position: relative
}

.smm::before {
    content: "";
    position: absolute;
    background: url('../img/backText/smm.svg');
    background-repeat: no-repeat;
    width: 70%;
    height: 150px;
    left: 50%;
    top: -25px;
    transform: translateX(-50%);
    background-size: contain;
}
.motion::before {
    content: "";
    position: absolute;
    background: url('../img/backText/motiongraphics.svg');
    background-repeat: no-repeat;
    width: 70%;
    height: 150px;
    left: 50%;
    top: -25px;
    transform: translateX(-50%);
    background-size: contain;
}
.copy::before {
    content: "";
    position: absolute;
    background: url('../img/backText/copywriting.svg');
    background-repeat: no-repeat;
    width: 70%;
    height: 150px;
    left: 50%;
    top: -45px;
    transform: translateX(-50%);
    background-size: contain;
}
.illust::before {
    content: "";
    position: absolute;
    background: url('../img/backText/illustration.svg');
    background-repeat: no-repeat;
    width: 70%;
    height: 150px;
    left: 50%;
    top: -45px;
    transform: translateX(-50%);
    background-size: contain;
}
.ecom::before {
    content: "";
    position: absolute;
    background: url('../img/backText/ecom.svg');
    background-repeat: no-repeat;
    width: 70%;
    height: 150px;
    left: 50%;
    top: -15px;
    transform: translateX(-50%);
    background-size: contain;
}
.app::before {
    content: "";
    position: absolute;
    background: url(../img/backText/app.svg);
    background-repeat: no-repeat;
    width: 70%;
    height: 150px;
    left: 50%;
    top: -25px;
    transform: translateX(-50%);
    background-size: contain;
}
.anime::before {
    content: "";
    position: absolute;
    background: url('../img/backText/animation.svg');
    background-repeat: no-repeat;
    width: 70%;
    height: 150px;
    left: 55%;
    top: -45px;
    transform: translateX(-50%);
    background-size: contain
}
.vd::before {
    content: "";
    position: absolute;
    background: url('../img/backText/video.svg');
    background-repeat: no-repeat;
    width: 70%;
    height: 150px;
    left: 50%;
    top: -45px;
    transform: translateX(-50%);
    background-size: contain
}
.gd::before {
    content: "";
    position: absolute;
    background: url('../img/backText/gd.svg');
    background-repeat: no-repeat;
    width: 70%;
    height: 150px;
    left: 50%;
    top: -35px;
    transform: translateX(-50%);
    background-size: contain
}
.seo::before {
    content: "";
    position: absolute;
    background: url(../img/backText/seo.svg);
    background-repeat: no-repeat;
    width: 30%;
    height: 215px;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
    background-size: contain;
}
.logoBack::before {
    content: "";
    position: absolute;
    background: url('../img/backText/logo.svg');
    background-repeat: no-repeat;
    width: 70%;
    height: 150px;
    left: 55%;
    top: -35px;
    transform: translateX(-50%);
    background-size: contain
}
.serviceHeading::before {
    content: "";
    position: absolute;
    background: url(../img/decor/web-development.png);
    background-repeat: no-repeat;
    width: 70%;
    height: 150px;
    left: 50%;
    top: -25px;
    transform: translateX(-50%);
    background-size: contain
}

.serviceHeading2 {
    content: "";
    position: absolute;
    background: url(../img/decor/portfolio.png);
    width: 50%;
    height: 230px;
    left: 50%;
    top: 60px;
    transform: translateX(-50%);
    background-size: contain;
    background-repeat: no-repeat
}
.serviceHeading5 {
    content: "";
    position: absolute;
    background: url(../img/decor/roadMap.png);
    width: 50%;
    height: 230px;
    left: 50%;
    top: 120px;
    transform: translateX(-50%);
    background-size: contain;
    background-repeat: no-repeat
}

.serviceHeading3 {
    content: "";
    position: absolute;
    background: url(../img/decor/portfolio.png);
    width: 50%;
    height: 230px;
    left: 50%;
    top: 130px;
    transform: translateX(-50%);
    background-size: contain;
    background-repeat: no-repeat
}

.aboutMain .carousel-item p {
    text-align: justify;
    text-align-last: center
}

.carouselServices p {
    text-align: justify;
    text-align-last: left
}

p.tcenter {
    text-align: justify;
    text-align-last: center
}

.pNt a {
    text-decoration: none;
    color: #fff;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}

.pNt a:hover {
    color: #cfb9ce;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}

.contactFooter a {
    color: #fff;
    text-decoration: none;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}

.contactFooter a:hover {
    color: #cfb9ce;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}

.clientImages .videoParent01 {
    position: absolute;
    cursor: pointer;
    z-index: 99;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}

.conLine1 {
    position: absolute;
    top: 75px;
    left: 120px;
    background: url(../img/testi/l1.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 320px;
    height: 160px;
    z-index: -1;
}

.clientImages .videoParent01 .contVideo {
    position: relative;
    width: 200px;
    height: 200px;
    background: #000;
    border-radius: 100%;
    box-shadow: 0 4px #00b9ff;
    overflow: hidden
}

.contVideo img,
.contVideo video {
    object-fit: cover;
    width: 100%;
    height: 100%
}

.clientImages .videoParent02 {
    position: absolute;
    cursor: pointer;
    right: 30px;
    top: 40%;
    z-index: 999;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}

.conLine2 {
    position: absolute;
    top: 125px;
    left: 140px;
    background: url(../img/testi/l2.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 80px;
    height: 230px;
    z-index: -1;
}

.clientImages .videoParent02 .contVideo {
    position: relative;
    width: 250px;
    height: 250px;
    background: #ff0707;
    border-radius: 100%;
    box-shadow: 0 4px #00b9ff;
    overflow: hidden
}

.clientImages .videoParent03 {
    position: absolute;
    cursor: pointer;
    right: 16%;
    bottom: 10%;
    z-index: 99999;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}

.clientImages .videoParent03 .contVideo {
    position: relative;
    width: 200px;
    height: 200px;
    background: #ff0707;
    border-radius: 100%;
    box-shadow: 0 4px #00b9ff;
    overflow: hidden
}

.conLine5 {
    position: absolute;
    bottom: 162px;
    left: 17px;
    background: url(../img/testi/l5.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100px;
    height: 160px;
    z-index: -1;
    transform: rotate(5deg);
}

.videoParent01:hover,
.videoParent02:hover,
.videoParent03:hover {
    transform: scale(1.1)
}

.imgParent01 {
    position: absolute;
    right: 11%;
    top: 32%;
    z-index: 999
}

.imgParent01 .contImg {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    box-shadow: 0 4px #00b9ff;
    overflow: hidden
}

.imgParent01 .contImg img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

.imgParent02 {
    position: absolute;
    right: 23%;
    top: 53%;
    z-index: 9
}

.imgParent02 .contImg {
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    box-shadow: 0 4px #00b9ff;
    overflow: hidden
}

.conLine7 {
    position: absolute;
    bottom: 70px;
    left: -38px;
    background: url(../img/testi/l5.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 90px;
    height: 140px;
    z-index: -1;
    transform: rotate(20deg);
}


.imgParent02 .contImg img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

.imgParent03 {
    position: absolute;
    right: 2%;
    top: 75%;
    z-index: 999;
}

.conLine4 {
    position: absolute;
    bottom: -30px;
    right: 80px;
    background: url(../img/testi/l4.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 300px;
    height: 100px;
    z-index: -9;
    transform: rotate(5deg);
}

.imgParent03 .contImg {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    box-shadow: 0 4px #00b9ff
}

.imgParent03 .contImg img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 100%
}

.modalVideo video {
    width: 100%;
    object-fit: cover
}

.btnPlay {
    width: 50px;
    height: 50px;
    border: 4px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.carouselServices {
    min-height: 500px
}

.carouselServices .carousel-indicators [data-bs-target] {
    display: none
}

.spin-container img {
    object-fit: cover;
    width: 100%
}

#drag-container img,
#drag-container video {
    object-fit: cover;
    width: 100%
}

.portfolioModal .modal-content {
    background-color: transparent !important;
    border: none !important
}

.btn-main {
    min-width: 140px;
    padding: 13px 25px;
    font-family: "Fjalla One", sans-serif;
    font-size: 19px !important;
    background: url(../img/decor/btn.png);
    /* box-shadow: 0 0 10px 1px #010449; */
    box-shadow: 0 0 10px 1px #FF0000;
    background-size: 100% 100%;
    color: #fff;
    text-transform: uppercase;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}

.btnscrollDown {
    background: 0 0;
    width: 40px;
    height: 60px;
    border-radius: 35px;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center
}

.btnscrollDown i {
    color: #ffffff7e;
    animation: 2s fadeDownCstm infinite
}
/* 
.scrollDown a {
    text-decoration: none;
    color: #fff;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}

.scrollDown a:hover {
    text-decoration: none;
    color: #482984;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
} */

.btn-scrollTop {
    width: 60px;
    height: 60px;
    border-radius: 100%;
    border: 1px solid #fff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center
}

.portfolio button.owl-prev {
    width: 50px;
    height: 50px;
    border-radius: 100% !important;
    /* background: #ab78fb !important; */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -70px;
    padding: 10px !important;
    /* box-shadow: 0 0 8px 5px #000da5; */
}
.portfolio button.owl-next {
    width: 50px;
    height: 50px;
    border-radius: 100% !important;
    /* background: #ab78fb !important; */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -70px;
    padding: 10px !important;
    /* box-shadow: 0 0 8px 5px #000da5; */
}

.owl-theme .owl-nav [class*=owl-]:hover{
    background: none !important;
    color: #ccc !important;
}
.owl-theme .owl-nav [class*=owl-]:hover{
    background: none !important;
    color: #ccc !important;
}

.owl-theme .owl-dots .owl-dot span {
    width: 13px;
    height: 13px;
    margin: 15px 7px;
    background: #ab78fb !important;;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity .2s ease;
    border-radius: 30px;
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{
    background: #8c47fc !important;
}

.circleTxt {
    position: absolute;
    bottom: 100px;
    right: 200px;
    width: 150px;
    height: 150px;
    opacity: .4;
    animation: 8s rotate infinite linear
}

.circleTxtPackage {
    position: absolute;
    bottom: 0;
    right: 30px;
    width: 200px;
    height: 200px;
    opacity: .4;
    animation: 8s rotate infinite linear
}

.circleTxtAbout {
    position: absolute;
    bottom: 10px;
    left: -75px;
    width: 150px;
    height: 150px;
    opacity: .4;
    animation: 8s rotate infinite linear
}

.circleTxtContact {
    position: absolute;
    top: 5%;
    right: 50px;
    width: 150px;
    height: 150px;
    opacity: .4;
    animation: 8s rotate infinite linear
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    background: url(../img/bg/menu.png);
    background-size: 100% 100%;
    overflow-x: hidden;
    transition: .5s;
    padding-top: 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.stroke-m {
    color: transparent;
    -webkit-text-fill-color: #ffffff00;
    -webkit-text-stroke-width: .5px;
    -webkit-text-stroke-color: #fff;
    text-transform: uppercase
}

/* .topBlackBar{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: #00000094;
    z-index: 9;
}
.bottomBlackBar{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: #00000094;
    z-index: 9;
} */

.portfolioCard{
    position: relative;
    width: 100%;
    min-height: 450px;
}

.portfolioCard img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}


.bgMenuCircle {
    width: 500px;
    height: 500px;
    /* background: #2c0055; */
    background: #FF0000;
    /* background: linear-gradient(148deg, rgb(78 0 151 / 73%) 50%, rgb(0 1 18 / 48%) 100%); */
    background: linear-gradient(148deg, rgba(255, 0, 0, 0.73) 50%, rgba(0, 1, 18, 0.48) 100%);
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(50%, 50%);
    z-index: -1;
    transition: none
}

.bgMenuCircle.init {
    animation: 1s bubble_init forwards
}

.bgMenuCircle.rendered {
    animation: 3s bubble infinite alternate-reverse
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    color: #fff;
    display: block;
    transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out
}

.sidenav a:hover {
    letter-spacing: 4px;
    text-shadow: 0 0 1px #fff;
    -webkit-text-fill-color: #ffffff00;
    -webkit-text-stroke-width: .5px;
    -webkit-text-stroke-color: #fff;
    transition: .2s ease-in-out;
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px
}

@media screen and (max-height:450px) {
    .sidenav {
        padding-top: 15px
    }

    .sidenav a {
        font-size: 18px
    }
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

.errorPage,
.thankyouPage {
    padding-top: 120px
}

.thankyouPage svg {
    width: 35% !important
}

.errorPage svg {
    width: 50% !important
}

.modal-body {
    overflow: hidden;
    padding: 0
}

.modal-body .btn-close {
    position: absolute;
    background-color: #319ce6;
    top: 0;
    right: 0;
    color: #fff;
    background-image: unset;
    padding: 0;
    width: 25px;
    height: 25px;
    font-size: 16px;
    opacity: 1;
    border-radius: 100%;
    border: 2px solid #00000005;
    z-index: 99
}

.modal-body .popupRightSide {
    padding: 30px
}

.modal-body textarea {
    resize: none
}

ul.dropdown-menu.show {
    width: 270px;
    border-radius: 0;
    background: #319de729;
    backdrop-filter: blur(11px)
}

ul.dropdown-menu.show li {
    padding: 9px 0;
    border-bottom: 1px solid #ffffff21
}

ul.dropdown-menu.show li:last-child {
    border-bottom: none !important
}

ul.dropdown-menu.show li a.dropdown-item {
    color: #fff
}

.dropdown-item:focus,
.dropdown-item:hover {
    background-color: #a01ca3;
    padding: 10px
}

.carouselServices .carousel-control-next i,
.carouselServices .carousel-control-prev i {
    color: #fff !important;
    font-size: 42px
}

.carouselServices .carousel-control-prev {
    position: absolute;
    left: -180px
}

.carouselServices .carousel-control-next {
    position: absolute;
    right: -150px
}

.main .owl-nav {
    position: absolute;
    right: 0;
    bottom: -80px;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}

.main button.owl-prev {
    padding: 20px !important;
    border: 1px solid #fff;
    min-width: 60px;
    min-height: 50px;
    font-family: "Fjalla One", sans-serif !important;
    font-size: 22px !important
}

.main button.owl-next {
    padding: 20px !important;
    border: 1px solid #fff;
    min-width: 60px;
    min-height: 50px;
    font-family: "Fjalla One", sans-serif !important;
    font-size: 22px !important
}

.owl-theme.main .owl-nav [class*=owl-]:hover {
    background: 0 0;
    border: 1px solid #fff;
    border-radius: 25px;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}

.portfolio1 button.owl-next {
    width: 70px;
    height: 70px;
    border: 1px solid #fff !important;
    border-radius: 100% !important;
    color: #fff !important;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}

.portfolio1 button.owl-prev {
    border: 1px solid transparent;
    padding: 10px 15px !important;
    min-height: 50px;
    border-radius: 8px !important;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}

.owl-theme.portfolio1 .owl-nav [class*=owl-]:hover {
    background: #ffffff00;
    color: #fff;
    text-decoration: none;
    background: #482984;
    box-shadow: 0 0 36px rgb(72 41 132);
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
    border: none !important
}

.owl-theme.portfolio1 .owl-nav {
    right: 0;
    position: absolute;
    bottom: 75px
}

.services .owl-stage-outer {
    padding: 150px 0
}

.services button.owl-dot span {
    background: #4c2480 !important;
    width: 15px !important;
    height: 15px !important
}

.services button.owl-dot.active span {
    background: #9747ff !important;
    width: 35px !important;
    height: 15px !important
}

.portfolio2 button.owl-next {
    width: 70px;
    height: 70px;
    border: 1px solid #fff !important;
    border-radius: 100% !important;
    color: #fff !important;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}

.portfolio2 button.owl-prev {
    border: 1px solid transparent;
    padding: 10px 15px !important;
    min-height: 50px;
    border-radius: 8px !important;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}

.owl-theme.portfolio2 .owl-nav [class*=owl-]:hover {
    background: #ffffff00;
    color: #fff;
    text-decoration: none;
    background: #482984;
    box-shadow: 0 0 36px rgb(72 41 132);
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
    border: none !important
}

.owl-theme.portfolio2 .owl-nav {
    left: 0;
    position: absolute;
    bottom: 0
}

.ourBlog button.owl-prev {
    width: 50px;
    height: 50px;
    border: 1px solid #fff !important;
    border-radius: 100% !important;
    margin-top: 20px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}

.ourBlog button.owl-prev:hover {
    background: #482984 !important;
    box-shadow: 0 0 36px rgb(72 41 132);
    border: 1px solid transparent !important;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}

.ourBlog button.owl-next {
    width: 50px;
    height: 50px;
    border: 1px solid #fff !important;
    border-radius: 100% !important;
    margin-top: 20px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}

.ourBlog button.owl-next:hover {
    background: #482984 !important;
    box-shadow: 0 0 36px rgb(72 41 132);
    border: 1px solid transparent !important;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s
}

.serviceHome .owl-item.active.center {
    transform: scale(1) translateY(-10px)
}

.serviceHome .owl-item.active {
    transform: scale(.8) translateY(50px)
}

.serviceHome button.owl-dot {
    margin-top: 100px
}

.serviceHome button.owl-dot span {
    background: #4c2480 !important;
    width: 15px !important;
    height: 15px !important
}

.serviceHome button.owl-dot.active span {
    background: #9747ff !important;
    width: 35px !important;
    height: 15px !important
}

.owl-carousel.services .owl-item.big div {
    transform: scale(.9) !important
}

.owl-carousel.services .owl-item.medium div {
    transform: scale(.7) !important
}

.owl-carousel.services .owl-item div {
    transform: scale(.6) !important;
    transition: .3s ease-in-out all;
    -moz-transition: .3s ease-in-out all;
    -webkit-transition: .3s ease-in-out all;
    -o-transition: .3s ease-in-out all
}

.services .owl-item.active.center {
    transform: scale(1)
}

.services .owl-item.medium {
    transform: translateY(-60px)
}

.services .owl-item {
    transform: translateY(-160px)
}

.serviceHome .owl-stage {
    padding: 60px 0
}

.sliderBody {
    min-height: 500px;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

#drag-container,
#spin-container {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: auto;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(-10deg);
    transform: rotateX(-10deg)
}

#drag-container img,
#drag-container video {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    line-height: 200px;
    font-size: 50px;
    text-align: center;
    -webkit-box-shadow: 0 0 8px #fff;
    box-shadow: 0 0 8px #fff;
    -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005)
}

#drag-container img:hover,
#drag-container video:hover {
    -webkit-box-shadow: 0 0 15px #fffd;
    box-shadow: 0 0 15px #fffd;
    -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0007)
}

#drag-container p {
    font-family: Serif;
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotateX(90deg);
    transform: translate(-50%, -50%) rotateX(90deg);
    color: #fff
}

#ground {
    width: 900px;
    height: 900px;
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotateX(90deg);
    transform: translate(-50%, -50%) rotateX(90deg);
    background: -webkit-radial-gradient(center center, farthest-side, #9993, transparent)
}

#music-container {
    position: absolute;
    top: 0;
    left: 0
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotateY(0);
        transform: rotateY(0)
    }

    to {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg)
    }
}

@keyframes spin {
    from {
        -webkit-transform: rotateY(0);
        transform: rotateY(0)
    }

    to {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg)
    }
}

@-webkit-keyframes spinRevert {
    from {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg)
    }

    to {
        -webkit-transform: rotateY(0);
        transform: rotateY(0)
    }
}

@keyframes spinRevert {
    from {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg)
    }

    to {
        -webkit-transform: rotateY(0);
        transform: rotateY(0)
    }
}

.ring,
.stage2 .img {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    user-select: none
}

.stage2 {
    overflow: hidden;
    background: #000;
    margin: 300px 0
}

.stage2 div,
.stage2 svg {
    position: absolute
}

.container2 {
    perspective: 2000px;
    width: 300px;
    height: 400px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.cursor {
    position: fixed;
    background-color: #fff;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    z-index: 1;
    transition: .3s cubic-bezier(.75, -1.27, .3, 2.33) transform, .2s cubic-bezier(.75, -.27, .3, 1.33) opacity;
    user-select: none;
    pointer-events: none;
    z-index: 10000;
    transform: scale(1)
}
.cursor.active {
    opacity: 1;
    transform: scale(0)
}

.cursor.menu-active {
    opacity: 1;
    transform: scale(0)
}

.cursor.hovered {
    opacity: 1
}

.cursor-follower {
    position: fixed;
    border: 1px solid #fff;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    z-index: 1;
    transition: .6s cubic-bezier(.75, -1.27, .3, 2.33) transform, .2s cubic-bezier(.75, -.27, .3, 1.33) opacity, .2s cubic-bezier(.75, -.27, .3, 1.33) background;
    user-select: none;
    pointer-events: none;
    z-index: 10000;
    transform: translate(2px, 2px)
}

.cursor-follower.active {
    opacity: 1;
    transform: scale(3)
}

.cursor-follower.menu-active {
    opacity: 1;
    transform: scale(3)
}

.cursor-follower.hovered {
    opacity: 1
}

.popupModal {
    cursor: zoom-in
}

.popupModal.zoomModal {
    cursor: zoom-out
}

.popupModal.zoomModal .abcClass {
    transform: scale(2);
    overflow-y: auto;
    transform-origin: top
}


#popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    padding: 20px;
    background: white;
    border-radius: 10px; /* Add border radius for rounded corners */
    text-align: center;
  }
  
  #popup p {
    font-size: 16px; /* Adjust the font size as desired */
    color: black; /* Set the text color to black */
    text-align: center; /* Align the text at the center */
  }
  
  #popup-ok {
    margin-top: 10px;
    background: linear-gradient(148deg, hsla(0, 100%, 50%, 0.73) 50%, rgba(0, 1, 18, 0.48) 100%);
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 4px; /* Add border radius for rounded corners */
    cursor: pointer;
    font-weight: bold; /* Make the "OK" text bold */
  }
  
  #popup-ok:hover {
    opacity: 0.8; /* Adjust the opacity for the hover effect */
  }

  #service option{
    color: rgb(92, 92, 92);
  }

  #service{
    -webkit-appearance: menulist-button;
  -moz-appearance: menulist-button;
  appearance: menulist-button;
  }