@import url("https://fonts.cdnfonts.com/css/cocon");
@import url("https://fonts.cdnfonts.com/css/titillium-web");

.coloring-text-logo {
    background-image: url(../images/size.jpg);
    background-clip: text;
    -webkit-background-clip: text;
    background-size: cover;
    background-position: top;
    color: transparent;
}
/* .coloring-text-logo {
    background: -webkit-linear-gradient(
        43deg,
        #d46a13,
        #e3d21c,
        #03b5d4,
        #07cf9a
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: contain;
    -webkit-animation: displace 10s linear infinite;
    animation: displace 10s linear infinite;
    transition: 0.5s ease-out;
} */

@-webkit-keyframes displace {
    from {
        background-position: 0 center;
    }
    to {
        background-position: 1000px center;
    }
}

@keyframes displace {
    from {
        background-position: 0 center;
    }
    to {
        background-position: 1000px center;
    }
}

.title-text-single {
    padding: 10px;
    margin: auto;
    font-weight: 600 !important;
    align-self: center;
    width: max-content;
    text-align: center;
    font-family: 'cocon-reguler', 'Capriola', 'Fauna One', sans-serif;
    font-size: 5rem;
    letter-spacing: -1px;
}

.title-text-single .b {
    font-size: 6rem;
}


.tag-line-single {
    text-align: center;
    margin-top: -2rem !important;
    align-self: center;
    width: max-content;
    font-family: 'Titillium Web', 'Roboto', sans-serif;
    font-size: 1rem;
    color: #fff;
    position: relative;
}

@media (max-width: 600px) {
    .tag-line-single {
        font-size: 0.8rem !important;
        margin-top: -0.5rem !important;
    }
}

.tag-line-desc {
    padding: 1rem;
    width: 50%;
    text-align: center;
    margin: auto;
    align-self: center;
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
    color: #2e2e2e8f !important;
}

.typewriter {
    overflow: hidden;
    /* border-right: .15em solid rgba(255, 166, 0, 0.055); */
    white-space: nowrap;
    margin: 0 auto;
    animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}

/* The typing effect */

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink-caret {
    from,
    to {
        border-color: transparent;
    }
    50% {
        border-color: rgba(255, 166, 0, 0);
    }
}