/*------------------------------------------------------------------
Table of contents

    I.      Global Page Design
    II.     Fonts
    III.    Body
    IV.     Buttons
    V.      Animations
    VI.     Carousel
    VII.    Notification Bell
    VIII.   Graph Stuff
    IX.     
    X.      
    XI.     
    XII.    
    XIII.   

-------------------------------------------------------------------
[Color codes]

KTN Green:      #46b531;    #287019;
Dragonblade:    #B71C1C;    #7A1212;
Valorant:       #5F46EA;    #392F7E;
Warzone:        #CF4E00;    #8A3200;
Halo:           #005cab;    #003C60;
Marvel Rivals:  #;    #;

-------------------------------------------------------------------*/



:root {
    /* KTN Accent Color */
    --accent-color: #46b531;
    --accent-color-hover: #287019;
    --accent-color-glow: #46b531aa;
    /* Blue */
    --accent-color2: #4091CC;
    --accent-color2-glow: #4091CCf1;
    /* Bright Red */
    --bright-red: #fa3e3e;
    /* Warning Colors */
    --warning-bg: #382404;
    --warning-text: #f2cf62;
    --warning-border: #d39e00;
    /* Success Colors */
    --success-bg: #081c14;
    --success-text: #74b698;
    --success-border: #28a745;
    /* Danger Colors */
    --danger-bg: #2d0a0e;
    --danger-text: #cd727a;
    --danger-border: #852129;
    /* Bootstrap Success */
    --success-color: #198754;
    /* Bootstrap Warning */
    --warning-color: #ffc107;
    /* Bootstrap Danger */
    /* Black & Near Black Colors */
    --black1: #111111;
    --black2: #222222;
    --black3: #333333;
}


/*-----------------------------

    I. Global Page Design

-----------------------------*/
.page {
    min-height: 100vh; /* Ensures it takes up at least the full viewport height */
    display: flex; /* Optional: Helps with centering content if needed */
    flex-direction: column; /* Keeps content stacked */
}

.background1 {
    background: radial-gradient(circle at 74.11507924397786% 94.03727213541667%, #222323 0%, 17.5%, rgba(34, 35, 35, 0) 35%), radial-gradient(circle at 58.97912343343099% 66.87540690104167%, rgba(70, 181, 49, 0.61) 0%, 14.7%, rgba(22, 87, 217, 0) 30%), radial-gradient(circle at 0.5939420064290365% 57.086690266927086%, rgba(70, 181, 49, 0.38) 0%, 7.9799999999999995%, rgba(22, 87, 217, 0) 14%), radial-gradient(circle at 13.200607299804688% 9.217885335286459%, rgba(22, 87, 217, 0.24) 0%, 16.5%, rgba(162, 56, 255, 0) 55%), radial-gradient(circle at 100% 37.314453125%, rgba(70, 181, 49, 0.51) 0%, 9.36%, rgba(22, 87, 217, 0) 18%), radial-gradient(circle at 78.61783345540364% 57.83340454101562%, rgba(22, 87, 217, 0.65) 0%, 17.5%, rgba(162, 56, 255, 0) 35%), radial-gradient(circle at 1.8846766153971355% 94.78581746419272%, #222323 0%, 8.6%, rgba(34, 35, 35, 0) 20%), radial-gradient(circle at 48.9013671875% 49.521484375%, #000000 0%, 100%, rgba(0, 0, 0, 0) 100%);
    z-index: -2;
}


/* Scroll Bar */
::-webkit-scrollbar {
    width: 12px;
    /* Width of the vertical scrollbar */
}

/* The ::-webkit-scrollbar-track pseudo-elements affect the track (progress bar) of the scrollbar */
::-webkit-scrollbar-track {
    background: var(--black1);
    /* Color of the tracking area */
}

/* The ::-webkit-scrollbar-thumb pseudo-elements affect the draggable scrolling handle */
::-webkit-scrollbar-thumb {
    background-color: var(--accent-color);
    /* Color of the scroll thumb */
    border-radius: 20px;
    /* Roundness of the scroll thumb */
    border: 3px solid var(--black1);
    /* Creates padding around scroll thumb */
}

/* Color presets */
.colored {
    color: var(--accent-color);
}

.colored2 {
    color: var(--accent-color2);
}

/* NavBar Icon (Mobile) */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* All Glow Effects */
.glow-nh {
    will-change: filter;
    transition: filter 0ms;
    filter: drop-shadow(0 0 0.5em var(--accent-color-glow));
}

.glow {
    will-change: filter;
    transition: filter 300ms;
}

    .glow:hover {
        filter: drop-shadow(0 0 2em var(--accent-color-glow));
    }

.glow-min {
    will-change: filter;
    transition: filter 300ms;
}

    .glow-min:hover {
        filter: drop-shadow(0 0 0.5em var(--accent-color-glow));
    }

.glow2 {
    will-change: filter;
    transition: filter 300ms;
}

    .glow2:hover {
        filter: drop-shadow(0 0 2em var(--accent-color2-glow));
    }

    .glow2:active {
        filter: drop-shadow(0 0 2em var(--accent-color2-glow));
    }

.glow-white {
    will-change: filter;
    transition: filter 300ms;
}

    .glow-white:hover {
        filter: drop-shadow(0 0 0.75em #ffffff6c);
        transition: filter 300ms;
    }

/* Accordion Styling */
.accordion-button {
    background-color: var(--black3);
    color: #fff;
    font-size: 18px;
}

    .accordion-button:not(.collapsed) {
        background-color: var(--accent-color);
        color: black;
    }

.accordion-collapse {
    background-color: var(--black3);
    color: #fff;
    font-size: 18px;
}

.accordion-body {
    background-color: var(--black2);
    color: #fff;
    font-size: 18px;
}

.cursor-pointer {
    cursor: pointer;
}


/* Link Styling */
/* Link Styling */
.link, a {
    color: white;
    text-decoration: none;
}

    .link:visited, a:visited {
        color: white;
        text-decoration: none;
    }

    .link:hover, a:hover {
        color: var(--accent-color);
        text-decoration: none;
    }

    .link:active, a:active {
        color: white;
        text-decoration: none;
    }

    .link:focus, a:focus {
        color: white;
        text-decoration: underline;
    }

.watch-competitor {
    border: 2px;
    border-color: var(--accent-color);
    border-style: solid;
}

.animation-element {
    color: var(--accent-color);
}


.desktop {
    /* CSS rules for larger than mobile devices */
}

@media (max-width: 991px) {
    .desktop {
        display: none;
    }
}


.mobile {
    /* CSS rules for mobile devices */
}

@media (min-width: 992px) {
    .mobile {
        display: none;
    }
}

.alert-warning-dark {
    background-color: var(--warning-bg);
    color: var(--warning-text);
    border-color: var(--warning-border);
    font-size: 14px;
}

.alert-success-dark {
    background-color: var(--success-bg);
    color: var(--success-text);
    border-color: var(--success-border);
    font-size: 14px;
}

.alert-danger-dark {
    background-color: var(--danger-bg);
    color: var(--danger-text);
    border-color: var(--danger-border);
    font-size: 14px;
}

.warning-dark {
    background-color: #382404;
    color: #f2cf62;
    border-color: #d39e00;
}


/* Completed Roadmap Items */
.timeline {
    border-left: 1px solid var(--success-color);
    position: relative;
    list-style: none;
}

    .timeline .timeline-item {
        position: relative;
    }

        .timeline .timeline-item:after {
            position: absolute;
            display: block;
            top: 0;
            background-color: var(--success-color);
            left: -38px;
            border-radius: 50%;
            height: 11px;
            width: 11px;
            content: "";
            z-index: 1; /* Keep the dot on top */
        }

        .timeline .timeline-item:before {
            position: absolute;
            content: "";
            top: 0px; /* Center the pulse relative to the dot */
            left: -38px; /* Center the pulse relative to the dot */
            height: 11px;
            width: 11px;
            border: 1px solid var(--success-color);
            border-radius: 50%;
            opacity: 0;
            animation: radar-pulse 2s infinite ease-out;
        }

/* Radar Pulse Animation */
@keyframes radar-pulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(4); /* Adjust to make the pulse larger */
        opacity: 0;
    }
}


/* Pending Roadmap Items */
.timeline-pending {
    border-left: 1px solid var(--warning-color);
    position: relative;
    list-style: none;
}

    .timeline-pending .timeline-item {
        position: relative;
    }

        .timeline-pending .timeline-item:after {
            position: absolute;
            display: block;
            top: 0;
            background-color: var(--warning-color);
            left: -38px;
            border-radius: 50%;
            height: 11px;
            width: 11px;
            content: "";
            z-index: 1; /* Keep the dot on top */
        }

        .timeline-pending .timeline-item:before {
            position: absolute;
            content: "";
            top: 0px; /* Center the pulse relative to the dot */
            left: -38px; /* Center the pulse relative to the dot */
            height: 11px;
            width: 11px;
            border: 1px solid var(--warning-color);
            border-radius: 50%;
            opacity: 0;
            animation: radar-pulse 2s infinite ease-out;
        }

/* Radar Pulse Animation */
@keyframes radar-pulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(4); /* Adjust to make the pulse larger */
        opacity: 0;
    }
}

.step-option {
    background-color: var(--black1);
    border-color: var(--accent-color) !important;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease; /* Add smooth transition */
}

    .step-option.active {
        background-color: var(--accent-color-hover);
        color: white;
    }




/* Circle background and centering for SVG */
.svg-circle {
    width: 60px; /* Increased the size of the pie chart */
    height: 60px;
    background-color: black; /* Black circle */
    border-radius: 50%; /* Make it a circle */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Allow absolute positioning of icon */
}

    /* Adjust the size of the pie chart SVG */
    .svg-circle .pie-chart {
        width: 60px; /* Size of the pie chart */
        height: 60px; /* Size of the pie chart */
        transform: rotate(-90deg); /* Rotate the pie chart 90 degrees counter-clockwise */
    }

    /* Position the role icon on top of the pie chart */
    .svg-circle .role-icon {
        width: 25px; /* Adjust icon size */
        height: 25px; /* Adjust icon size */
        position: absolute;
        top: 18px; /* Nudged down slightly */
        left: 50%;
        transform: translateX(-50%); /* Center the icon horizontally */
        color: white; /* Icon color */
    }

select.form-control {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
}









/*-----------------------------

    Loading Page Design

-----------------------------*/

/* Logo wrapper */
.loading-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 0;
}

    /* SVG responsiveness */
    .loading-logo svg {
        width: 100%;
        max-width: 400px; /* cap the size */
        height: auto;
    }

    /* Path animation */
    .loading-logo path {
        fill: transparent;
        stroke: white;
        stroke-width: 8;
        stroke-dasharray: 15000; /* much larger, smoother */
        stroke-dashoffset: 15000;
        animation: logo-trace 1.5s linear forwards, logo-fill 0.5s ease forwards 1.5s;
    }

@keyframes logo-trace {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes logo-fill {
    to {
        fill: #fff; /* change this to your brand color if needed */
        stroke: transparent;
    }
}












/*-----------------------------

    II. Fonts

-----------------------------*/
.inter-thin {
    font-family: "Inter", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.inter-extralight {
    font-family: "Inter", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.inter-light {
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.inter-regular {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.inter-medium {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.inter-semibold {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.inter-bold {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.inter-extrabold {
    font-family: "Inter", sans-serif;
    font-weight: 800;
    font-style: normal;
}

.inter-black {
    font-family: "Inter", sans-serif;
    font-weight: 900;
    font-style: normal;
}

/* Italic variants */
.inter-thin-italic {
    font-family: "Inter", sans-serif;
    font-weight: 100;
    font-style: italic;
}

.inter-extralight-italic {
    font-family: "Inter", sans-serif;
    font-weight: 200;
    font-style: italic;
}

.inter-light-italic {
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.inter-regular-italic {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.inter-medium-italic {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.inter-semibold-italic {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-style: italic;
}

.inter-bold-italic {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.inter-extrabold-italic {
    font-family: "Inter", sans-serif;
    font-weight: 800;
    font-style: italic;
}

.inter-black-italic {
    font-family: "Inter", sans-serif;
    font-weight: 900;
    font-style: italic;
}















/*-----------------------------

    III. Body

-----------------------------*/

body {
    background: radial-gradient(circle at 74.11507924397786% 94.03727213541667%, #222323 0%, 17.5%, rgba(34, 35, 35, 0) 35%), radial-gradient(circle at 58.97912343343099% 66.87540690104167%, rgba(70, 181, 49, 0.61) 0%, 14.7%, rgba(22, 87, 217, 0) 30%), radial-gradient(circle at 0.5939420064290365% 57.086690266927086%, rgba(70, 181, 49, 0.38) 0%, 7.9799999999999995%, rgba(22, 87, 217, 0) 14%), radial-gradient(circle at 13.200607299804688% 9.217885335286459%, rgba(22, 87, 217, 0.24) 0%, 16.5%, rgba(162, 56, 255, 0) 55%), radial-gradient(circle at 100% 37.314453125%, rgba(70, 181, 49, 0.51) 0%, 9.36%, rgba(22, 87, 217, 0) 18%), radial-gradient(circle at 78.61783345540364% 57.83340454101562%, rgba(22, 87, 217, 0.65) 0%, 17.5%, rgba(162, 56, 255, 0) 35%), radial-gradient(circle at 1.8846766153971355% 94.78581746419272%, #222323 0%, 8.6%, rgba(34, 35, 35, 0) 20%), radial-gradient(circle at 48.9013671875% 49.521484375%, #000000 0%, 100%, rgba(0, 0, 0, 0) 100%);
    color: #FFF;
    font-size: 16px;
    line-height: 1.5rem; /* 24px */
    max-width: 100%;
    overflow-x: hidden;
    font-family: 'Inter';
    margin: 0;
    padding: 0;
}

h1 {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.dropdown-menu .dropdown-item:hover {
    transition: background-color 0.3s ease;
    background-color: #000;
}

.nav-link {
    color: #FFF;
    transition: color 0.2s ease !important;
}

    .nav-link:hover {
        transition: color 0.2s ease !important;
        color: var(--accent-color) !important;
    }

.border-purple {
    border-color: #404040;
}


.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

    .background-video iframe {
        position: absolute;
        top: -20px;
        /* Adjust the top position to remove the black bar */
        left: 0;
        width: 100%;
        height: 100vh;
        /* Set the height to cover the viewport */
    }

.bg-purple {
    background-color: #6c2cfc;
}

.bg-cyan {
    background-color: cyan;
}













/*-----------------------------

    IV. Buttons

-----------------------------*/

.btn-primary {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    outline: none;
    border: none;
    transition: background-color 0.3s ease !important;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-style: normal;
}

    .btn-primary:hover {
        transition: background-color 0.3s ease !important;
        background-color: var(--accent-color-hover);
        border-color: var(--accent-color-hover);
        border: none;
        color: #FFF;
    }

.btn-red {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #FFF;
    outline: none;
    border: none;
    transition: background-color 0.3s ease !important;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-style: normal;
}

    .btn-red:hover {
        transition: background-color 0.3s ease !important;
        background-color: #FFF;
        border-color: #FFF;
        border: none;
        color: #000;
    }



.btn-outline-primary {
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-style: normal;
}

    .btn-outline-primary:hover {
        background-color: #131313 !important;
        border-color: #fff !important;
        color: #fff !important;
    }

.btn-discord {
    background-color: #7289da;
    border-color: #7289da;
    outline: none;
    border: none;
    transition: background-color 0.3s ease !important;
    color: #fff;
}

    .btn-discord:hover {
        transition: background-color 0.3s ease !important;
        background-color: #5B6DAE;
        border-color: #5B6DAE;
        border: none;
        color: #FFF;
    }

.btn-twitch {
    background-color: #6441a5;
    border-color: #6441a5;
    outline: none;
    border: none;
    transition: background-color 0.3s ease !important;
}

    .btn-twitch:hover {
        transition: background-color 0.3s ease !important;
        background-color: #523c7c;
        border-color: #523c7c;
        border: none;
        color: #FFF;
    }




/*-----------------------------

    V. Animations

-----------------------------*/


/* Fade In Up Animation */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 25%, 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

.fade-in-up {
    opacity: 0;
    animation-fill-mode: forwards;
    animation-name: fadeInUp;
    animation-duration: 2s;
    animation-delay: 2s;
}

.fade-in-up2 {
    opacity: 0;
    animation-fill-mode: forwards;
    animation-name: fadeInUp;
    animation-duration: 2s;
    animation-delay: 0.2s;
}



/* Fade In Down Animation */
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -25%, 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

.fade-in-down {
    opacity: 0;
    animation-name: fadeInDown;
    animation-duration: 2s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
}


/* Fade In Down Animation */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 0%, 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

.fade-in {
    opacity: 0;
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
}


/* Scroll R -> L Animation */
@keyframes scroll {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

.scroll-container {
    overflow: hidden;
}

.scroll {
    width: 200%;
    /* Adjust according to the number of images */
    overflow: visible;
    white-space: nowrap;
    animation: scroll 60s linear infinite;
    display: inline-block;
    height: 50px;
    width: auto;
}

    .scroll a img {
        pointer-events: none;
    }

    .scroll a {
        pointer-events: auto;
    }


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

    100% {
        transform: rotate(360deg);
    }
}

.gradient {
    z-index: -1;
    --size: 250px;
    --speed: 50s;
    --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);
    width: 50%;
    height: 70vh;
    filter: blur(calc(var(--size) / 5));
    background-image: linear-gradient(hsl(251, 100%, 74%), hsl(204, 58%, 50%));
    animation: rotate var(--speed) var(--easing) alternate infinite;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    position: absolute;
    top: 70%;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    place-content: center;
    align-items: center;
    overflow: hidden;
    background-color: var(--black2);
    transition: all 0.25s ease-out;
}


@media (min-width: 720px) {
    .gradient {
        --size: 500px;
    }
}











/*-----------------------------

    VI. Carousel

-----------------------------*/


.carousel-img {
    height: 56.25vw;
    /* 16:9 aspect ratio for mobile */
    object-fit: cover;
    /* Ensure the image covers the entire space */
}

@media (min-width: 768px) {

    /* For tablets and above, use 16:9 aspect ratio based on viewport height */
    .carousel-img {
        height: 65vh;
        /* 16:9 aspect ratio */
    }
}









/*-----------------------------

    VII. Notification Bell

-----------------------------*/


/* Define what each icon button should look like */
.notif {
    color: white;
    display: inline-block; /* Inline elements with width and height. TL;DR they make the icon buttons stack from left-to-right instead of top-to-bottom */
    position: relative; /* All 'absolute'ly positioned elements are relative to this one */
    padding: 6px 5px; /* Add some padding so it looks nice */
    font-size: 25px;
    cursor: pointer;
}

/* Make the badge float in the top right corner of the button */
.button_badge {
    background-color: var(--bright-red);
    border-radius: 2px;
    color: white;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 2px;
    padding-right: 2px;
    margin: 0px;
    font-size: 13px;
    position: absolute; /* Position the badge within the relatively positioned button */
    top: -3px;
    right: 0;
    line-height: 1.5em;
    min-width: 15px;
    text-align: center;
    cursor: pointer;
}







/*-----------------------------

    VIII. Graph Stuff

-----------------------------*/

.card-raised {
    background: #111 !important;
    border: 1px solid #333;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    transition: none !important;
}

    .card-raised:hover {
        transform: none !important;
        box-shadow: 0 6px 20px rgba(0,0,0,0.35) !important;
    }

.icon-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    opacity: 0.9;
}

.progress-bar {
    display: flex !important;
    align-items: center !important;
}