@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Mona+Sans:ital,wght@0,200..900;1,200..900&display=swap');

:root {
    --primary-color: #FF6600;
    --secondary-color: #069983;
    --white-color: #ffffff;
    --my-font: 'Mona Sans', sans-serif;
}

* {
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: #121212;
    color: var(--white-color);
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

.primary-color {
    color: var(--primary-color) !important;
}

.secondary-color {
    color: var(--secondary-color) !important;
}

.my-font {
    font-family: var(--my-font) !important;
}

.full-height {
    min-height: 100dvh;
}

@keyframes spinSlow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.animate-spin-slow {
    animation: spinSlow 2s linear infinite;
}

header.scroll-on {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 49;
    transition: all ease-in-out 0.5s;
    box-shadow: 0 -2px 20px 5px #3d3d3d21;
    animation: fadeInDown 0.45s ease-in-out;
    margin-top: 0;
}

@keyframes fadeInDown {
    0% {
        top: -30%;
    }

    50% {
        top: -15%;
    }

    100% {
        top: 0;
    }
}


header.scroll-on {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 49;
    transition: all ease-in-out 0.5s;
    box-shadow: 0 -2px 20px 5px #3d3d3d21;
    animation: fadeInDown 0.45s ease-in-out;
}

@keyframes fadeInDown {
    0% {
        top: -30%;
    }

    50% {
        top: -15%;
    }

    100% {
        top: 0;
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* Company Text Aniamtion */
@keyframes borderMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Text Glow Animation */
@keyframes textGlow {

    0%,
    100% {
        text-shadow: 0 0 5px #f59e0b, 0 0 10px #f59e0b;
    }

    50% {
        text-shadow: 0 0 15px #f59e0b, 0 0 25px #f59e0b;
    }
}

.animated-border {
    background: linear-gradient(270deg, #f91867, #22d3ee, #ec8b04, #4f46e5);
    background-size: 400% 400%;
    animation: borderMove 6s linear infinite;
}

.text-title {
    color: #000;
    /* base black */

    background: linear-gradient(90deg,
            #ff6600 0%,
            #000 40%,
            #ff6600 50%,
            #ff6600 60%,
            #000 100%);

    background-size: 200% 100%;
    background-repeat: no-repeat;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Slow + continuous + no gap */
    animation: colorMove 6s linear infinite;
}

@keyframes colorMove {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.cover {
    background-color: rgb(0, 0, 0);
    width: 97%;
    border-radius: 10px;
    transform: rotateX(13deg);
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 7px;
    box-shadow: 0px 1px 5px 1px #fb923c;
}

.button {
    cursor: pointer;
    padding-left:  10px;
    padding-right:  10px;
    border: 1px solid #836957;
    background: linear-gradient(to bottom,
            #3a3a3a 0%,
            /* top light */
            #1c1c1c 40%,
            #0a0a0a 100%
            /* bottom dark */
        );
    box-shadow: 0px 4px 0px 0.2px #fb923c;
    height: 50px;
    min-width: 70px;
    border-radius: 8px;
    transform: rotateX(13deg);
    z-index: 2;
    position: relative;
    transition: 80ms;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1.3;
}

.d3warpper {
    perspective: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    scale: 1;
}

.button:active {
    box-shadow: 0px 4px 0px 0.2px rgb(116, 116, 116, 0);
    transform: translateY(4.5px);
    transition: 80ms;
}

.button:hover {
    box-shadow: 0px 4px 0px 0.2px rgb(116, 116, 116, 0);
    transform: translateY(4.5px);
    transition: 80ms;
    color: #fb923c;
}

.png-shadow {
    filter: drop-shadow(0 2px 6px rgba(255, 132, 1, 0.8));
    animation: animate 2.5s ease-in-out infinite;
    transform-origin: center;
}

/* Smooth breathing effect */
@keyframes animate { 
    0% { 
        transform: scale(0.9);
        filter: drop-shadow(0 2px 4px rgba(255,132,1,0.6));
    } 
    50% { 
        transform: scale(1.08);
        filter: drop-shadow(0 4px 12px rgba(255,132,1,1));
    } 
    100% { 
        transform: scale(0.9);
        filter: drop-shadow(0 2px 4px rgba(255,132,1,0.6));
    } 
}