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

.custom-font {
    font-family: 'raleway', sans-serif;
}

/* Pengenalan Nongky Styles */
/* animations */
@keyframes title {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes coffeeBackMobile {
    from {
        height: 10px;
        width: 10px;
        transform: translateY(50px) translateX(-40px);
        opacity: 0;
    }
    to {
        transform: translateY(0) translateX(0);
        opacity: 1;
    }
}

@keyframes coffeeFrontMobile {
    from {
        height: 10px;
        width: 10px;
        transform: translateY(50px) translateX(40px) rotate(11.48deg);
        opacity: 0;
    }
    to {
        transform: translateY(0) translateX(0) rotate(11.48deg);
        opacity: 1;
    }
}

@keyframes bubbleLeftMobile {
    from {
        transform: translateY(-50px) translateX(-50px);
        opacity: 0; 
    }
    to {
        transform: translateY(0) translateX(0);
        opacity: 1;
    }
}

@keyframes bubbleRightMobile {
    from {
        transform: translateY(-100px) translateX(50px);
        opacity: 0; 
    }
    to {
        transform: translateY(0) translateX(0);
        opacity: 1;
    }
}


@keyframes downloadBox {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}


.title-gradient {
    animation: title 1s ease-in;
}

.coffee-back {
    animation: coffeeBackMobile 1s ease-in;
}

.coffee-front {
    transform: rotate(11.48deg);

    animation: coffeeFrontMobile 1s ease-in;
}

.line-circle1 {
    transform: translate(-50%, -50%);
}

.line-circle2 {
    transform: translate(-50%, -50%);
}

.text-bubble {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    color: #0F5E53;
}

.left-bubble {
    animation: bubbleLeftMobile 1s ease-in;
}

.right-bubble {
    animation: bubbleRightMobile 1s ease-in
}

.line-circle1, .line-circle2 {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
}

.download-box {
    animation: downloadBox 1s ease-in;
}

.download-btn {
    background-color: #169987;
}


/* Pengenalan Nongky Page Animation (desktop) */
@keyframes coffeeBack {
    from {
        transform: translateY(50px) translateX(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0) translateX(0);
        opacity: 1;
    }
}

@keyframes coffeeFront {
    from {
        transform: translateY(50px) translateX(-50px) rotate(11.48deg);
        opacity: 0;
    }
    to {
        transform: translateY(0) translateX(0) rotate(11.48deg);
        opacity: 1;
    }
}

@keyframes textBubbleLeft {
    from {
        transform: translateY(150px) translateX(200px);
        opacity: 0; 
    }
    to {
        transform: translateY(0) translateX(0);
        opacity: 1;
    }
}

@keyframes textBubbleRight {
    from {
        transform: translateY(50px) translateX(-200px);
        opacity: 0; 
    }
    to {
        transform: translateY(0) translateX(0);
        opacity: 1;
    }
}

@media (min-width: 1200px) {
    
}

@media (min-width: 1024px){
    /* Pengenalan Nongky Page Animation Implementations (desktop) */
    .coffee-back {
        animation: coffeeBack 1s ease-in;
    }
    
    .coffee-front {
        transform: rotate(11.48deg);

        animation: coffeeFront 1s ease-in;
    }
    
    .text-bubble {
        padding: 20px;
    }

    .left-bubble {
        animation: textBubbleLeft 1s ease-in;
    }
    
    .right-bubble {
        animation: textBubbleRight 1s ease-in;
    }
}