*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}
html,
body
{
    /* background-color: #111; */
    height: 100%;
    width: 100%;
    position: relative;
}
body
{
    overflow-x: hidden;
}
.navbar
{
    /* background-color: white; */
    font-size: 1.2vw;
    mix-blend-mode: difference;
    color: #111;
}
.navbar-brand
{
    font-size: 1.5vw;
    /* mix-blend-mode: difference; */
    color: #fff;
}
.nav-link
{
    color: #fff !important;
    /* z-index: 10; */
}
.hero-wrapper
{
    width: 100%;
    height: 100vh;
    background-color: #000;
    overflow: hidden;
}

.content-part-1
{
    display: flex;
    align-items: start;
    justify-content: center;
    width: 100%;
    height: 100vh;
}
.rotate-div
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200vw;
    height: 190vh;
    background-color: #000;
    gap: 3vw;
    scale: 1;
}
.row-div
{
    width: calc(200vw/5);
    display: flex;
    flex-direction: column;
    gap: 3vh;
    height: 100%;
}
.img-div
{
    width: 100%;
    height: calc(100%/4);
    border-radius: 10px;
    overflow: hidden;
}
.img-div img
{
    width: 100%;
height: 100%;
}
#r2
{
    margin-top: -5%;
}
#r3
{
    margin-top: -9%;
}
#r4
{
    margin-top: -12%;
}
#r5
{
    margin-top: -15%;
}
.overlay-div
{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100vh;
    color: #fff;
    background-color: #00000000;
    font-size: 8vw;
}
.overlay-div h1
{
    font-size: 8vw;
    opacity: 0;
}
.scroll-down
{
    position: absolute;
    bottom: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    gap: 1vh;
}
.scroll-p
{
    width: 6vw;
    height: 2px;
    border-radius: 50px;
    background: #ffffff55;
}
.scrolling
{
    width: 0vw;
    height: 2px;
    border-radius: 50px;
    background: #fff;
}
.about-wrapper
{
    width: 100%;
    height: 50vh;
    background-color: #fff;
    margin-top: 25rem;
    position: relative;
    display: block;
}
.about-wrapper h1
{
    font-size: 7vw;
    color: #000000;
}
.about-wrapper h3
{
    position: absolute;
    bottom: 0;
}
.btn-ab
{
    position: absolute;
    bottom: 0;
    right: 0;
}

.btn
{
    border: 0;
    outline: 0;
    border-radius: 50px;
    font-size: 1.4rem;
    width: auto;
    height: auto;
    padding: 1.3rem 1.6rem;
}

.txt-1
{
    opacity: 0.2;
    position: absolute;
    white-space: nowrap;
}
.txt-2
{
    opacity: 1;
    position: absolute;
    width: 0%;
    white-space: nowrap;
    overflow: hidden;
}
.logos-wrapper
{
    width: 100%;
    height: 15vh;
    padding: 1.5rem;
    background-color: #111;
}
.row-logos
{
    filter: brightness(0) saturate(100%) invert(89%) sepia(6%) saturate(14%) hue-rotate(326deg) brightness(86%) contrast(76%);
    padding-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}
.summary-wrapper
{
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

}
.h1-s-1
{
    font-size: 2.5vw;
    color: #00000045;
}
.h1-s-2
{
    font-size: 7vw;
    color: #000;
}

.text-gradient
{
    background: #FFB158;
background: linear-gradient(to left, #FFB158 0%, #00BDAA 25%, #0076A1 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.services-wrapper
{
    width: 100%;
    height: 50vh;
    /* margin-top: 25rem; */
    position: relative;
    /* display: block; */
    padding-top: 7rem;
    background-color: #efefef;
}
.services-wrapper h1
{
    font-size: 7vw;
    color: #000000;
}

.txt-ser-1
{
    opacity: 0.2;
    position: absolute;
    white-space: nowrap;
}
.txt-ser-2
{
    opacity: 1;
    position: absolute;
    width: 0%;
    white-space: nowrap;
    overflow: hidden;
    padding-bottom: 2rem;
}
.services-bottom-wrapper
{
    width: 100%;
    /* height: 100%; */
    background-color: #efefef;

}
.row-service-b-sec
{
    border-top: 1px solid #77777735;
    border-bottom: 1px solid #77777735;
    padding-top: 4rem;
    padding-bottom: 4rem;
    
}
.column-right-list
{
    display: flex;
    flex-direction: column;
    justify-content: start;
}
.column-right-list h2
{
    color: #9A9A9A;
}
.text-large-left-service
{
    font-size: 5vw;
    color: #000;
}
.work-wrapper
{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0D0D11;
}
.work-wrapper h1
{
    font-size: 5vw;
    color: #fff;
}
.work-txt
{
    position: absolute;
    width: 60vw;
    height: 0vh;
    z-index: 9;
    /* background-color: #727272; */
}
#my
{
    position: absolute;
    top: 0;
    left: 35%;
    transform: translate(-20%, -50%);
    color: #fff;
}
#work
{
    position: absolute;
    bottom: 0;
    right: 35%;
    transform: translate(20%, 50%);
    color: #fff;
}
.our-work-txt-div
{
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 60vw;
    height: 0vh;
    background-color: #fff;
}
.scroll-work
{
    width: 100%;
    height: 60vh;
    /* background-color: #919191; */
    overflow: hidden;
}
.scroll-img
{
    width: 100%;
    margin-top: 0%;
    transition: all cubic-bezier(0.19, 1, 0.22, 1)1s;
}
.scroll-img img
{
    width: 100%;
}
#demo
{
    position: absolute;
    bottom: -10%;
}
.pricing-wrapper
{
    width: 100%;
    min-height: 100vh;

}

.pricing-wrapper h3
{
    color: #00000086;
    border-bottom: 1px solid #c1c1c1;
    padding-bottom: 1rem;
}
#text-mny
{
    font-size: 13vw;
}
#text-mny2
{
    color: #9A9A9A;
}
.column-pricing-right
{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.footer-wrapper
{
    background-color: #0D0D11;
    width: 100%;
    min-height: 70vh;
}
.footer-wrapper h1
{
    font-size: 5vw;
    color: #fff;
    padding-top: 5rem;
}
.footer-wrapper h2
{
    color: #c0c0c0;
    padding-top: 4rem;
}
.copyright-txt
{
    mix-blend-mode: difference;
    color: #fff;
}