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

html {
    scroll-behavior: smooth;
}

* {
    font-family: 'Roboto', sans-serif;
}

h1, h2 {
    font-family: 'Sansation', sans-serif;
    font-weight: bold;
}

header {
    background-image: url('./images/hero-image.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

main {
    color: #04151F;
}

.navbar.stickybar {
    background: #04151F;
}

.mobile-navbar .links {
    top: -20rem;
    transition: all .3s ease-in-out;
}

.mobile-navbar .links.open {
    top: 100%;
}

.underline-simple {
    position: absolute;
    background: rgba(244, 96, 54, 0.5);
    width: 100%;
    height: 30%;
    bottom: 7px;
    left: 16px;
}

.underline-simple-complete {
    position: absolute;
    background: rgba(244, 96, 54, 1);
    width: 100%;
    height: 30%;
    bottom: 7px;
    left: 16px;
}

.underline-rotate {
    position: absolute;
    background: #F46036;
    bottom: 2px;
    left: 50%;
    width: 110%;
    height: 50%;
    transform: rotate(-3deg) translateX(-50%);
}

.orange-opacity-bg {
    background: rgba(244, 96, 54, 0.5);
}

.smoothgray {
    color: rgba(4, 21, 31, 0.38);
}

.st-btn .front,
.st-btn .back {
    transition: all .3s ease-in-out;    
}

.st-btn:hover .front {
    transform: scale(1.1);
}

.st-btn:hover .back {
    transform: rotate(6deg) scale(1.1);
}

.scroll-more a {
    flex-shrink: 0;
    user-select: none;
    animation: scrollDown 1s linear alternate infinite;
}

@keyframes scrollDown {
    0% {
        transform: translateY(0px);
    }
    
    30% {
        transform: translateY(0px);
    }

    70% {
        transform: translateY(5px);
    }
    
    100% {
        transform: translateY(5px);
    }
}

#client {
    background-image: url("shapes/bg-client-shape.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
}

footer {
    background-image: url("shapes/footer-shape.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    width: 100%;
    height: 200px;
}