@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 {
    color: var(--white-color);
    background: #121212 url(../images/dashboard-bg.webp) no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

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;
}


/* 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, #29ee22, #0478ec, #e68507);
    background-size: 200% 200%;
    /* animation: borderMove 6s linear infinite; */
}
/* Company Text Aniamtion */
/* @keyframes borderMove {
    0% {
        background-position: 0% 50%;
    }

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

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


.text-title {
    color: #fff;
    /* 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;
    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: 8px;
    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;
}

.cover.cover-2 {
  box-shadow: 0px 1px 5px 1px #7aafe7;
}

.button.button-2 {
  box-shadow: 0px 4px 0px 0.2px #61eefd;
  border: 1px solid #53878d;
}

.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.4)); */
    animation: animate 2.5s ease-in-out infinite;
    transform-origin: center;
}

/* Smooth breathing effect */
@keyframes animate { 
    0% { 
        transform: scale(0.95);
        filter: drop-shadow(0 2px 4px rgba(255,132,1,0.2));
    } 
    50% { 
        transform: scale(1.04);
        filter: drop-shadow(0 4px 12px rgba(255,132,1,0.4));
    } 
    100% { 
        transform: scale(0.95);
        filter: drop-shadow(0 2px 4px rgba(255,132,1,0.2));
    } 
}
.img-move{
    animation: animate2 2.5s ease-in-out infinite;
    transform-origin: center;
}
@keyframes animate2 { 
    0% { 
        transform: scale(0.95);
    } 
    50% { 
        transform: scale(1.04);
    } 
    100% { 
        transform: scale(0.95);
    } 
}








/* reusable animated border card */

.r-card{
    position: relative;
    border-radius: 12px;
    padding: 1px;
    overflow: hidden;
    --border-angle:0turn;
    background:
      conic-gradient(from var(--border-angle), #0000, #0000) padding-box,
      var(--card-border) border-box;
    border:2px solid transparent;
    animation:r-spin 4s linear infinite;
}

@keyframes r-spin{
    to{
        --border-angle:1turn;
    }
}

@property --border-angle{
    syntax:"<angle>";
    inherits:true;
    initial-value:0turn;
}

/* glass inner layer */

.r-card-body{
    border-radius:10px;
}

.t1{--card-border:conic-gradient(from var(--border-angle),transparent 15%,#fb923c20,#f9731665 90%,transparent);}
.t2{--card-border:conic-gradient(from var(--border-angle),transparent 15%,#22c55e20,#16a34a65 90%,transparent);}
.t3{--card-border:conic-gradient(from var(--border-angle),transparent 15%,#3b82f620,#6366f160 90%,transparent);}
.t4{--card-border:conic-gradient(from var(--border-angle),transparent 15%,#ec489920,#be185d65 90%,transparent);}
.t5{--card-border:conic-gradient(from var(--border-angle),transparent 15%,#a855f720,#7e22ce65 90%,transparent);}
.t6{--card-border:conic-gradient(from var(--border-angle),transparent 15%,#14b8a6,#0f766e 90%,transparent);}
.t7{--card-border:conic-gradient(from var(--border-angle),transparent 15%,#eab30820,#ca8a0465 90%,transparent);}
.t8{--card-border:conic-gradient(from var(--border-angle),transparent 15%,#ef444420,#b91c1c65 90%,transparent);}

.cardbg1{background: linear-gradient(325deg,#f97316,#fb923c);}
.cardbg2{background: linear-gradient(325deg,#16a34a,#22c55e);}
.cardbg3{background: linear-gradient(325deg,#2563eb,#60a5fa);}
.cardbg4{background: linear-gradient(325deg,#be185d,#ec4899);}
.cardbg5{background: linear-gradient(325deg,#7e22ce,#a855f7);}
.cardbg6{background: linear-gradient(325deg,#0f766e,#14b8a6);}
.cardbg7{background: linear-gradient(325deg,#ca8a04,#eab308);}
.cardbg8{background: linear-gradient(325deg,#b91c1c,#ef4444);}

.quotePanel {
    position: relative;
    --border-angle: 0turn;
    --main-bg: conic-gradient(from var(--border-angle), #000000, #000000 5%, #000000 60%, #000000 95%);
    background: var(--main-bg) padding-box, var(--gradient-border) border-box, var(--main-bg) border-box;
    background-position: center center;
    -webkit-animation: bg-spin 3s linear infinite;
    animation: bg-spin 3s linear infinite;
    border: solid 2px transparent;
    z-index: 1;
}

@-webkit-keyframes bg-spin {
    to {
        --border-angle: 1turn;
    }
}

@keyframes bg-spin {
    to {
        --border-angle: 1turn;
    }
}

@property --border-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
}