@font-face {
    font-family: "IBMPlexMonoLight";
    src: url("/assets/IBMPLEXMONO-LIGHT.TTF") format("truetype");
}

@font-face {
    font-family: "FontSpringDemoVan";
    src: url("/assets/FONTSPRING-DEMO-VANGUARDCF-BOLD.OTF") format("opentype");
}

@font-face {
    font-family: "IBMPlexMonoRegular";
    src: url("/assets/IBMPLEXMONO-REGULAR.TTF") format("truetype");
}

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

:root {
    --color-Main: #142326;
    --color-white: #fff;
    --color-Yellow: #EDDB47;
    --color-Black-light: #00000088;
    --color-Gray: #828282;
    --color-Gray-light: #82828283;
    --color-black: #000;
    --color-text: #142326;
    --color-Gray-hover: #e5e7eb;
    --color-Gray-active: #f3f4f6;
    --color-Green-light: #9FEE9F;
    --color-Card: #161b22;
    --color-Border: #30363d;
}

body {
    background-color: var(--color-Main);

}

.HomeHero {
    width: 100%;
    height: 100dvh;
    position: relative;
    padding: 25px 40px;
    background-image: url(/assets/e.svg), url(/assets/texture.png);
    background-color: var(--color-Main);
    background-repeat: no-repeat;
    background-position: center -100px;
    background-size: cover;
}

.HomeHero .HeroText {
    width: 100%;
    position: absolute;
    top: 68%;
    transform: translate(0px, -50%);
    left: 0%;
    padding: 0px 40px;
}

.HomeHero .HeroText .Title {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.HomeHero .HeroText .Title .TitleOne {
    color: var(--color-white);
    font-family: 'FontSpringDemoVan';
    font-size: 80px;
    font-weight: 700;
    font-style: normal;
    line-height: 100%;
    font-variant-caps: normal;
    text-align: left;
    text-transform: uppercase;
}

.HomeHero .HeroText .Title .TitleTwo {
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}

.HomeHero .HeroText .Title .TitleTwo,
.HomeHero .HeroText .Title .TitleTwo span {
    color: var(--color-white);
    font-family: 'FontSpringDemoVan';
    font-weight: 700;
    font-style: normal;
    font-size: 120px;
    line-height: 100%;
    font-variant-caps: normal;
    text-align: left;
    text-transform: uppercase;
}

.HomeHero .HeroText .Title .TitleTwo span {
    color: var(--color-Yellow);
    line-height: 100%;
}

.navBarContent {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navBarContent .Info .Information {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
    justify-content: center;
    border: none;
    outline: none;
}

.navBarContent .Info .Information span {
    color: #fff;
    font-family: "IBMPlexMonoRegular";
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    text-transform: uppercase;
}




.navBarContent .Info .Information .EmailTelNav {
    position: relative;
    text-decoration: none;
    color: var(--color-white);
}

.navBarContent .Info .Information .EmailTelNav::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.7s ease-out;
    -webkit-transition: transform 0.7s ease-out;
    -moz-transition: transform 0.7s ease-out;
    -ms-transition: transform 0.7s ease-out;
    -o-transition: transform 0.7s ease-out;
}


.navBarContent .Info .Information .EmailTelNav:hover::after,
.navBarContent .Info .Information .EmailTelNav:focus::after {
    transform: scaleX(1);
    transform-origin: left center;
}

.navBarContent .Info .Information ._TEL {
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
}

.navBarContent .Info .Information ._TEL .Symbols {
    padding: 0px 2px;
}

.animated-word {
    position: absolute;
    left: 23%;
    animation-duration: var(--duration, 1s);
}

.animated-word::selection {
    background-color: var(--color-white);
}

.animated-word.in.forward {
    animation: slideInFromBottom 0.4s ease forwards;
    -webkit-animation: slideInFromBottom 0.4s ease forwards;
}

.animated-word.out.forward {
    animation: slideOutToTop 0.4s ease forwards;
    -webkit-animation: slideOutToTop 0.4s ease forwards;
}

.animated-word.in.backward {
    animation: slideInFromTop 0.4s ease forwards;
    -webkit-animation: slideInFromTop 0.4s ease forwards;
}

.animated-word.out.backward {
    animation: slideOutToBottom 0.4s ease forwards;
    -webkit-animation: slideOutToBottom 0.4s ease forwards;
}

@keyframes slideInFromBottom {
    0% {
        transform: translateY(100%);
        opacity: 0;
        -webkit-transform: translateY(100%);
        -moz-transform: translateY(100%);
        -ms-transform: translateY(100%);
        -o-transform: translateY(100%);
    }

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

@keyframes slideOutToTop {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

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

@keyframes slideInFromTop {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

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

@keyframes slideOutToBottom {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

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

.HomeHero .CopyRight {
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0px 40px;
}

.copytwo {
    display: none !important;
}

.HomeHero .CopyRight .TextCopyRight {
    width: 40%;

}

.HomeHero .CopyRight .TextCopyRight span {
    width: 100%;
    font-family: "IBMPlexMonoLight";
    color: var(--color-white);
    font-family: "IBMPlexMonoLight";
    font-weight: 300;
    font-style: normal;
    font-size: 16px;
    font-variant-caps: normal;
    text-align: left;
    text-transform: uppercase;
    line-height: 22px;
}

@media (max-width:1100px) {
    .HomeHero {
        width: 100%;
        height: 100dvh;
        padding: 25px 20px;
        background-position: -90px 0px;
    }

    .HomeHero .HeroText {
        top: 50%;
        padding: 0px 20px;
    }

    .HomeHero .HeroText .Title .TitleOne {
        width: 100%;
        font-weight: 800;
        font-size: 10vw;
        line-height: 10vw;
    }

    .HomeHero .HeroText .Title .TitleTwo,
    .HomeHero .HeroText .Title .TitleTwo span {
        font-size: 13vw;
        line-height: 100%;
    }

    .HomeHero .HeroText .Title .TitleTwo span {
        line-height: 100%;
    }

    .animated-word {
        left: 28%;
    }

    .HomeHero .CopyRight {
        top: unset;
        bottom: 25px;
        flex-wrap: wrap;
        padding: 0px 20px;
        gap: 1.5rem;
    }

    .HomeHero .CopyRight {
        display: none;
    }

    .copytwo {
        display: flex !important;
    }

    .HomeHero .CopyRight>* {
        width: calc(100%);
    }

    .HomeHero .CopyRight .ImageCopyRight {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: left;
    }

    .HomeHero .CopyRight .ImageCopyRight img {
        width: fit-content;
    }

    .HomeHero .CopyRight .TextCopyRight {
        width: 80%;
        color: var(--color-white);
    }
}

@media (min-width:768px) and (max-width:1100px) {

    .HomeHero .HeroText .Title .TitleTwo,
    .HomeHero .HeroText .Title .TitleTwo span {
        font-size: 10vw;
        line-height: 10vw;
        overflow: visible;
    }
}

/* ---------------------------------- loader --------------------------------- */
body.no-scroll {
    overflow: hidden;
    height: 100vh;
}

.LoadingSection {
    width: 100%;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-Main);
    overflow: hidden;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.LoadingSection .LoadingContent {
    width: 100%;
    height: 100%;
    overflow: hidden;

}

.LoadingSection .LoadingVideo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.LoadingSection .LoadingVideo .lottie-wrapper {
    width: 125px;
    height: auto;
    margin: 0 auto;
    transform: scale(1.8);
    transform-origin: center;
    -webkit-transform: scale(1.8);
    -moz-transform: scale(1.8);
    -ms-transform: scale(1.8);
    -o-transform: scale(1.8);
}

@media (max-width:768px) {
    .LoadingSection .LoadingVideo .lottie-wrapper {
        width: 100px;
        height: auto;
        margin: 0 auto;
        transform: scale(1.8);
        transform-origin: center;
        -webkit-transform: scale(1.8);
        -moz-transform: scale(1.8);
        -ms-transform: scale(1.8);
        -o-transform: scale(1.8);
    }
}

@media (max-width:420px) {
   .navBarContent .Info .Information ._TEL .Symbols {
    display: none;
}
}