styles.css

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Montserrat:wght@300;400;500;600;700;800;900&family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

@import url('https://fonts.cdnfonts.com/css/gilroy-bold');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #0a0823;

    font-family: 'Montserrat', sans-serif;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100vw;
    overflow-x: hidden;
    color: white;
}

a {
    text-decoration: none;
}

.popupBox {
    width: 64%;
    /* max-width: 67rem; */
    height: calc(3/4* 85vh);
    z-index: 10;

    background: radial-gradient(102.34% 323.35% at 100% 44.05%, rgba(255, 255, 255, 0.19) 0%, rgba(255, 255, 255, 0.61) 0.01%, rgba(255, 255, 255, 0.39) 51.44%, rgba(255, 255, 255, 0.45) 100%, rgba(255, 255, 255, 0.55) 100%, rgba(255, 255, 255, 0.31) 100%);
    box-shadow: inset -5px -5px 250px rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(0.625vw);

    border-radius: calc(3/4* 1.5625vw);

    position: fixed;
    top: calc(3/4* 22.2676vh);
    left: auto;
    right: auto;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: calc(3/4* 5.6338vh);
    padding-left: calc(3/4* 1.25vw);
    padding-right: calc(3/4* 3.75vw);
}

.popupclosebtn {
    position: absolute;
    top: calc(3/4* 2.1126vh);
    right: calc(3/4* 0.9375vw);
}

.popupclosebtn:hover path {
    fill: #0A0823A6;
    fill-opacity: 1;
}

.popupimage {
    width: 45%;
}

.popupimg {
    width: 100%;
}

.popupcontent {
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.popuptext {
    font-size: calc(3/4* 4.2253vh);
    margin-bottom: calc(3/4* 5.6338vh);
    text-align: center;

    font-family: 'Gilroy-Bold', sans-serif;
}

.popupfeild {
    width: 95%;
    height: calc(3/4* 7.6056vh);
    background: #0A0823B2;
    border: 3px solid #BCBBC3;
    box-shadow: inset 0px calc(3/4* 0.3125vw) calc(3/4* 0.3125vw) rgba(0, 0, 0, 0.25);
    border-radius: calc(3/4* 0.78125vw);
    color: white;
    font-size: calc(3/4* 2.8169vh);
    padding: calc(3/4* 2.8169vh) calc(3/4* 1.25vw);
    margin-bottom: calc(3/4* 2.8169vh);

    font-family: 'Gilroy-Bold', sans-serif;
}

.popupbtn {
    background: #535265;
    width: calc(3/4* 12.5vw);
    padding: calc(3/4* 1.4084vh) calc(3/4* 0.625vw);
    border-radius: calc(3/4* 1.5625vw);
    font-size: calc(3/4* 3.3802vh);
    border: 0;
    color: white;

    font-family: 'Gilroy-Bold', sans-serif;
}

.popupbtn:hover {
    background: rgba(255, 255, 255, 0.7);
    color: #0A0823BF;
}

@media screen and (max-width:1080px) {
    .popupBox {
        max-width: 67rem;
        height: 65vh;
        border-radius: 20px;
        top: 8rem;
        padding: 2rem;
        padding-left: 1rem;
        padding-right: 3rem;
    }
    .popupclosebtn {
        top: 0.75rem;
        right: 0.75rem;
        /* width: 3rem; */
    }
    .popuptext {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    .popupfeild {
        height: 2.7rem;
        border: 3px solid #BCBBC3;
        box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
        border-radius: 10px;
        font-size: 1rem;
        padding: 1rem;
        margin-bottom: 1rem;
    }    
    .popupbtn {
        width: 10rem;
        padding: 0.5rem;
        border-radius: 20px;
        font-size: 1.2rem;
    }
    .popuptext {
        font-size: 1.2rem;
    }
}

@media screen and (max-width:800px) {
    .popupBox {
        flex-direction: column;
        padding: 2rem;
        padding-top: 1rem;
    }

    .popupimage {
        height: 50%;
        width: auto;
    }

    .popupimg {
        height: 100%;
        width: auto;
    }

    .popupcontent {
        width: 95%;
    }

    .popuptext {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }
}

@media screen and (max-width:600px) {
    .popupBox {
        width: 80vw;
        height: 70vh;
    }

    .popupimage {
        height: 40%;
        width: auto;
    }

    .popuptext {
        font-size: 1.1rem;
    }
}

/* nav  */
.nav {
    width: 100vw;
    /* max-width: 80rem; */
    /* height: 4rem; */
    height: calc(3/4* 11.267vh);
    /* height: 35.5rem; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: calc(3/4*4.408vh);
    padding-left: calc(3/4*7.5vw);
    padding-right: calc(3/4*7.5vw);
}

.hamburger {
    font-size: 2rem;
    display: none;
    z-index: 7;
}

.hidden {
    display: none;
}

.OnfinanceHeader {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.headername {
    font-size: calc(3/4* 5.070vh);
    font-weight: 700;
}

.navoptions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0 calc(3/4* 1.25vw);
}

.navlink {
    font-size: calc(3/4* 3.098vh);
    font-weight: 400;
    color: rgb(255, 255, 255);
    text-decoration: none;
    margin: 0 calc(3/4* 1.25vw);
    cursor: pointer;
}

.navlink:hover {
    background: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.headerlogo {
    height: calc(3/4* 8.45vh);
    margin: calc(3/4* 2.8169vh);
}
/* @media screen and (min-width:1280px) {
    .headerlogo {
        height: calc(3/4* 8.45vh);
        margin: calc(3/4* 2.8169vh);
    }
} */
/* @media screen and (max-width:1280px) {
    .headerlogo {
        height: 3rem;
        margin: 1rem;
    }
} */
@media screen and (max-width: 768px) {
    .nav {
        width: 100vw;
        max-width: 80rem;
        height: 4rem;
        padding-top: 0.5rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .headerlogo {
        height: 3rem;
        margin: 1rem;
    }
    .headername {
        font-size: 1.8rem;
    }
    .navoptions {
        margin: 0 1rem;
    }
    .navlink {
        font-size: 1.1rem;
        margin: 0 1rem;
    }
    .nav {
        position: relative;
    }
    .navoptions {
        display: none;
        background-color: rgb(0, 0, 0);
        position: absolute;
        top: 0;
        right: 0;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        height: 100vh;
        padding-top: 6rem;
        box-shadow: -4px 0px 5px rgba(0, 0, 0);
        z-index: 7;
    }

    .navmodal-active {
        display: flex
    }

    .navlink {
        width: 9rem;
        margin-bottom: 1rem;
        padding-bottom: 10px;
        border-bottom: 1px solid white;
    }

    .hamburger {
        display: block;
    }
}

/* home  */
.home {
    width: 100vw;
    /* max-width: 80rem; */
    /* min-height: calc(100vh - 4rem); */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.landing {
    width: 100vw;
    /* max-width: 80rem; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    /* padding: 2.81vh 6.25vw; */
    padding: calc(5.4vh *4.5/3) calc(7.125vw *4.5/3);
}

.taglines {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.tline {
    /* font-size: 7.042vh; */
    font-size: calc(4.5/3 * 3.521vh);
    font-weight: 700;
    /* margin: 1.408vh 0; */
    margin: 0.704vh 0;
}

.tlineg {
    /* font-size: 8.4507vh; */
    font-size: calc(4.5/3* 4.225vh);
    font-weight: 600;

    background: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sline {
    /* font-size: 2.8169vh; */
    font-size: calc(4.5/3* 1.634vh);
    font-weight: 300;
    /* margin: 1.408vh 0; */
    margin: calc(4.5/3 * 0.704vh) 0;
}

.downloadoptions {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.downloadbtn {
    /* margin-top: 5.6338vh; */
    margin-top: calc(4.5/3* 2.8169vh);
    /* margin-right: 2.5vw; */
    margin-right: calc(4.5/3* 1.25vw);
    /* width: 15vw; */
    width: calc(4.5/3* 7.5vw);
    box-shadow: 0.1562vw 0.1562vw 0.78125vw #000000;
}

.landingShots {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

.landingscreen {
    /* margin-top: 8.4507vh; */
    margin-top: calc(4.5/3* 4.225vh);
    /* height: 73.2394vh; */
    height: calc(4.5/3* 35.5vh);
    /* padding: 0 3.75vw; */
    padding: 0 calc(4.5/3* 1.875vw);
    overflow: hidden;
    position: relative;
}

.landingss {
    /* height: 95.7746vh; */
    height: calc(4.5/3* 47.5vh);
}

.blurer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    /* height: 42.2535vh; */
    height: calc(4.5/3* 21.5vh);
    background: linear-gradient(to top,
            rgba(10, 8, 35, 100) 0%,
            rgba(10, 8, 35, 0) 100%);
}

.cryt-icons {
    position: absolute;
}

.ci1 {
    /* width: 10vw; */
    width: calc(4.5/3* 5vw);
    top: 10%;
    right: 0;
}

.ci2 {
    /* width: 8.75vw; */
    width: calc(4.5/3* 5.625vw);
    bottom: 10%;
    left: 0;
}

@media screen and (max-width: 980px) {
    .home {
        width: 100vw;
        max-width: 80rem;
        min-height: calc(100vh - 4rem);
    }
    .landing {
        width: 100vw;
        max-width: 80rem;
        padding: 1rem 5rem;
    }
    .tline {
        font-size: 2.5rem;
        margin: 0.5rem 0;
    }
    .tlineg {
        font-size: 3rem;
    }
    .sline {
        font-size: 1rem;
        margin: 0.5rem 0;
    }
    .downloadbtn {
        margin-top: 2rem;
        margin-right: 2rem;
        width: 12rem;
        box-shadow: 2px 2px 10px #000000;
    }
    .landingscreen {
        margin-top: 3rem;
        height: 26rem;
        padding: 0 3rem;
    }
    .landingss {
        height: 34rem;
    }
    .blurer {
        height: 15rem;
    }
    .ci1 {
        width: 8rem;
    }

    .ci2 {
        width: 7rem;
    }
    .landing {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 3rem 5rem;
    }

    .taglines {
        width: 100%;
        justify-content: center;
    }

    .landingShots {
        width: 100%;
        align-items: center;
    }
}

@media screen and (max-width: 700px) {
    .landing {
        padding: 3rem;
    }

    .nav {
        padding-left: 1rem;
    }
}

@media screen and (max-width: 500px) {
    .tline {
        font-size: 2rem;
    }

    .tlineg {
        font-size: 2.3rem;
    }

    .sline {
        font-size: 0.8rem;
    }

    .downloadbtn {
        margin-right: 1rem;
        width: 10rem;
    }
}

@media screen and (max-width: 410px) {
    .landing {
        padding-left: 2rem;
    }

    .downloadbtn {
        width: 9rem;
    }
}

/* home end  */


/* features */
.pt {
    margin-top: 8rem;
}
.pt2 {
    margin-top: 12rem;
}
.title {
    font-size: calc(3/4* 6.1971vh);
    font-weight: 700;
    border-bottom: 0.078125vw solid white;
    padding-bottom: calc(3/4* 1.4084vh);
}

.features {
    width: 100vw;
    /* max-width: 80rem; */
    /* min-height: calc(100vh - 3rem); */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: calc(3/4* 10vw);
    padding-top: calc(3/4* 8.4507vh);
    padding-bottom: 0;
}

.featscreen {
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.phonescreenft {
    position: relative;
    width: calc(3/4* 22.5vw);
    height: calc(3/4* 94.9295vh);
    border-radius: calc(3/4* 2.5vw);
    overflow: hidden;
}


@media screen and (max-width: 1280px){
    .ftframe {
        position: absolute;
        top: 0rem;
        left: 0rem;
        width: calc(3/4* 22.5vw);
        z-index: 4;
    }
}
@media screen and (min-width: 1280px) {
    .ftframe {
        position: absolute;
        top: 0rem;
        left: 0rem;
        width: calc(3/4* 22.5vw);
        height: calc(3/4* 90.5492vh);
        z-index: 4;
    }
}

.featimager {
    position: absolute;
    top: calc(3/4* 1.4084vh);
    left: calc(3/4* 1.875vw);
    width: calc(3/4* 18.75vw);
    height: calc(3/4* 88.5492vh);
    /* max-height: calc(3/4* 1140px * 0.915482); */
    overflow: hidden;
    z-index: 2;
    border-radius: 1.25vw;
}

.ftimg {
    width: calc(3/4* 18.75vw);
}

.featcontainer {
    width: 60%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.featpoint {
    font-size: calc(2.1/3* 4.2253vh);
    font-weight: 700;

    padding: 5px;

    margin: calc(2.1/3* 4.9295vh) calc(2.1/3* 2.1875vw);
    border-radius: calc(2.1/3* 0.4687vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px calc(2.1/3* 0.7812vw) #000000;

    /* vanilla tilt  */
    transform-style: preserve-3d;
    transform: perspective(1000px);
}

.featpoint:hover {
    background: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
}

.featurepoint {
    background: radial-gradient(#0D0A2E 0%, #000000 150%);
    border-radius: calc(2.1/3* 0.3125vw);
    width: calc(2.1/3* 20vw);
    height: calc(2.1/3* 22.5352vh);
    padding: calc(2.1/3* 2.8169vh) calc(2.1/3* 1.25vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;

    /* vanilla tilt  */
    transform: translateZ(10px);
}

.ftimage {
    top: calc(2.1/3* -12.4507vh);
    left: auto;
    right: auto;
    position: absolute;
    width: calc(3/4* 7.5vw);

    /* vanilla tilt  */
    transform: translateZ(20px);
}

@media screen and (max-width: 980px) {
    .pt {
        margin-top: 8rem;
    }

    .title {
        font-size: 2.2rem;
        border-bottom: 1px solid white;
        padding-bottom: 0.5rem;
    }

    .features {
        width: 100vw;
        max-width: 80rem;
        padding: 4rem;
        padding-top: 3rem;
    }
    .phonescreenft {
        width: 18rem;
        height: 33.7rem;
        border-radius: 2rem;
    }
    .ftframe {
        width: 18rem;
    }
    .featimager {
        top: 0.5rem;
        left: 1.5rem;
        width: 15rem;
        height: 32.5rem;
        border-radius: 1rem;
    }
    .ftimg {
        width: 15rem;
    }
    .featpoint {
        font-size: 1.5rem;
        padding: 5px;
        margin: 1.75rem;
        border-radius: 6px;
        box-shadow: 0px 0px 10px #000000;
    }
    .featurepoint {
        border-radius: 4px;
        width: 16rem;
        height: 8rem;
        padding: 1rem;
    }
    .ftimage {
        top: -4rem;
        width: 6rem;
    }
    .features {
        padding: 0rem;
        padding-top: 3rem;
        padding-bottom: 4rem;
    }

    .featscreen {
        width: auto;
    }

    .featcontainer {
        width: auto;
    }
}

@media screen and (max-width: 830px) {
    .featpoint {
        margin-left: 0;
        margin-right: 0;
    }
}

@media screen and (max-width: 650px) {
    .featscreen {
        display: none;
    }

    .featpoint {
        margin-left: 1rem;
        margin-right: 1rem;
        transform: scale(0.9);
    }

    .featpoint:hover {
        background: #0a0823;
    }
}

/* features end  */

/* gallery */

.gallery {
    width: 100vw;
    /* max-width: 80rem; */
    /* min-height: 100vh; */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-image: url(./images/gradient\ bg.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    margin-top: 12rem;
    padding: 0 calc(3.5vw *4.5/3);
}

.gallerycarousel {
    width: 60%;
}

.galleryitem {
    width: calc(3/4* 20vw);
    position: relative;
}

.galleryinfo {
    width: 40%;
    padding: 2%;
    padding-left: 5%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.gallerytitle {
    font-size: calc(3/4* 5.0704vh);
    font-weight: 700;
    border-bottom: 0.0781vw solid white;
    padding-bottom: calc(3/4* 1.4084vh);
    margin-bottom: calc(3/4* 5.6338vh);
}

.gallerytitle:hover {
    background: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gallerybox {
    width: 93%;
    padding: calc(3/4* 0.3521vh) calc(3/4* 0.15625vw);
    border-radius: calc(3/4* 0.5468vw);
}

.galleryinfotext {
    font-size: calc(3/4* 3.302vh);
    font-weight: 500;
}
.galleryinfotext li {
    margin-bottom:10px
}
@media screen and (max-width: 1180px) {
    .gallery {
        width: 100vw;
        max-width: 80rem;
        margin-top: 12rem;
    }
    .galleryitem {
        width: 16rem;
    }
    .gallerytitle {
        font-size: 1.8rem;
        border-bottom: 1px solid white;
        padding-bottom: 0.5rem;
        margin-bottom: 2rem;
    }
    .gallerybox {
        padding: 2px;
        border-radius: 7px;
    }
    .galleryinfotext {
        font-size: 1.1rem;
    }
    .gallerycarousel {
        width: 18rem;
    }

    .galleryitem {
        width: 18rem;
    }

    .galleryinfo {
        width: 60%;
    }
}

@media screen and (max-width: 820px) {
    .gallerycarousel {
        width: 20rem;
    }

    .galleryitem {
        width: 20rem;
    }

    .gallerytitle {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .gallery {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .galleryinfo {
        width: 95%;
    }
}

@media screen and (max-width: 450px) {
    .gallerytitle {
        font-size: 1.6rem;
    }
}

/* gallery end  */

/* testimonials */
@media screen and (max-width: 1280px) {
    .testimonials {
        width: 100vw;
        max-width: 80rem;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 12rem;
    }

    .testTitle {
        font-size: 2.2rem;
        font-weight: 700;
        padding: 10px;
        padding-bottom: 5px;
        border-bottom: 1px solid white;
    }

    .testcarousel {
        width: 100%;
    }

    .testitem {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-bottom: 4rem;
        padding-top: 2rem;
    }

    .testboxout {
        padding: 5px;
        background: #0a0823;
        position: relative;
        border-radius: 10px;
        z-index: 3;

        /* vanilla tilt  */
        transform-style: preserve-3d;
        transform: perspective(1000px);
    }

    .testboxbackdrop {
        width: 22rem;
        height: 8rem;
        position: absolute;
        top: 5px;
        left: 5px;
        background: #0a0823;
        border-radius: 8px;
        z-index: 4;
    }

    .testbox {
        width: 22rem;
        height: 8rem;
        background: radial-gradient(140.69% 286.82% at 84.33% -29.29%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.4) 0.01%, rgba(255, 255, 255, 0.14) 0.02%, rgba(255, 255, 255, 0) 99.97%, rgba(255, 255, 255, 0.1) 99.98%, rgba(255, 255, 255, 0) 99.99%);
        box-shadow: inset -5px -5px 250px rgba(255, 255, 255, 0.02);
        backdrop-filter: blur(42px);

        border-radius: 8px;

        padding: 1rem 1rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        position: relative;
        z-index: 5;

        /* vanilla tilt  */
        transform: translateZ(10px);

    }

    .testlight {
        width: 24rem;
        height: 6rem;
        background: radial-gradient(48.73% 41.22% at 49.99% 58.78%, rgba(217, 217, 217, 0.47) 0%, rgba(34, 39, 61, 0) 90%);
        border-radius: 20px;
        position: absolute;
        bottom: -3rem;
        left: -1rem;
        z-index: 2;
    }

    .testimage {
        width: 6rem;
        height: 6rem;
        border-radius: 50%;
        overflow: hidden;

        background-color: #362E9B;

        /* vanilla tilt  */
        transform: translateZ(30px);
    }

    .testcontent {
        width: 10rem;
        height: 6rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        /* vanilla tilt  */
        transform: translateZ(30px);
    }

    .testcomment {
        font-size: 0.8rem;
        font-weight: 500;
        word-wrap: break-word;
    }

    .testauthor {
        font-size: 0.7rem;
        font-weight: 500;
    }
    .testimonials .center .testbox {
        height: 10.5rem;
    }

    .testimonials .center .testboxbackdrop {
        height: 10.5rem;
    }
}
@media screen and (min-width:1100px) {
    .testimonials .active .testbox {
        height: 9.5rem;
    }

    .testimonials .active .testboxbackdrop {
        height: 9.5rem;
    }
}
@media screen and (min-width:1280px) {
    .testimonials {
        width: 100vw;
        /* max-width: 80rem; */
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 12rem;
    }

    .testTitle {
        font-size: calc(3/4* 6.1971vh);
        font-weight: 700;
        padding: calc(3/4* 1.7605vh) calc(3/4* 0.7812vw);
        padding-bottom: calc(3/4* 0.8802vh);
        border-bottom: 0.0781vw solid white;
    }

    .testcarousel {
        width: 70%;
    }

    .testitem {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-bottom: calc(3/4* 11.2676vh);
        padding-top: calc(3/4* 5.6336vh);
    }

    .testboxout {
        padding: calc(3/4* 0.8802vh) calc(3/4* 0.3906vw);
        background: #0a0823;
        position: relative;
        border-radius: calc(3/4* 0.7812vw);
        z-index: 3;

        /* vanilla tilt  */
        transform-style: preserve-3d;
        transform: perspective(1000px);
    }

    .testboxbackdrop {
        width: calc(3/4* 27.5vw);
        height: calc(3/4* 22.5352vh);
        position: absolute;
        top: calc(3/4* 0.8802vh);
        left: calc(3/4* 0.3906vw);
        background: #0a0823;
        border-radius: calc(3/4* 0.625vw);
        z-index: 4;
    }

    .testbox {
        width: calc(3/4* 27.5vw);
        height: calc(3/4* 22.5352vh);
        background: radial-gradient(140.69% 286.82% at 84.33% -29.29%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.4) 0.01%, rgba(255, 255, 255, 0.14) 0.02%, rgba(255, 255, 255, 0) 99.97%, rgba(255, 255, 255, 0.1) 99.98%, rgba(255, 255, 255, 0) 99.99%);
        box-shadow: inset -5px -5px 250px rgba(255, 255, 255, 0.02);
        backdrop-filter: blur(calc(3/4* 3.2812vw));

        border-radius: calc(3/4* 0.625vw);

        padding: calc(3/4* 2.8169vh) calc(3/4* 1.25vw);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        position: relative;
        z-index: 5;

        /* vanilla tilt  */
        transform: translateZ(10px);

    }

    .testlight {
        width: calc(3/4* 30vw);
        height: calc(3/4* 16.9014vh);
        background: radial-gradient(48.73% 41.22% at 49.99% 58.78%, rgba(217, 217, 217, 0.47) 0%, rgba(34, 39, 61, 0) 90%);
        border-radius: 1.5625vw;
        position: absolute;
        bottom: calc(3/4* -8.4507vh);
        left: auto;
        right: auto;
        z-index: 2;
    }

    .testimage {
        width: calc(3/4* 7.5vw);
        height: calc(3/4* 7.5vw);
        border-radius: 50%;
        overflow: hidden;

        background-color: #362E9B;

        /* vanilla tilt  */
        transform: translateZ(30px);
    }

    .testcontent {
        width: calc(3/4* 12.5vw);
        height: calc(3/4* 16.9014vh);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        /* vanilla tilt  */
        transform: translateZ(30px);
    }

    .testcomment {
        font-size: calc(3/4* 2.2535vh);
        font-weight: 500;
        word-wrap: break-word;
    }

    .testauthor {
        font-size: calc(3/4* 1.9718vh);
        font-weight: 500;
    }
    .testimonials .active .testbox {
        height: calc(3/4* (22.5352vh + 1rem));
    }
    .testimonials .active .testboxbackdrop {
        height: calc(3/4* (22.5352vh + 1rem));
    }
    .testimonials .center .testbox {
        height: calc(3/4* (22.5352vh + 2rem));
    }
    .testimonials .center .testboxbackdrop {
        height: calc(3/4* (22.5352vh + 2rem));
    }
}

.testimonials .owl-stage {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.testboxout:hover {
    background: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
}

.testboxout:hover .testbox {
    background: #0a0823;
}

/* testimonials end */

/* about us */
.aboutpart {
    width: 100vw;
    /* max-width: 80rem; */
    /* min-height: 100vh; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 12rem;
    padding: 0 calc(6.125vw *4.5/3);
}

.abttitle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: calc(3/4* 2.8169vh);
}

.abtimg {
    width: calc(3/4* 6.25vw);
    margin: calc(3/4* 1.4084vh) calc(3/4* 0.625vw);
}

.aboutpt {
    width: 70%;
    padding: calc(3/4* 0.3521vh) calc(3/4* 0.1562vw);
    margin: calc(3/4* 2.8169vh) calc(3/4* 1.25vw);
    border-radius: calc(3/4* 0.5468vw);
}

.abtpoint {
    border-radius: calc(3/4* 0.5468vw);
    border: 0.0781vw white dashed;
    padding: calc(3/4* 4.2253vh) calc(3/4* 1.875vw);
    position: relative;
    background: #0a0823;
}

.abtline {
    font-size: calc(3/4* 4.2253vh);
}

.aboutpt:hover {
    background: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
}

.aboutpt:hover .abtpoint {
    border: calc(3/4* 0.0781vw) solid #0a0823;
}

.aboutpt:hover .abtpoint .abtfeild .feildtxt {
    background: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media screen and (max-width: 850px) {
    .aboutpart {
        margin-top: 3rem;
        width: 100vw;
        max-width: 80rem;
        min-height: 100vh;
        margin-top: 12rem;
    }
    .abttitle {
        padding-bottom: 1rem;
    }
    .abtimg {
        width: 5rem;
        margin: 0.5rem;
    }
    .aboutpt {
        padding: 2px;
        margin: 1rem;
        border-radius: 7px;
    }
    .abtpoint {
        border-radius: 7px;
        border: 1px white dashed;
        padding: 1.5rem;
    }
    .abtline {
        font-size: 1.5rem;
    }
    .aboutpt:hover .abtpoint {
        border: 1px solid #0a0823;
    }
    .abtimg {
        width: 4rem;
    }

    .title {
        font-size: 1.8rem;
    }

    .aboutpt {
        width: 80%;
    }

    .abtline {
        font-size: 1.2rem;
    }
}

/* about us end  */

/* contact-us  */
@media screen and (max-width:1280px) {
    .team {
        padding-block: 2rem;
        width: 70%;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        flex-wrap: wrap;
        row-gap: 1.5rem;
    }

    .card {
        background: linear-gradient(135deg, #6159D9, #342ABB);
        box-shadow: 6px 6px 10px black;
        border-radius: 5%;
        display: flex;
        flex-direction: column;
        row-gap: 1rem;
        padding: 1rem 1rem 2rem 1rem;
        width: 18rem;
        height: 18rem;
        transition: all 0.1s ease-out;
        position: relative;

        /* vanilla tilt  */
        transform-style: preserve-3d;
        transform: perspective(1000px);
    }

    .card-bg {
        position: absolute;
        color: rgba(255, 255, 255, 0.03);
        font-weight: bold;
        bottom: -10px;
        right: 10px;
        font-size: 5em;
        user-select: none;
    }

    .card:hover .card-bg {
        color: rgba(255, 255, 255, 0.07);
        transform: translateZ(5px);
    }

    .card img {
        width: 80px;
        height: 80px;
        position: relative;
        top: -25px;
        object-fit: cover;
        object-position: 0 0;
        border-radius: 50%;
    }
}
.card h3,
.card h5,
.card p,
.card img {
    /* vanilla tilt  */
    transform: translateZ(10px);
}

@media screen and (min-width:1280px) {
    .team {
        padding: calc(3/4* 5.6338vh) calc(3/4* 2.5vw);
        width: 70%;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        flex-wrap: wrap;
        row-gap: calc(3/4* 4.225vh);
    }

    .card {
        background: linear-gradient(135deg, #6159D9, #342ABB);
        box-shadow: 0.4687vw 0.4687vw 0.7812vw black;
        border-radius: 5%;
        display: flex;
        flex-direction: column;
        row-gap: calc(3/4* 2.8169vh);
        padding: calc(3/4* 1.8169vh) calc(3/4* 1.25vw) calc(3/4* 5.6338vh) calc(3/4* 1.75vw);
        width: calc(3/4* 26.5vw);
        height:calc(3/4* 26.5vw);
        transition: all 0.1s ease-out;
        position: relative;

        /* vanilla tilt  */
        transform-style: preserve-3d;
        transform: perspective(1000px);
    }

    .card-bg {
        position: absolute;
        color: rgba(255, 255, 255, 0.03);
        font-weight: bold;
        bottom: calc(3/4* 1.7605vh);
        right: calc(3/4* 0.7812vw);
        font-size: calc(3/4* 15.0845vh);
        user-select: none;
    }

    .card:hover .card-bg {
        color: rgba(255, 255, 255, 0.07);
        transform: translateZ(5px);
    }

    .card img {
        width: calc(3/4* 6.25vw);
        height: calc(3/4* 6.25vw);
        position: relative;
        top: calc(3/4* -4.4014vh);
        object-fit: cover;
        object-position: 0 0;
        border-radius: 50%;
    }
    .card h3{
        font-size: calc(3/4* 4.2253vh);
    }
    .card h5 {
        font-size: calc(3/4* 3.1690vh);
    }
    .card p{
        font-size: calc(3/4* 2.8169vh);
    }
}

/* contact-us end */

.footer-container {
    box-shadow: inset 0 8px 6px -6px black;
    width: 100%;
    background-image: linear-gradient(to top right, #1d1a37, #141226);
    background-color: #1d1a37;
    margin-top: 12rem;

}
.footer-container h2{
    font-size: 1rem;
}
.footer-container a {
    font-size: 0.9rem;
}
.footer-container p {
    font-size: 0.9rem;
}
footer {
    display: grid;
    grid-template-columns: 3fr 2fr 4fr;
    grid-template-rows: 4fr 1fr;
    gap: 1rem;
    justify-items: center;
    align-items: center;
}

#footer-col-1 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

#footer-col-2 ul {
    list-style-type: none;
}

#footer-col-2 ul li {
    font-weight: 600;
    margin: calc(3/4* 0.8rem);
}

#footer-col-2 ul li a {
    color: inherit;
}

#footer-col-2 ul li a:hover {
    color: lightgrey;
}

footer h2 {
    border-bottom: 2px solid #33304b;
}

footer h2:hover {
    border-bottom: 2px solid white;
    transition-duration: 200ms;
}

#footer-email {
    line-height: 2;
    display: flex;
    flex-direction: row;
    column-gap: 1rem;
    align-items: center;
}

#footer-email i,
#footer-phone i {
    width: calc(3/4* 24px);
    height: calc(3/4* 24px);
    font-size: calc(3/4* 24px);
}

#footer-signup {
    text-align: center;
    width: 80%;
}

#footer-signup h2 {
    padding-bottom: calc(3/4* 0.7rem);
}

#footer-signup p {
    padding: calc(3/4* 0.75rem) calc(3/4* 0.5rem) calc(3/4* 0.75rem) calc(3/4* 0.5rem);
    text-align: left;
}

#footer-signup form {
    display: flex;
    flex-direction: column;
}
#footer-signup .feildspacer {
    display: flex;
    flex-direction: row;
    height: calc(3/4* 2.5rem);
    gap: calc(3/4* 1rem);
}

#footer-signup form button {
    background-color: #666666;
    padding-inline: calc(3/4* 1rem);
    display: grid;
    place-items: center;
    color: white;
    outline: none;
    border: none;
    border-radius: calc(3/4* 10px);
    font-size: calc(3/4* 1rem);
}

#footer-signup form button:hover {
    background-color: #353839;
}

#signup-input {
    width: 100%;
    background-color: #0e0d1b;
    color: inherit;
    font-size: calc(3/4* 1.2rem);
    outline: none;
    padding: calc(3/4* 8px) calc(3/4* 8px);
    box-sizing: border-box;
    border: none;
    border-radius: calc(3/4* 0.5rem);
}

#footer-phone {
    text-align: center;
    line-height: 2;
}

.contacts {
    padding-block: calc(3/4* 1rem);
    grid-column-start: span 4;
    border-top: 2px solid #33304b;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.contactIcon{
    margin: 0 2rem
}
#twitter,
#youtube,
#instagram,
#linkedin {
    color: #706e81;
}

#twitter:hover {
    color: #1DA1F2;
    transition-duration: 200ms;
}

#youtube:hover {
    color: #CC0000;
    transition-duration: 200ms;
}

#instagram:hover {
    color: #8a3ab9;
    transition-duration: 200ms;
}

#linkedin:hover {
    color: #0077b5;
    transition-duration: 200ms;
}

.contacts a i {
    width: calc(3/4* 42px);
    height: calc(3/4* 42px);
    font-size: calc(3/4* 42px);
}

@media screen and (max-width: 768px) {
    footer {
        display: flex;
        flex-direction: column;
        padding-top: 1rem;
        row-gap: 2rem;
    }

    #footer-col-1 {
        justify-content: center;
        align-items: center;
    }
}