.yetu-btn {
    background: rgb(57, 88, 154);
    background: linear-gradient(90deg, rgba(57, 88, 154, 1) 0%, rgba(89, 150, 44, 1) 30%);
    background-size: 300% 100%;
    transition: all .4s ease-in-out;
}

/*#action__btn {*/
/*    transition: color 0.1s cubic-bezier(0.16, 0.08, 0.355, 1), background 0.1s cubic-bezier(0.16, 0.08, 0.355, 1);*/
/*}*/

html {
    scroll-behavior: smooth;
}

.carousel-cell {
    width: 100%;
    /*height: 300px;*/
    /*margin-right: 10px;*/
    /* center images in cells with flexbox */
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel.is-fullscreen .carousel-cell {
    height: 100%;
}

.carousel-cell-image {
    display: block;
    max-height: 100%;
}

.carousel.is-fullscreen .carousel-cell-image {
    max-width: 100%;
}


.yetu-btn span {
    position: relative;
    transition: all 300ms ease-out;
    will-change: transform;
}

.yetu-btn:hover {
    background-image: linear-gradient(to right, #39589a, #4d69a4, #6aa141, #59962c);
    box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.yetu-btn:hover span {
    transform: translate3d(.6rem, 0, 0);
}

.yetu-btn svg {
    position: absolute;
    /*width: 1.1em;*/
    right: 0px;
    right: 1rem;
    opacity: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: all 300ms ease-out;
    will-change: right, opacity;
}

.yetu-btn:hover svg {
    opacity: 1;
    right: 1.5rem;
}

.fnt {
    font-family: 'Druk Wide';
}

.hello-heading {
    font-family: 'Druk Wide';
    max-width: 100%;
    margin: 0 auto;
    white-space: nowrap;
    padding: 0 .1em
}

#cursor {
    position: fixed;
    width: 2rem;
    height: 2rem;
    border: solid 1px yellow;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    transition: 0.35s ease width, 0.35s ease height, 0.35s ease background, 0.35s ease border;
    pointer-events: none;
}

#cursor.marquee-btn {
    width: 4rem;
    height: 4rem;
    background: rgba(245, 245, 245, 0.5);
    border: solid 1px #f5f5f5;
}

.marquee {
    background: linear-gradient(90deg, rgba(46, 70, 124, 1) 0%, rgba(52, 79, 139, 1) 10%, rgba(57, 88, 155, 1) 26%, rgba(121, 171, 84, 1) 70%, rgba(105, 161, 66, 1) 85%, rgba(89, 150, 44, 1) 100%);
    position: relative;
    overflow: hidden;
    --offset: 20vw;
    --move-initial: calc(-25% + var(--offset));
    --move-final: calc(-50% + var(--offset));

}



.marquee__inner {
    width: fit-content;
    display: flex;
    position: relative;
    transform: translate3d(var(--move-initial), 0, 0);
    animation: marquee 10s linear infinite;
}


@keyframes marquee {
    0% {
        transform: translate3d(var(--move-initial), 0, 0);
    }
    100% {
        transform: translate3d(var(--move-final), 0, 0);
    }
}


/*.marquee {*/
/*    height: 100px;*/
/*    width: 100%;*/

/*    overflow: hidden;*/
/*    position: relative;*/
/*    background: rgb(46, 70, 124);*/
/*    background: linear-gradient(90deg, rgba(46, 70, 124, 1) 0%, rgba(52, 79, 139, 1) 10%, rgba(57, 88, 155, 1) 26%, rgba(121, 171, 84, 1) 70%, rgba(105, 161, 66, 1) 85%, rgba(89, 150, 44, 1) 100%);*/
/*}*/

/*.marquee div {*/
/*    display: block;*/
/*    width: 100%;*/
/*    !*height: 100%;*!*/

/*    position: absolute;*/
/*    overflow: hidden;*/

/*    animation: marquee 5s linear infinite;*/
/*}*/

/*.marquee span {*/


/*    color:white;*/
/*    font-family: Druk Wide;*/

/*}*/

/*@keyframes marquee {*/
/*    0% { left: 0; }*/
/*    100% { left: -100%; }*/
/*}*/

@font-face {
    font-family: 'Druk Wide';
    src: url('../fonts/DrukWide.ttf');
}