@charset "utf-8";

/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');

@font-face {
    font-family: 'helvetica';
    src: url('../fonts/Helvetica.woff');
}

/** BASIC CSS **/
:root {
    --color1: #41317C;
    --color2: #E65528;
    --color-bg1: #41317C;
    --color-bg2: #41317C;
    --color11: 18, 113, 255;
    --color22: 221, 74, 255;
    --color3: 100, 220, 255;
    --color4: 200, 50, 50;
    --color5: 180, 180, 50;
    --color-interactive: 140, 100, 255;
    --circle-size: 80%;
    --blending: hard-light;
}

* {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    height: auto;
    max-width: 100%;
    min-width: 100%;
    background: #ffffff;
    font-family: "Krona One", serif;
    font-size: 14px;
    line-height: 18px;
    color: #000;
    font-weight: normal;
    font-style: normal;
    overflow-x: hidden;
}

p {
    font-size: 15px;
    color: #848484;
    line-height: 23px;
    font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    /* font-family: "Krona One", serif; */
    color: #58468c;
}

a {
    text-decoration: none;
    outline: none;
    color: #4b5460;
}

:focus {
    outline: none;
}

a:focus {
    outline: none;
}

a:hover,
a:focus {
    color: #58468c;
    text-decoration: none;
}

hr {
    background: #e3e3e3;
    border-top: 1px solid #333;
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

::selection {
    text-shadow: none;
    background: #58468c;
    color: #fff;
}

::-moz-selection {
    text-shadow: none;
    background: #58468c;
    color: #fff;
}

a,
input,
select,
textarea,
img,
button,
.btn {
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

img {
    max-width: 100%;
    height: auto;
}

.clearfix {
    clear: both;
    font-size: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
}

.hidden {
    display: none !important;
}

.show {
    display: block !important;
}

.floatl {
    float: left;
}

.floatr {
    float: right;
}

.nopad {
    padding: 0 !important;
}

.nopadl {
    padding-left: 0;
}

.nopadr {
    padding-right: 0;
}

.btn:focus,
button:focus,
.form-control:focus {
    outline: 0;
    box-shadow: 0 0 0 0 transparent;
}


/** BASIC CSS END HERE **/

.site-wrap {
    padding: 20px;
    position: relative;
    width: 100%;
    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
}

header {
    position: fixed;
    top: 30px;
    left: 0;
    right: 0;
    z-index: 9999;
}

.head_container {
    width: 100%;
    height: 50px;
    padding: 4px 40px;
}

.logo {
    display: block;
    width: 50%;
    height: 100%;
}

.logo h1 {
    font-size: 29px;
    /* mix-blend-mode: difference; */
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.head_container.active .logo h1 {
    color: #58468c !important;
}

.fasLogo h1 {
    color: #58468c;
}

.secLogo h1 {
    color: #fff;
}

.thirLogo h1 {
    color: #58468c;
}

.lstLogo h1 {
    color: #fff;
}

.logo img {
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}

.collapse_btn {
    font-size: 27px;
    background-color: var(--color1);
    width: 40px;
    height: 40px;
    line-height: 41px;
    text-align: center;
    border-radius: 5px;
    color: #fff;
    padding: 8px 10px;
    -webkit-transition: .2s cubic-bezier(.02, .54, .58, 1);
    -o-transition: .2s cubic-bezier(.02, .54, .58, 1);
    transition: .2s cubic-bezier(.02, .54, .58, 1);
}

.collapse_btn:hover,
.collapse_btn:focus {
    background-color: #ff8a73;
    color: #fff;
}

.collapse_btn span {
    position: relative;
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
}

.collapse_btn span::before {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    position: absolute;
    top: -7px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
}

.collapse_btn span::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    position: absolute;
    bottom: -7px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
}

.active .collapse_btn {
    background-color: #ff8a73;
    color: #fff;
}

.active .collapse_btn span {
    background: transparent;
}

.active .collapse_btn span::before {
    transform: translate(0px, 8px) rotate(45deg);
}

.active .collapse_btn span::after {
    transform: translate(0px, -6px) rotate(308deg);
}

.navmenu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: -1;
    padding-top: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    opacity: 0;
    transform: translate(0px, -120%);
}

.navmenu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 93%;
    max-width: 1239px;
}

.navmenu ul li {
    transform: translateX(0%);
    opacity: 0;
}

@keyframes animation {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

.navmenu.open {
    opacity: 1;
    transform: translate(0px, 0%);
}

.navmenu.open ul li {
    animation: animation 0.6s ease forwards var(--i);
}

.navmenu ul li a {
    position: relative;
    font-size: 42px;
    line-height: 1.5em;
    font-family: "Krona One", serif;
    font-weight: 400;
    text-transform: uppercase;
    color: #58468c;
    display: block;
    padding-left: 0px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
}

.navmenu ul li a::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -30px;
    width: 10px;
    height: 10px;
    background: #58468c;
    border-radius: 50%;
    margin: auto;
    opacity: 0;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
}

.navmenu ul li a:hover {
    padding-left: 17px;
}

.navmenu ul li a:hover::before {
    left: 0px;
    opacity: 1;
}

.navmenu ul li ul.submenu {
    display: none;
}

.navmenu ul li ul.submenu li a {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    font-size: 19px;
    line-height: 30px;
    font-family: Nunito, sans-serif;
    font-weight: 300;
    color: #716c80;
    text-transform: capitalize;
    padding-left: 0px;
}

.navmenu ul li ul.submenu li a:hover {
    padding-left: 17px;
}

.navmenu ul li ul.submenu li a::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -30px;
    width: 8px;
    height: 8px;
    background: #ff8a73;
    border-radius: 50%;
    margin: auto;
    opacity: 0;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
}

.navmenu ul li ul.submenu li a:hover::before {
    left: 0px;
    opacity: 1;
}

.fullwidth_box {
    width: 100%;
    height: 100%;
    background: #333;
    border-radius: 15px;
    overflow: hidden;
}

.virtical_sowcase {
    width: 100%;
    height: 100%;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-image: url('../images/app-background.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

.svgmovement {
    position: absolute;
    top: 50%;
    left: auto;
    width: 144vw;
    height: 186%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transition: 1s .2s cubic-bezier(.88, .17, 0, .99);
    -o-transition: 1s .2s cubic-bezier(.88, .17, 0, .99);
    transition: 1s .2s cubic-bezier(.88, .17, 0, .99);
    will-change: transform;
}

.svgmovement.hidesvg {
    top: -20%;
}

.svgmovement.footersvg {
    /* top: -300%; */
    top: -20%;
}

.mobile_holder_frame {
    position: absolute;
    z-index: 1534;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: 1.2s .3s cubic-bezier(1, .12, .25, 1);
    -o-transition: 1.2s .3s cubic-bezier(1, .12, .25, 1);
    transition: 1.2s .3s cubic-bezier(1, .12, .25, 1);
    pointer-events: none;
    /* width: 40%; */
}

.mobile_holder_frame img {
    max-height: 1000px;
}

@media screen and (max-width: 1680px) {
    .mobile_holder_frame img {
        max-height: 700px;
    }

    .inner-site-wrap .mobile_holder_frame {
        left: 19%;
    }

    .inner-site-wrap .mobile_holder_frame img {
        max-height: 700px !important;
    }
}

@media screen and (max-width: 1366px) {
    .mobile_holder_frame img {
        max-height: 500px;
    }

    .inner-site-wrap .mobile_holder_frame {
        left: 16% !important;
    }

    .inner-site-wrap .mobile_holder_frame img {
        max-height: 600px !important;
    }
}

.mobile_holder_frame img {
    z-index: 123;
    position: relative;
}

.inner-frame {
    width: 51.2%;
    height: 67%;
    margin: 24% 0 0 25.7%;
    position: absolute;
    left: 0;
    top: 0;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -23;
    background: #f9e0de;
    overflow: hidden;
}

.mobile_holder_frame.lastslide {
    opacity: 0;
    -webkit-transform: translate(-50%, -300%);
    -ms-transform: translate(-50%, -300%);
    transform: translate(-50%, -300%);
    transition: .7s cubic-bezier(1, .12, .25, 1);
}

.movment_text.lastslide {
    opacity: 0;
    -webkit-transform: translate(-100%, -300%);
    -ms-transform: translate(-100%, -300%);
    transform: translate(-100%, -300%);
}

.movment_text {
    position: absolute;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    -webkit-transition: 1.2s .3s cubic-bezier(1, .12, .25, 1);
    -o-transition: 1.2s .3s cubic-bezier(1, .12, .25, 1);
    transition: 1.2s .3s cubic-bezier(1, .12, .25, 1);
}

.movment_text .info-top-left {
    width: auto;
    position: absolute;
    opacity: 0;
    top: 17%;
    left: 0%;
    /* opacity: 0; */
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 19px;
}

.movment_text .info-bottom-left {
    color: #640064;
    width: auto;
    position: absolute;
    opacity: 0;
    top: 19%;
    left: 0%;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    z-index: 1;
    display: flex;
    align-items: start;
    gap: 30px;
    flex-direction: column;
}

.movment_text.firstslide .info-top-left {
    opacity: 1;
    left: 70%;
}

.movment_text.firstslide .info-bottom-left {
    opacity: 1;
    left: 5%;
    width: 25%;
}

.movment_text.secondslide .info-top-left {
    opacity: 1;
    left: 70%;
    /* top: 68%; */
}

.movment_text.secondslide .info-bottom-left {
    opacity: 1;
    left: 5%;
    /* top: 26%; */
}

.movment_text.thirdslide .info-top-left {
    opacity: 1;
    left: 70%;
    /* top: 26%; */
}

.movment_text.thirdslide .info-bottom-left {
    opacity: 1;
    left: 5%;
    /* top: 68%; */
}

.movment_text .info-top-left .icont {
    /* position: absolute; */
    /* top: -11%; */
    /* left: -25%; */
    -webkit-transition: .5s .2s cubic-bezier(.61, .07, .25, 1);
    -o-transition: .5s .2s cubic-bezier(.61, .07, .25, 1);
    transition: .5s .2s cubic-bezier(.61, .07, .25, 1);
    display: flex;
    align-items: center;
    gap: 30px;
}

.movment_text .info-top-left .icont2 {
    /* position: absolute; */
    /* top: 50%; */
    /* left: -25%; */
    -webkit-transition: .5s .2s cubic-bezier(.61, .07, .25, 1);
    -o-transition: .5s .2s cubic-bezier(.61, .07, .25, 1);
    transition: .5s .2s cubic-bezier(.61, .07, .25, 1);
}

.movment_text .info-top-left .icont img,
.movment_text .info-top-left .icont2 img {
    max-width: 30px;
}

.movment_text .info-top-left .infotitle,
.movment_text .info-top-left .infotitle2,
.movment_text .info-top-left .infotitle3,
.movment_text .info-top-left .infotitle4 {
    /* font-family: "Krona One", serif; */
    font-size: 22px;
    font-weight: 500;
    color: #58468c;
    /* margin-bottom: 21px; */
    -webkit-transition: .5s .1s cubic-bezier(.61, .07, .25, 1);
    -o-transition: .5s .1s cubic-bezier(.61, .07, .25, 1);
    transition: .5s .1s cubic-bezier(.61, .07, .25, 1);
    line-height: normal;
}


.movment_text .info-top-left .infosubtitle {
    margin-top: 9px;
    font-size: 18px;
    font-weight: 300;
    line-height: 30px;
    color: #716c80;
    max-width: 250px;
    -webkit-transition: .5s cubic-bezier(.61, .07, .25, 1);
    -o-transition: .5s cubic-bezier(.61, .07, .25, 1);
    transition: .5s cubic-bezier(.61, .07, .25, 1);
}

.movment_text .info-bottom-left .infonumber {
    /* position: absolute; */
    /* top: 13%; */
    /* left: -25%; */
    /* font-family: "Krona One", serif; */
    font-size: 36px;
    font-weight: bold;
    margin-right: 0;
    -webkit-transition: .5s .1s cubic-bezier(.61, .07, .25, 1);
    -o-transition: .5s .1s cubic-bezier(.61, .07, .25, 1);
    transition: .5s .1s cubic-bezier(.61, .07, .25, 1);
    line-height: normal;
    display: none;
}

.movment_text .info-bottom-left .infotext {
    display: inline-block;
    /* font-family: "Krona One", serif; */
    font-size: 62px;
    font-weight: bold;
    line-height: normal;
    /* max-width: 250px; */
    -webkit-transition: .5s cubic-bezier(.61, .07, .25, 1);
    -o-transition: .5s cubic-bezier(.61, .07, .25, 1);
    transition: .5s cubic-bezier(.61, .07, .25, 1);
}

.movment_text .info-bg-text {
    font-family: "Krona One", serif;
    font-size: 250px;
    font-weight: 700;
    color: rgba(0, 0, 0, .37);
    letter-spacing: -.03em;
    display: inline-block;
    line-height: 1em;
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    margin-left: 0%;
    top: 60%;
    /* z-index: -1; */
}

.movment_text .info-bg-text .text-placeholder {
    visibility: hidden;
}

.movment_text .info-bg-text .bg-text-content {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
}

.movment_text .info-bg-text .bg-text-content span.tshow {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: 1s cubic-bezier(.18, .12, 0, .93);
    -o-transition: 1s cubic-bezier(.18, .12, 0, .93);
    transition: 1s cubic-bezier(.18, .12, 0, .93);
}

.movment_text .info-bg-text .bg-text-content span {
    display: inline-block;
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}

.movment_text .info-bottom-center {
    position: absolute;
    bottom: 38px;
    left: 0;
    right: 0;
    z-index: 1500;
    margin: auto;
    text-align: center;
    opacity: 1;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}

.lastslide .info-bottom-center {
    opacity: 0;
}

.movment_text .info-bottom-center a {
    position: relative;
    display: inline-block;
    width: 143px;
    height: 45px;
    margin: 0 5px;
    -webkit-transition: .5s cubic-bezier(.61, .07, .25, 1);
    -o-transition: .5s cubic-bezier(.61, .07, .25, 1);
    transition: .5s cubic-bezier(.61, .07, .25, 1);
}

.movment_text .info-bottom-center a img {
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}

.swiper-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.swiper-container .slider {
    min-height: 50vh;
}

.swiper-container .slider .swiper-slide {
    background: transparent;
    overflow: hidden;
    position: relative;
    height: 100%;
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-container .slider .swiper-slide .slide-inner {
    position: absolute;
    width: 100%;
    height: 88%;
    left: 0;
    top: 0;
}

.swiper-container .slider .swiper-slide:nth-child(1) .slide-inner,
.swiper-container .slider .swiper-slide:nth-child(2) .slide-inner,
.swiper-container .slider .swiper-slide:nth-child(3) .slide-inner {
    cursor: pointer;
}

.swiper-container .slider .swiper-slide .slide-inner img {
    /* position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto; */
}

.swiper-pagination-bullet {
    display: block;
    width: 10px;
    height: 10px;
    background: #7aa0ff;
    margin-bottom: 20px;
    opacity: 1;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    cursor: pointer;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #ff8a73;
}

.swiper-pagination {
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 100vh;
    position: fixed;
    z-index: 3;
    right: 42px !important;
    top: 100vh !important;
    bottom: 0 !important;
    margin: auto;
    opacity: 1;
}

.swiper-pagination span {
    margin-bottom: 3em;
    font-family: "Montserrat", sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.07em;
    color: #000;
}

.swiper-pagination span:focus {
    outline: none;
}

.invisibleSlide .swiper-wrapper {
    /* z-index: 0; */
}


/* .invisibleSlide .conslide .slide-inner {} */

.slidercontents {
    display: none;
}

.mobscreen .swiper-slide.swiper-slide-prev {
    opacity: 0.6;
}

.mobscreen .swiper-slide.swiper-slide-active {
    opacity: 1;
}

.mobscreen .swiper-slide.swiper-slide-next {
    opacity: 0.6;
}

.contactPage {
    background: #1d1341 !important;
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-form {
    background: #fff;
    width: 90%;
    height: 90%;
    max-width: 1300px;
    border-radius: 24px;
    background-image: url(../images/app-landing-home-contact-background.jpg);
    background-position: center 100%;
    background-size: cover;
    max-height: 73vh;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    padding: 6vh;
    -webkit-transform: translateY(120%);
    -ms-transform: translateY(120%);
    transform: translateY(120%);
    -webkit-transition: 1.2s .3s cubic-bezier(1, .12, .25, 1);
    -o-transition: 1.2s .3s cubic-bezier(1, .12, .25, 1);
    transition: 1.2s .3s cubic-bezier(1, .12, .25, 1);
}

.swiper-slide.swiper-slide-active .contact-form {
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
}

.contact-form h1 {
    font-size: 45px;
    line-height: 1.22em;
    color: #58468c;
    font-weight: 400;
    margin: 0 0 34px;
}

.form_box {
    max-width: 640px;
    margin: 0 auto;
}

.contact-form .form-control {
    position: relative;
    width: 100%;
    margin: 0 0 20px;
    padding: 14px 30px;
    font-family: "Krona One", serif;
    font-size: 11px;
    line-height: 20px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .125em;
    color: #807d78;
    background-color: #f5f9ff;
    border: 0;
    border-radius: 8px;
    outline: 0;
    -webkit-appearance: none;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: border-color .2s cubic-bezier(.02, .54, .58, 1);
    -o-transition: border-color .2s cubic-bezier(.02, .54, .58, 1);
    transition: border-color .2s cubic-bezier(.02, .54, .58, 1);
}

.btn_common {
    font-size: 12px;
    padding-top: 0;
    padding-bottom: 0;
    height: 50px;
    line-height: 50px;
    padding-left: 59px;
    padding-right: 59px;
    webkit-transition: box-shadow .35s cubic-bezier(.02, .54, .58, 1);
    -webkit-transition: -webkit-box-shadow .35s cubic-bezier(.02, .54, .58, 1);
    transition: -webkit-box-shadow .35s cubic-bezier(.02, .54, .58, 1);
    -o-transition: box-shadow .35s cubic-bezier(.02, .54, .58, 1);
    transition: box-shadow .35s cubic-bezier(.02, .54, .58, 1);
    transition: box-shadow .35s cubic-bezier(.02, .54, .58, 1), -webkit-box-shadow .35s cubic-bezier(.02, .54, .58, 1);
    background-color: var(--color2) !important;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    max-width: 148px;
    margin: 0;
    font-family: "Krona One", serif;
    font-size: 11px;
    line-height: 2em;
    letter-spacing: .125em;
    border-radius: 3em;
    font-weight: 500;
    text-transform: uppercase;
    outline: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: color .2s cubic-bezier(.02, .54, .58, 1), background-color .2s cubic-bezier(.02, .54, .58, 1), border-color .2s cubic-bezier(.02, .54, .58, 1);
    -o-transition: color .2s cubic-bezier(.02, .54, .58, 1), background-color .2s cubic-bezier(.02, .54, .58, 1), border-color .2s cubic-bezier(.02, .54, .58, 1);
    transition: color .2s cubic-bezier(.02, .54, .58, 1), background-color .2s cubic-bezier(.02, .54, .58, 1), border-color .2s cubic-bezier(.02, .54, .58, 1);
    padding: 12px 37px;
    font-size: 12px;
    color: #fff;
    background-color: #ff8a73;
    border: 1px solid transparent;
    cursor: pointer;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}

.btn_common:hover,
.btn_common:focus {
    outline: 0;
    color: #fff;
    border: 1px solid transparent;
    background-color: #ff8a73;
    -webkit-box-shadow: 0 10px 25px 0 rgba(255, 138, 115, .5);
    box-shadow: 0 10px 25px 0 rgba(255, 138, 115, .5);
}


/*--------------inner page----------*/

.inner-site-wrap {
    padding: 0px;
    position: relative;
    width: 100%;
    height: 100vh;
}

.no-redius {
    border-radius: 0 !important;
}

/*.inner-site-wrap .virtical_sowcase {
       background: #433184;
}
*/
.inner-site-wrap .mobile_holder_frame {
    left: 16% !important;
    width: 27%;
}

.inner-site-wrap .mobile_holder_frame img {
    max-height: 880px;
}

.mob-inner-frame {
    width: 51.2%;
    height: 67%;
    margin: 24% 0 0 25.7%;
    position: absolute;
    left: 0;
    top: 0;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -23;
    background: #f9e0de;
    overflow: hidden;
}

.swiper-container2 {
    width: 100%;
    height: 100%;
    position: relative;
}

.swiper-container2 .slider {
    min-height: 50vh;
}

.swiper-container2 .slider .swiper-slide {
    background: transparent;
    overflow: hidden;
    position: relative;
    height: 100%;
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-container2 .slider .swiper-slide .slide-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.text_ontent_movment {
    width: 33%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 1534;
    top: 0%;
    left: 31%;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeOutTop;
    -webkit-transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
    -webkit-transition: 1.2s .3s cubic-bezier(1, .12, .25, 1);
    -o-transition: 1.2s .3s cubic-bezier(1, .12, .25, 1);
    transition: 1.2s .3s cubic-bezier(1, .12, .25, 1);
    pointer-events: none;
}

.content_img_movement {
    width: 27%;
    height: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    z-index: 1534;
    top: 0%;
    left: 67%;
    pointer-events: none;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeOutTop;
    -webkit-transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
    -webkit-transition: 1.2s .3s cubic-bezier(1, .12, .25, 1);
    -o-transition: 1.2s .3s cubic-bezier(1, .12, .25, 1);
    transition: 1.2s .3s cubic-bezier(1, .12, .25, 1);
    pointer-events: none;
}

.list_contet {
    /* max-width: 490px; */
    pointer-events: none;
}

.list_contet h1 {
    margin-bottom: 25px;
    font-weight: bold;
    color: #ff9a86;
}

.list_contet ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.list_contet ul li {
    display: flex;
    align-items: center;
    color: white;
    font-size: 16px;
    margin-bottom: 0;
}

.list_contet ul li img {
    width: 22px;
    margin-right: 10px;
    filter: brightness(125.5);
}

.logo-white .logo img {
    filter: brightness(125.5);
}

.logo-white .logo.toollogo img {
    filter: brightness(1);
}

.clienttlebx h2 {
    color: white;
}

.list_contet ul li h4 {
    color: white;
    font-size: 18px;
    margin: 0;
}

.list_contet .subul {
    padding-left: 30px;
    margin-top: 22px;
}

.img_con {
    position: relative;
    width: 100%;
    height: 70%;
    margin: auto;
    pointer-events: none;
}

.img_con .img-bk {
    position: absolute;
    top: -20%;
    left: 0;
    z-index: 1;
    width: 140%;
    height: 140%;
    object-fit: contain;

}

.img_con .rt-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

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

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

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

@keyframes moveVertical {
    0% {
        transform: translateY(-50%);
    }

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

    100% {
        transform: translateY(-50%);
    }
}

@keyframes moveHorizontal {
    0% {
        transform: translateX(-50%) translateY(-10%);
    }

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

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


.gradient-bg {
    width: 100vw;
    height: 100vh;
    position: fixed;
    overflow: hidden;
    background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));
    top: 0;
    left: 0;
    display: none;

    svg {
        display: none;
    }


    .gradients-container {
        filter: url(#goo) blur(40px);
        width: 100%;
        height: 100%;
    }

    .g1 {
        position: absolute;
        background: radial-gradient(circle at center, #ef9478ad 0, #ef947800 50%) no-repeat;
        mix-blend-mode: var(--blending);
        width: var(--circle-size);
        height: var(--circle-size);
        top: calc(50% - var(--circle-size) / 2);
        left: calc(50% - var(--circle-size) / 2);
        transform-origin: center center;
        animation: moveVertical 30s ease infinite;
        opacity: 1;
    }

    .g2 {
        position: absolute;
        background: radial-gradient(circle at center, #b9654a9c 0, #b9654a00 50%) no-repeat;
        mix-blend-mode: var(--blending);
        width: var(--circle-size);
        height: var(--circle-size);
        top: calc(50% - var(--circle-size) / 2);
        left: calc(50% - var(--circle-size) / 2);
        transform-origin: calc(50% - 400px);
        animation: moveInCircle 20s reverse infinite;
        opacity: 1;
    }

    .g3 {
        position: absolute;
        background: radial-gradient(circle at center, #af46249e 0, #af462400 50%) no-repeat;
        mix-blend-mode: var(--blending);
        width: var(--circle-size);
        height: var(--circle-size);
        top: calc(50% - var(--circle-size) / 2 + 200px);
        left: calc(50% - var(--circle-size) / 2 - 500px);
        transform-origin: calc(50% + 400px);
        animation: moveInCircle 40s linear infinite;
        opacity: 1;
    }

    .g4 {
        position: absolute;
        background: radial-gradient(circle at center, #a7290094 0, #a7290000 50%) no-repeat;
        mix-blend-mode: var(--blending);
        width: var(--circle-size);
        height: var(--circle-size);
        top: calc(50% - var(--circle-size) / 2);
        left: calc(50% - var(--circle-size) / 2);
        transform-origin: calc(50% - 200px);
        animation: moveHorizontal 40s ease infinite;
        opacity: 0.7;
    }

    .g5 {
        position: absolute;
        background: radial-gradient(circle at center, #e339028c 0, #e3390200 50%) no-repeat;
        mix-blend-mode: var(--blending);
        width: calc(var(--circle-size) * 2);
        height: calc(var(--circle-size) * 2);
        top: calc(50% - var(--circle-size));
        left: calc(50% - var(--circle-size));
        transform-origin: calc(50% - 800px) calc(50% + 200px);
        animation: moveInCircle 20s ease infinite;
        opacity: 1;
    }

    .interactive {
        position: absolute;
        background: radial-gradient(circle at center, rgb(227 140 8 / 80%) 0, rgb(255 177 100 / 0%) 50%) no-repeat;
        mix-blend-mode: var(--blending);
        width: 100%;
        height: 100%;
        top: -50%;
        left: -50%;
        opacity: 0.7;
    }
}

@keyframes fadeOutTop {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translateY(-100%);
    }
}

@keyframes fadeInTop {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

    to {
        opacity: 1;
        transform: translateY(0%);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        /* transform: translateY(100%); */
    }

    to {
        opacity: 1
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1
    }
}

@keyframes fadeOutBottom {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translateY(-100%);
    }
}

@keyframes MoveUpDown {

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

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

.text_ontent_movment.firstslide {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeIn;
}

.content_img_movement.firstslide {
    animation-duration: 1.2s;
    animation-fill-mode: both;
    animation-name: fadeIn;
}

.text_ontent_movment.secondslide {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeIn;
}

.content_img_movement.secondslide {
    animation-duration: 1.2s;
    animation-fill-mode: both;
    animation-name: fadeIn;
}

.text_ontent_movment.thirdslide {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeIn;
}

.content_img_movement.thirdslide {
    animation-duration: 1.2s;
    animation-fill-mode: both;
    animation-name: fadeIn;
}

.text_ontent_movment.fourthslide {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeIn;
}

.content_img_movement.fourthslide {
    animation-duration: 1.2s;
    animation-fill-mode: both;
    animation-name: fadeIn;
}

.text_ontent_movment.fifthslide {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeIn;
}

.content_img_movement.fifthslide {
    animation-duration: 1.2s;
    animation-fill-mode: both;
    animation-name: fadeIn;
}

.text_ontent_movment.sixthslide {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeIn;
}

.content_img_movement.sixthslide {
    animation-duration: 1.2s;
    animation-fill-mode: both;
    animation-name: fadeIn;
}

.text_ontent_movment.sevenslide {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeIn;
}

.content_img_movement.sevenslide {
    animation-duration: 1.2s;
    animation-fill-mode: both;
    animation-name: fadeIn;
}

.text_ontent_movment.lastslide {
    animation-duration: .1s;
    animation-fill-mode: both;
    animation-name: fadeIn;
    -webkit-transform: translate(0%, -100%);
    -ms-transform: translate(0%, -100%);
    transform: translate(0%, -100%);
    transition: .7s cubic-bezier(1, .12, .25, 1);
}

.content_img_movement.lastslide {
    animation-duration: .1s;
    animation-fill-mode: both;
    animation-name: fadeIn;
    -webkit-transform: translate(0%, -100%);
    -ms-transform: translate(0%, -100%);
    transform: translate(0%, -100%);
    transition: .7s cubic-bezier(1, .12, .25, 1);
}

.content_img_movement.firstslide .img_con .rt-img,
.content_img_movement.secondslide .img_con .rt-img,
.content_img_movement.thirdslide .img_con .rt-img,
.content_img_movement.fourthslide .img_con .rt-img,
.content_img_movement.fifthslide .img_con .rt-img,
.content_img_movement.sixthslide .img_con .rt-img,
.content_img_movement.sevenslide .img_con .rt-img,
.content_img_movement.lastslide .img_con .rt-img {
    animation: MoveUpDown 5s linear infinite;
}

.text_ontent_movment.firstslide .list_contet h1,
.text_ontent_movment.secondslide .list_contet h1,
.text_ontent_movment.thirdslide .list_contet h1,
.text_ontent_movment.fourthslide .list_contet h1,
.text_ontent_movment.fifthslide .list_contet h1,
.text_ontent_movment.sixthslide .list_contet h1,
.text_ontent_movment.sevenslide .list_contet h1,
.text_ontent_movment.lastslide .list_contet h1 {
    animation-duration: 1.2s;
    animation-fill-mode: both;
    animation-name: fadeInLeft;
}

.text_ontent_movment.firstslide .list_contet ul,
.text_ontent_movment.secondslide .list_contet ul,
.text_ontent_movment.thirdslide .list_contet ul,
.text_ontent_movment.fourthslide .list_contet ul,
.text_ontent_movment.fifthslide .list_contet ul,
.text_ontent_movment.sixthslide .list_contet ul,
.text_ontent_movment.sevenslide .list_contet ul,
.text_ontent_movment.lastslide .list_contet ul {
    animation-duration: 1.5s;
    animation-fill-mode: both;
    animation-name: fadeInLeft;
}

.clientlebox {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeOutBottom;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
}

.swiper-slide.swiper-slide-active .clientlebox {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeInTop;
}

.clienttlebx {
    width: 100%;
    height: auto;
    opacity: 0;
    -webkit-transform: translate(0%, 100%);
    -ms-transform: translate(0%, 100%);
    transform: translate(0%, 100%);
    -webkit-transition: 1.2s .3s cubic-bezier(1, .12, .25, 1);
    -o-transition: 1.2s .3s cubic-bezier(1, .12, .25, 1);
    transition: 1.2s .3s cubic-bezier(1, .12, .25, 1);
}

.swiper-slide.swiper-slide-active .clientlebox .clienttlebx {
    opacity: 1;
    -webkit-transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
    -webkit-transition: 1.2s .3s cubic-bezier(1, .12, .25, 1);
    -o-transition: 1.2s .3s cubic-bezier(1, .12, .25, 1);
    transition: 1.2s .3s cubic-bezier(1, .12, .25, 1);
}

.layout-type {
    position: relative;
    padding-left: 36px;
}

.site-demo-page .mobile-bx,
.site-demo-page .demobox {
    margin-bottom: 50px;
}

.mobile-bx,
.demobox {
    display: block;
}

.layout-type .media {
    border: 5px solid #1e1d23;
    border-radius: 10px;
    overflow: hidden;
    background: #f5f5f5;
    height: 450px;
}

.site-demo-page .demobox .demo-page {
    -webkit-transition: -webkit-transform 10s ease-in;
    transition: -webkit-transform 10s ease-in;
    transition: transform 10s ease-in;
    transition: transform 10s ease-in, -webkit-transform 10s ease-in;
}

.site-demo-page .demo-page {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    overflow: hidden;
    margin-bottom: 0;
}

.demo-page {
    border-radius: 6px;
    margin-bottom: 30px;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
}

.site-demo-page .demobox .demo-page img {
    -webkit-transition: -webkit-transform 10s ease-in;
    transition: -webkit-transform 10s ease-in;
    transition: transform 10s ease-in;
    transition: transform 10s ease-in, -webkit-transform 10s ease-in;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    height: auto;
    min-height: 100%;
}

.site-demo-page .demobox:hover .demo-page img {
    -webkit-transform: translateY(calc(-100% + 450px));
    transform: translateY(calc(-100% + 450px));
    -webkit-transition: -webkit-transform 10s ease-in;
    transition: -webkit-transform 10s ease-in;
    transition: transform 10s ease-in;
    transition: transform 10s ease-in, -webkit-transform 10s ease-in;
}

.layout-type.tab .media img {
    width: 650px;
}

.layout-type.phone .media img {
    width: 210px;
}

.layout-type .media img {
    height: 440px;
    object-fit: cover;
    object-position: top;
}

.inner-portfolio .item img {
    transform-style: inherit;
}

.layout-type .dz-title {
    position: absolute;
    background: #1e1d23;
    left: 0;
    top: 40px;
    writing-mode: vertical-lr;
    color: #fff;
    text-transform: uppercase;
    width: 40px;
    padding: 20px 5px;
    border-radius: 6px 0 0 6px;
    font-weight: 600;
}

.adminActions {
    position: fixed;
    bottom: 35px;
    right: 35px;
    z-index: 9999;
}

.adminButton {
    height: 60px;
    width: 60px;
    background-color: #000000cc;
    border-radius: 50%;
    display: block;
    color: #fff;
    text-align: center;
    position: relative;
    z-index: 1;
    font-size: 29px;
    line-height: 2.1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.adminButton img {
    width: 35px;
}

.adminButtons {
    position: absolute;
    width: 100%;
    bottom: 120%;
    text-align: center;
}

.adminButtons a {
    display: block;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    text-decoration: none;
    margin: 10px auto 0;
    line-height: 2.2;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    position: relative;
    box-shadow: 0 0 5px 1px rgba(51, 51, 51, 0.3);
    font-size: 21px;
}

.adminButtons a:hover {
    transform: scale(1.05);
}

.adminButtons a:nth-child(1) {
    background-color: #ff5722;
    transition: opacity 0.2s ease-in-out 0.3s, transform 0.15s ease-in-out;
}

.adminButtons a:nth-child(2) {
    background-color: #03a9f4;
    transition: opacity 0.2s ease-in-out 0.25s, transform 0.15s ease-in-out;
}

.adminButtons a:nth-child(3) {
    background-color: #f44336;
    transition: opacity 0.2s ease-in-out 0.2s, transform 0.15s ease-in-out;
}

.adminButtons a:nth-child(4) {
    background-color: #4caf50;
    transition: opacity 0.2s ease-in-out 0.15s, transform 0.15s ease-in-out;
}

.adminToggle {
    -webkit-appearance: none;
    position: absolute;
    border-radius: 50%;
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background-color: transparent;
    border: none;
    outline: none;
    z-index: 2;
    transition: box-shadow 0.2s ease-in-out;
    box-shadow: 0 3px 5px 1px rgba(51, 51, 51, 0.3);
}

.adminToggle:hover {
    box-shadow: 0 3px 6px 2px rgba(51, 51, 51, 0.3);
}

.adminToggle:checked~.adminButtons a {
    opacity: 1;
    visibility: visible;
}

.adminButton .fa {
    -webkit-animation: spin 5.5s infinite;
    animation: spin 5.5s infinite;
}

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

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

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

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

.swiper-container3,
.swiper-container4 {
    width: 100%;
    height: 100%;
    position: relative;
}

.swiper-container3 .slider,
.swiper-container4 .slider {
    min-height: 50vh;
}

.swiper-container3 .slider .swiper-slide,
.swiper-container4 .slider .swiper-slide {
    background: transparent;
    overflow: hidden;
    position: relative;
    height: 100%;
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-container3 .slider .swiper-slide .slide-inner,
.swiper-container4 .slider .swiper-slide .slide-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.footer_slide1 {
    background: #f0f0f0 !important;
}

.footer_slide2 {
    background: #1d1341 !important;
}

.fullwidthfooter {
    height: 100% !important;
    display: flex;
    align-items: center;
    padding: 10vh 20px;
    width: 100% !important;
    justify-content: center;
}

.tab_mode_design {
    width: 100%;
    -webkit-transform: translateY(180%);
    -ms-transform: translateY(180%);
    transform: translateY(180%);
    -webkit-transition: 1.2s .3s cubic-bezier(1, .12, .25, 1);
    -o-transition: 1.2s .3s cubic-bezier(1, .12, .25, 1);
    transition: 1.2s .3s cubic-bezier(1, .12, .25, 1);
}

.swiper-slide.swiper-slide-active .tab_mode_design {
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
}

.icons_footer_tab {
    width: 100%;
}

.icons_footer_tab img {
    display: none;
    position: relative !important;
}

.icons_footer_tab img.active {
    display: block;
}

.icons_footer_tab img {
    animation: MoveUpDown 5s linear infinite;
}

.footer_menutab {
    display: flex;
    align-items: center;
    width: 100%;
}

.footer_menutab .tab_item {
    flex: .4 1;
    width: 90px;
    height: 360px;
    background-size: cover;
    margin: 15px;
    background: var(--color1);
    box-shadow: 0 -3px 0 var(--color2);
    border-radius: 30px;
    padding: 50px;
    position: relative;
    transition: .5s;
}

.footer_menutab .tab_item.active {
    flex: 7 1;
}

.tab_no {
    font-weight: 700;
    font-size: 26px;
    line-height: 28px;
    color: #fff;
    margin-left: -7px;
    position: relative;
    transition: .6s;
}

.tabtitle {
    width: 200px;
    transform: rotate(90deg) translate(90px, 88px);
    font-weight: 500;
    font-size: 22px;
    line-height: 20px;
    color: #fff;
    opacity: .7;
    margin-bottom: 0;
    transition: .6s;
}

.tablinepage {
    text-align: left;
    margin-top: 40px;
    transition: .6s;
    opacity: 0;
    display: none;
    transition: .6s;
}

.tablinepage a {
    color: #fff;
    background: var(--color2);
    padding: 17px 30px;
    display: inline-block;
    border-radius: 10px;
}

.footer_menutab .tab_item.active .tab_no {
    font-size: 52px;
    transition-delay: .6s;
    text-align: left;
    margin-left: 0px;
}

.footer_menutab .tab_item.active .tabtitle {
    width: 100%;
    transform: rotate(0deg) translate(0px, 0px);
    font-size: 30px;
    text-align: left;
    margin-top: 30px;
    text-align: left;
}

.footer_menutab .tab_item ul {
    opacity: 0;
    display: none;
    margin-top: 22px;
    padding-left: 23px;
}

.footer_menutab .tab_item ul li {
    text-align: left;
    color: white;
    font-size: 15px;
    line-height: 28px;
    position: relative;
}

.footer_menutab .tab_item ul li::before {
    content: '';
    position: absolute;
    left: -22px;
    top: 8px;
    width: 10px;
    height: 10px;
    border: 1px solid #e65528;
    border-radius: 50px;

}

.footer_menutab .tab_item.active .tablinepage,
.footer_menutab .tab_item.active ul {
    opacity: 1;
    display: block;
}

.footer_icons {
    padding-top: 170px;
    padding-bottom: 150px;
    position: relative;
    text-align: center !important;
    -webkit-transform: translateY(180%);
    -ms-transform: translateY(180%);
    transform: translateY(180%);
    -webkit-transition: 1.2s .3s cubic-bezier(1, .12, .25, 1);
    -o-transition: 1.2s .3s cubic-bezier(1, .12, .25, 1);
    transition: 1.2s .3s cubic-bezier(1, .12, .25, 1);
}

.swiper-slide.swiper-slide-active .footer_icons {
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
}

.circle_box {
    display: inline-block;
    position: relative;
    position: relative;
    z-index: 2;
    /* transform: translate(-50px, 0px); */
}

.center_box {
    display: inline-block;
    position: relative;
    z-index: 3;
    background: #ffffff;
    border-radius: 100px;
    padding: 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .1);
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.center_box img {
    /* border-radius: 50%; */
    /* box-shadow: 0 20px 60px rgba(0, 0, 0, .1); */
    /* border-radius: 100px; */
    width: 86px;
    /* padding: 25px; */
    /* background: white; */
    /* height: 135px; */
}

.line_div {
    position: absolute;
    text-align: center;
    display: inline-block;
    transform-origin: right center;
    height: 1px;
    width: 270px;
    background-color: #aee87c;
}

.circle_dotted {
    position: absolute;
    left: 0%;
    top: 0%;
    text-align: center;
    display: inline-block;
    transform-origin: right center;
    height: 1px;
    width: 100%;
    background-color: #aee87c;
    transform: translate(0%) rotate(0deg);
}

.circle_dotted:after {
    position: absolute;
    content: "";
    width: 7px;
    height: 7px;
    background-color: #aee87c;
    border-radius: 50%;
    top: -3px;
    right: 0;
    animation: circle-animation 30s linear infinite;
}

@keyframes circle-animation {
    from {
        right: 0
    }

    50% {
        right: 100%
    }

    to {
        right: 0
    }
}

.line_div span {
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%) rotate(18deg);
}

.line_div span img {
    width: 70px !important;
}

.line_method__line1 {
    top: 69%;
    left: -83%;
    transform: translate(-50%) rotate(343deg);
}

.line_method__line1 span {
    transform: translateY(-50%) rotate(17deg);
}

.line_method__line2 {
    top: 30%;
    left: -80%;
    transform: translate(-50%) rotate(12deg);
}

.line_method__line2 span {
    transform: translateY(-50%) rotate(-13deg);
}

.line_method__line3 {
    top: 10%;
    left: -49%;
    transform: translate(-50%) rotate(52deg);
}

.line_method__line3 span {
    transform: translateY(-50%) rotate(-51deg);
}

.line_method__line4 {
    top: 10%;
    left: -18%;
    transform: translate(-50%) rotate(109deg);
    width: 260px;
}

.line_method__line4 span {
    transform: translateY(-50%) rotate(-108deg);
}

.line_method__line5 {
    top: 30%;
    left: -28%;
    transform: translate(-50%) rotate(154deg);
    width: 340px;
}

.line_method__line5 span {
    transform: translateY(-50%) rotate(-156deg);
}

.line_method__line6 {
    top: 48%;
    left: -18%;
    transform: translate(-50%) rotate(174deg);
    width: 330px;
}

.line_method__line6 span {
    transform: translateY(-50%) rotate(-174deg);
}

.line_method__line7 {
    top: 72%;
    left: -13%;
    transform: translate(-50%) rotate(200deg);
    width: 300px;
}

.line_method__line7 span {
    transform: translateY(-50%) rotate(-200deg);
}

.line_method__line8 {
    top: 96%;
    left: -8%;
    transform: translate(-50%) rotate(238deg);
    width: 230px;
}

.line_method__line8 span {
    transform: translateY(-50%) rotate(-240deg);
}

.line_method__line9 {
    top: 96%;
    left: -46%;
    transform: translate(-50%) rotate(299deg);
    width: 230px;
}

.line_method__line9 span {
    transform: translateY(-50%) rotate(60deg);
}

.st {
    transform: scale(2);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1d1341 !important;
    z-index: 9999;
}

.scroll {
    fill: #A9D1FF;
}

.scroll .masked {
    mask: url(#myMask1);
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #2270EE, #2270EE);
    background-color: #A9D1FF;
    border-radius: 4px;
    background-size: 20%;
    background-repeat: repeat-y;
    background-position: -25% 0;
    animation: scroll 1.2s ease-in-out infinite;
}

#loader {
    text-align: center;
}

#percent {
    color: white;
}

.determinate {
    margin: 15px;
}

.determinate .masked {
    mask-image: url("../images/concloud C.png");
    width: 69px;
    height: 60px;
    background: var(--color2);
    animation: determinate 3s ease infinite;
}

.st p {

    font-size: 8px;

    line-height: 2;
}

.st p span {

    color: #e65528;
}

@keyframes scroll {
    50% {
        background-size: 80%;
    }

    100% {
        background-position: 125% 0;
    }
}

@keyframes determinate {

    0%,
    10% {
        width: 0;
    }

    40% {
        width: 20%;
    }

    60% {
        width: 65%;
    }

    90%,
    100% {
        width: calc(100% + 6px);
    }
}

.secLogo img,
.lstLogo img {
    filter: brightness(21.5);
}

.inner-portfolio.owl-carousel .owl-nav button.owl-next,
.inner-portfolio.owl-carousel .owl-nav button.owl-prev {
    color: #ffffff !important;
    border: 1px solid !important;
    padding: 8px 13px !important;
    border-radius: 7px !important;
    margin: 0 5px !important;
}

.website-logo .line_method__line1 {
    top: 92%;
    left: -62%;
    transform: translate(-50%) rotate(296deg);
}

.website-logo .line_method__line1 span {
    transform: translateY(-50%) rotate(65deg);
}

.website-logo .line_method__line2 {
    top: 56%;
    left: -85%;
    transform: translate(-50%) rotate(-13deg);
}

.website-logo .line_method__line2 span {
    transform: translateY(-50%) rotate(12deg);
}

.website-logo .line_method__line3 {
    top: 19%;
    left: -72%;
    transform: translate(-50%) rotate(39deg);
}

.website-logo .line_method__line3 span {
    transform: translateY(-50%) rotate(-38deg);
}

.website-logo .line_method__line4 {
    top: 0%;
    left: -39%;
    transform: translate(-50%) rotate(90deg);
    width: 270px;
}

.website-logo .line_method__line4 span {
    transform: translateY(-50%) rotate(-91deg);
}

.website-logo .line_method__line6 {
    top: 47%;
    left: -50%;
    transform: translate(-50%) rotate(193deg);
}

.website-logo .line_method__line5 {
    top: 39%;
    left: -54%;
    transform: translate(-50%) rotate(141deg);
}

.website-logo .line_method__line5 span {
    transform: translateY(-50%) rotate(-143deg);
}

.website-logo .line_method__line6 span {
    transform: translateY(-50%) rotate(-193deg);
}

.website-logo .line_method__line7 {
    top: 91%;
    left: -27%;
    transform: translate(-50%) rotate(232deg);
}

.website-logo .line_method__line7 span {
    transform: translateY(-50%) rotate(-233deg);
}

.netver-logo .line_method__line1 {
    top: 87%;
    left: -65%;
    transform: translate(-50%) rotate(309deg);
}

.netver-logo .line_method__line2 {
    top: 42%;
    left: -80%;
    transform: translate(-50%) rotate(20deg);
}

.netver-logo .line_method__line3 {
    top: 5%;
    left: -38%;
    transform: translate(-50%) rotate(91deg);
}

.netver-logo .line_method__line4 {
    top: 40%;
    left: 12%;
    transform: translate(-50%) rotate(163deg);
}

.netver-logo .line_method__line5 {
    top: 72%;
    left: -52%;
    transform: translate(-50%) rotate(234deg);
    width: 326px;
}

.netver-logo .line_method__line3 span {
    transform: translateY(-50%) rotate(-90deg);
}

.netver-logo .line_method__line2 span {
    transform: translateY(-50%) rotate(-21deg);
}

.netver-logo .line_method__line1 span {
    transform: translateY(-50%) rotate(51deg);
}

.netver-logo .line_method__line5 span {
    transform: translateY(-50%) rotate(-58deg);
}

.netver-logo .line_method__line4 span {
    transform: translateY(-50%) rotate(-164deg);
}

.menu-logo {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 22%;
    right: 10%;
    --i: .5s;
    opacity: .6;
}

.section-head.title-box h2 {
    font-size: 2rem;
}

/* .infobtn {
    color: #fff;
    background: var(--color2);
    padding: 17px 30px;
    display: inline-block;
    border-radius: 10px;
    font-size: 13px;
} */

/*Button Styles*/
.infobtn {
    padding: 17px 30px;
    color: #ffffff;
    background: var(--color2);
    border-radius: 100px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 2.188rem;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-box-shadow: 0 10px 30px 0 var(--color2);
    -moz-box-shadow: 0 10px 30px 0 var(--color2);
    box-shadow: 0 10px 30px 0 var(--color2);
    -webkit-transition: all 500ms cubic-bezier(0.555, 0.645, 0.310, 1);
    -webkit-transition: all 500ms cubic-bezier(0.555, 0.645, 0.310, 1.285);
    -moz-transition: all 500ms cubic-bezier(0.555, 0.645, 0.310, 1.285);
    -o-transition: all 500ms cubic-bezier(0.555, 0.645, 0.310, 1.285);
    transition: all 500ms cubic-bezier(0.555, 0.645, 0.310, 1.285);
    -webkit-transition-timing-function: cubic-bezier(0.555, 0.645, 0.310, 1);
    -webkit-transition-timing-function: cubic-bezier(0.555, 0.645, 0.310, 1.285);
    -moz-transition-timing-function: cubic-bezier(0.555, 0.645, 0.310, 1.285);
    -o-transition-timing-function: cubic-bezier(0.555, 0.645, 0.310, 1.285);
    transition-timing-function: cubic-bezier(0.555, 0.645, 0.310, 1.285);
    position: relative;
}
/* 
.infobtn:hover,
.infobtn:focus,
.infobtn:active {
    color: #ffffff;
    border-radius: 45px;
    -webkit-box-shadow: 0 5px 25px 0 var(--color2);
    -moz-box-shadow: 0 5px 25px 0 var(--color2);
    box-shadow: 0 5px 25px 0 var(--color2);
}*/

.infobtn:after {
    content: '';
    width: 80px;
    height: 80px;
    background: var(--color2);
    position: absolute;
    margin-top: -35px;
    border-radius: 50px;
    z-index: -1;
    left: 18%;
}
/* 
.infobtn:hover:after {
    content: '';
    margin-top: -35px;
    height: 80px;
    -webkit-transition: all 500ms cubic-bezier(0.555, 0.645, 0.310, 1);
    
    -webkit-transition: all 500ms cubic-bezier(0.555, 0.645, 0.310, 1.285);
    -moz-transition: all 500ms cubic-bezier(0.555, 0.645, 0.310, 1.285);
    -o-transition: all 500ms cubic-bezier(0.555, 0.645, 0.310, 1.285);
    transition: all 500ms cubic-bezier(0.555, 0.645, 0.310, 1.285);
    

    -webkit-transition-timing-function: cubic-bezier(0.555, 0.645, 0.310, 1);
    
    -webkit-transition-timing-function: cubic-bezier(0.555, 0.645, 0.310, 1.285);
    -moz-transition-timing-function: cubic-bezier(0.555, 0.645, 0.310, 1.285);
    -o-transition-timing-function: cubic-bezier(0.555, 0.645, 0.310, 1.285);
    transition-timing-function: cubic-bezier(0.555, 0.645, 0.310, 1.285);
    
}
*/
.infobtn:before {
    content: '';
    width: 60px;
    height: 60px;
    border-radius: 50px;
    margin-top: -30px;
    background: var(--color2);
    position: absolute;
    z-index: -1;
    right: 20%;
    
}
/*
.infobtn:hover:before {
    content: '';
    margin-top: -30px;
    height: 60px;
    -webkit-transition: all 500ms cubic-bezier(0.555, 0.645, 0.310, 1);
    
    -webkit-transition: all 500ms cubic-bezier(0.555, 0.645, 0.310, 1.285);
    -moz-transition: all 500ms cubic-bezier(0.555, 0.645, 0.310, 1.285);
    -o-transition: all 500ms cubic-bezier(0.555, 0.645, 0.310, 1.285);
    transition: all 500ms cubic-bezier(0.555, 0.645, 0.310, 1.285);
    

    -webkit-transition-timing-function: cubic-bezier(0.555, 0.645, 0.310, 1);
    
    -webkit-transition-timing-function: cubic-bezier(0.555, 0.645, 0.310, 1.285);
    -moz-transition-timing-function: cubic-bezier(0.555, 0.645, 0.310, 1.285);
    -o-transition-timing-function: cubic-bezier(0.555, 0.645, 0.310, 1.285);
    transition-timing-function: cubic-bezier(0.555, 0.645, 0.310, 1.285);
    
} */

.btm-mnu {
    position: absolute;
    right: 95px;
    bottom: 35px;
    display: flex;
    align-items: end;
    justify-content: end;
    flex-direction: column;
    gap: 14px;
    z-index: 2;
}

.btm-mnu li {
    color: white;
    padding-right: 29px;
    line-height: 23px;
    position: relative;
}

.btm-mnu li::before {
    content: '';
    position: absolute;
    right: 0;
    top: 8px;
    background: white;
    width: 8px;
    height: 8px;
    border-radius: 50px;
}

.social {
    position: absolute;
    bottom: 35px;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, 0px);
    width: 100%;
    text-align: center;
}

.social a {
    color: white;
    margin-right: 34px;
    position: relative;
    font-size: 12px;
}

.social a:last-child {
    margin: 0;
}

.social a::before {
    content: '/';
    position: absolute;
    right: -23px;
    font-size: 14px;
    top: -2px;
}

.social a:last-child::before {
    display: none;
}

.last-mnu {

    height: 100%;

    overflow: auto;

    position: absolute;

    z-index: 9;
}

.last-mnu li {

    font-size: 52px;

    line-height: 3;
}

.webdev .list_contet ul {
    gap: 36px;
}

.webdev .list_contet ul li h4 {
    font-size: 43px;
    text-align: left;
}

.webdev .list_contet ul li img {
    width: 36px;
}

.webdev {
    height: 100%;
    padding: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.webdev-inner {
    display: flex;
    align-items: start;
    justify-content: space-between;
    height: auto;
    width: 90%;
}

.webdev-inner h1 {
    margin-bottom: 0;
    font-weight: bold;
    color: #ff9a86;
    font-size: 75px;
    text-align: left;
    width: 45%;
}

.webdev-inner .list_contet {
    width: 53%;
}

.webdev-btm {
    font-family: 'Krona One', serif;
    font-size: 120px;
    font-weight: 700;
    color: rgb(0 0 0 / 17%);
    letter-spacing: -.03em;
    display: inline-block;
    line-height: 1em;
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    margin-left: 0%;
    bottom: 15px;
    width: 100%;
    text-transform: uppercase;
}

.contact-sec {
    height: 100vh;
    background: #1d1341;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
}

.contact-inner {
    display: flex;
    /* align-items: end; */
    justify-content: center;
    width: 90%;
}

.contact-lft {
    width: 75%;
    text-align: right;
    display: grid;
    gap: 100px;
    padding-right: 50px;
    border-right: 1px solid #ffffff40;
    padding-left: 0;
}

.contact-lft li a {
    font-size: 100px;
    display: inline-block;
    line-height: 1;
    letter-spacing: -4px;
    line-height: 137px;
    color: #fbfbfb;
}

/* .contact-lft li:hover {
    transform: skew(0deg, -1deg);
} */
.contact-lft li {
    list-style: none;
}

.contact-lft li p {
    margin-top: 7px;
    color: #d3d3d3;
    font-size: 12px;
}

.contact-lft li p span {
    color: #ff9a86;
}

.con-rt-wrap {
    width: 25%;
    padding-left: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cont-social {
    margin-bottom: 0;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 11px;
}

.cont-social a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    border: 1px solid white;

    border-radius: 50px;

    color: white !important;
}

.contact-rt {
    padding-left: 0;
    display: grid;
    gap: 24px;
    text-align: left;
}

.contact-rt li {
    list-style: none;
}

.contact-rt li h4 {
    text-transform: uppercase;
    font-size: 13px;
    color: #a1a1a1;
    margin-bottom: 12px;
}

.contact-rt li h5 {
    font-size: 18px;
    margin-top: 6px;
    color: white;
}

.confsec .infotext,
.confsec .infotitle2,
.confsec .infotitle,
.confsec .infotitle3,
.confsec .infotitle4 {
    color: white !important;
}

.confsec .icont img {
    filter: brightness(11.5) !important;
}

.confsec .info-bg-text {
    color: #e6552891 !important;
}

.lstsocial {
    display: none;
}

.confsec .social a {
    color: #190b4a;
}

.contact-rt li a {
    color: #fff;
    background: var(--color2);
    padding: 17px 30px;
    display: inline-block;
    border-radius: 10px;
    font-size: 13px;
}
.con-gif {
    width: 69%;
}