@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

:root {

    --the-color-1: #FFFFFF;
    --the-color-2: #000000;
    --the-color-3: #393E46;
    --the-color-4: #242424;
    --the-color-5: #F7F7F7;
    --the-color-6: #828FA0;
    --the-font-family-jost: "Jost", sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--the-font-family-jost);
    color: var(--the-color-2);
}

body {
    background-color: var(--the-color-1);
}

.Title-Text {
    font-family: var(--the-font-family-jost);
    color: var(--the-color-2);
    font-weight: 700;
    font-size: 64px;
    line-height: 54px;
}

.Heading-Text {
    font-family: var(--the-font-family-jost);
    color: var(--the-color-2);
    font-weight: 700;
    font-size: 45px;
    line-height: 45px;
}

.Subheading-Text {
    font-family: var(--the-font-family-jost);
    color: var(--the-color-2);
    font-weight: 700;
    font-size: 24px;
}

.Para-Text {
    font-family: var(--the-font-family-jost);
    color: var(--the-color-2);
    font-weight: 400;
    font-size: 16px;
}

#backToTop,
#backToTop i {
    transition: all .5s;
}

#backToTop:hover {
    background-color: var(--the-color-2);
}

#backToTop:hover i {
    color: var(--the-color-1);
}

#mobile-menu {
    transform: translateX(100%);
    transition: all .5s;
}

.Display {
    transform: translateX(0%) !important;
    transition: all .5s;
}

.Item,
.Active-Link {
    border-bottom: 2px solid transparent;
    transition: all .5s ease-in-out;
}

.Item:hover {
    border-color: var(--the-color-5);
}

.Active-Link {
    border-color: var(--the-color-5);
}

.Button {
    width: fit-content;
    display: inline-block;
    padding: 10px 30px;
    background-color: var(--the-color-1);
    color: var(--the-color-2) !important;
    border: 1px solid var(--the-color-2);
    border-radius: 5px;
    transition: all .5s;
}

.Transparent-Button {
    width: fit-content;
    display: inline-block;
    padding: 10px 30px;
    background-color: var(--the-color-2);
    color: var(--the-color-1);
    border-radius: 5px;
    border: 1px solid var(--the-color-2);
    transition: all .5s;
}

.Button:hover {
    background-color: var(--the-color-4);
    color: var(--the-color-1) !important;
}

.Button:hover i {
    color: var(--the-color-1) !important;
}

.Transparent-Button:hover {
    background-color: var(--the-color-1);
    color: var(--the-color-2);
}

.Feature-Card,
.Feature-Card h6,
.Feature-Card p,
.Feature-Card span {
    transition: all .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.Feature-Card::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--the-color-3);
    left: 0px;
    top: -100%;
    z-index: 0;
    transition: all .5s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.Feature-Card:hover::before {
    top: 0;
}

.Feature-Card:hover h6,
.Feature-Card:hover p {
    color: var(--the-color-1);
}

.Feature-Card:hover span {
    background-color: var(--the-color-2);
    border-color: var(--the-color-2);
    color: var(--the-color-1);
}

.Customizable-Card,
.Customizable-Card h3,
.Customizable-Card p,
.Customizable-Card li {
    transition: all .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.Customizable-Card::before {
    position: absolute;
    content: "";
    width: 0px;
    height: 0px;
    background-color: var(--the-color-3);
    left: 0%;
    top: -50%;
    z-index: 0;
    transition: all .5s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.Customizable-Card:hover::before {
    width: 100%;
    height: 100%;
    top: 0;
}

.Customizable-Card:hover h3,
.Customizable-Card:hover p,
.Customizable-Card:hover li,
.Customizable-Card:hover i,
.Customizable-Card:hover span {
    color: var(--the-color-1) !important;
}

.Reseller-Card {
    transition: all .5s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.Reseller-Card:hover {
    border-color: var(--the-color-2) !important;
}

.Tag {
    position: relative;
}

.Tag::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    right: -100%;
    background-color: #2563EB;
}

.Animation-Drop {
    animation-name: dropAnimation;
    animation-duration: 5s;
    animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
    animation-fill-mode: forwards;
    animation-delay: 0s;
    animation-iteration-count: infinite;
}

.Case-Card,
.Case-Layer {
    transition: all 500ms;
}

.Case-Layer {
    background-color: var(--the-color-2) !important;
    opacity: .9;
    left: 0%;
    bottom: -100%;
}

.Case-Card:hover .Case-Layer {
    bottom: 0%;
    background-color: #14305D;
}

@keyframes dropAnimation {
    0% {
        transform: translateY(0);
    }

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

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

.Social-Link {
    transition: all .5s ease-in-out;
}

.Social-Link:hover {
    background-color: var(--the-color-1);
}

.Social-Link:hover i {
    color: var(--the-color-2) !important;
}

.Banner-Section img:first-child {
    filter: contrast(0%);
}

@media screen and (max-width: 400px) {
    .Title-Text {
        font-weight: 600;
        font-size: 32px;
        line-height: 32px;
    }

    .Heading-Text {
        font-weight: 600;
        font-size: 28px;
        line-height: 28px;
    }

    .Subheading-Text {
        font-weight: 600;
        font-size: 20px;
        line-height: 20px;

    }

    .Para-Text {
        font-weight: 400;
        font-size: 16px;
        line-height: 16px;
    }

    .Button {
        padding: 15px 30px;
    }

    .Transparent-Button {
        padding: 15px 30px;
    }

    .Tag::before {
        height: 76%;
    }

}