:root {
    --bg-dark-deep: #0A0F29;
    --bg-dark-main: #10142C;
    --bg-dark-card: #1A1F3A;
    --bg-dark-card-hover: #202644;
    --text-light: #FFFFFF;
    --text-primary: #E0E0E0;
    --text-secondary: #B0B8D8;
    --text-muted: #7F89A7;
    --accent-blue: #00D1FF;
    --accent-blue-darker: #00B8E6;
    --accent-purple: #C642E0;
    --accent-pink: #FF00A8;
    --accent-orange: #FF8C00;
    --accent-green: #34D399;
    --border-color: #2A3052;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

* {
    /* margin: 0; */
    /* padding: 0; */
    scroll-behavior: smooth;
    box-sizing: border-box;
    scroll-margin-top: 120px;
    font-family: 'Poppins', sans-serif;
    /* font-weight:normal; */
}

body {
    /* font-family: var(--font-sans); */
    line-height: 2;
    font-size: 16px;
}

.container {
    max-width: 1200px;
    margin-inline: auto;
    padding: 0 20px;
}


.info ul {
    list-style: disc !important;
    margin-inline-start: 20px !important;
}

a {
    /* color: var(--accent-blue); */
    text-decoration: none;
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: none;
    font-size: 1rem;
}

.btn-primary {
    background-color: var(--accent-blue);
    color: var(--text-light);
    box-shadow: 0 4px 15px rgba(0, 209, 255, 0.3);
}

.btn-primary:hover {
    background-color: var(--accent-blue-darker);
    text-decoration: none;
}

.btn-secondary {
    background-color: var(--bg-dark-card);
    color: var(--text-light);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background-color: var(--bg-dark-card-hover);
    text-decoration: none;
}

/* Header */
.header {
    background-color: var(--bg-dark-main);
    /* Or slightly transparent */
    padding: 20px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
}

.right-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--text-light);
}

.logo svg {
    margin-right: 10px;
}

.nav-links ul {
    list-style: none;
    display: flex;
}

.nav-links li {
    margin-left: 25px;
}

.nav-links a {
    color: var(--text-secondary);
    font-weight: 500;
}

.nav-links a:hover {
    color: var(--text-light);
    text-decoration: none;
}

.nav-links li a.active {
    color: var(--text-primary);
}

.search-btn {
    background-color: var(--bg-dark-card);
    color: var(--text-primary);
    padding: 10px 20px;
    border-radius: 6px;
    /* display: flex; */
    gap: 0.5rem;
    align-items: center;
    font-weight: 500;
    transition: all 0.3s;
}

.search-btn:hover {
    background-color: var(--accent-blue);
    color: var(--text-light);
}

.hover-blue-color:hover {
    box-shadow: 0px 10px 15px 15px --accent-blue-darker;
}

/* Footer */
.footer {
    background-color: var(--bg-dark-deep);
    padding: 50px 0 30px;
    border-top: 1px solid var(--border-color);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.footer-logo-area .logo {
    margin-bottom: 15px;
}

.footer-logo-area p {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.footer-links h4 {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 15px;
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 8px;
}

.footer-links a {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.footer-links a:hover {
    color: var(--text-light);
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem;
    color: var(--text-muted);
}

.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.social-icons a {
    color: black;
    border-radius: 50%;
    /* margin-left: 15px; */
    font-size: 1.3rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* For icon size */
}

.social-icons a::after {
    content: "";
    position: absolute;
    width: 150%;
    height: 150%;
    border-radius: 50%;
    background-color: var(--text-muted);
}


.social-icons a:hover::after {
    background-color: var(--text-light);
}

.social-icons a svg {
    position: relative;
    z-index: 2;
}

/* Icon SVGs (placeholders if not fully detailed) */
.icon-placeholder svg {
    fill: var(--text-secondary);
}

#faqs ul {
    list-style: none;
}

#faqs li {
    padding: 10px 0;
    border-top: solid rgba(0, 0, 0, 0.4) 1px;
}

#faqs li h5 {
    font-weight: 500;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.tool-card {
    padding: 25px;
    border-radius: 12px;
    /* border: 1px solid var(--border-color); */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.tool-card:hover {
    transform: translateY(-5px);
    /* box-shadow: 0px 2px 2px 0px var(--accent-blue-darker); */
}

.scroll-to-top {
    color: black;
}

.tool-card-header {
    display: flex;
    margin-bottom: 15px;
}

.tool-card p.description {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 15px;
}

.tool-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.rating,
.users {
    display: flex;
    align-items: center;
}

.rating svg {
    color: #FFD700;
    margin-right: 5px;
}

.users svg {
    margin-right: 5px;
}

/* Placeholder for users icon */
.tool-category-tag {
    background-color: var(--bg-dark-main);
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    margin-top: 15px;
    display: inline-block;
}

.trending-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(45deg, #FFA500, #FF8C00);
    color: white;
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 15px;
}

.scrollbar-hidden::-webkit-scrollbar {
    display: none;
}

.user-avatar {
    height: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-dark-card);
    color: var(--text-primary);
    border-radius: 6px;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-weight: 500;
    transition: all 0.3s;
}

.user-avatar:hover {
    background-color: var(--accent-blue);
    color: var(--text-light);
}

.user-info {
    position: absolute;
    top: 150%;
    right: 0;
    padding: 1rem;
    /* padding-bottom: 0.25rem; */
    border-radius: 0.5rem;
    background-color: #0A0F29;
    display: none;
    flex-direction: column;
    gap: 15px;
}

.user-info .a {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.log-out-btn {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 8px 10px;
    border-radius: 5px;
    text-align: center;
    color: #ffffffDD;
    background-color: #ffffff11;
}

.saved-btn {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 8px 10px;
    border-radius: 5px;
    text-align: center;
    color: #00D1FF;
    background-color: #ffffff11;
}

@media only screen and (max-width: 768px) {
    .search-btn {
        padding: 10px;
    }

    .nav-links {
        display: none;
    }

    .mobile-menu-btn {
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--bg-dark-card);
        color: var(--text-primary);
        border-radius: 6px;
        display: flex;
        gap: 0.5rem;
        align-items: center;
        font-weight: 500;
        transition: all 0.3s;
    }

    .mobile-menu-btn:hover {
        background-color: var(--accent-blue);
        color: var(--text-light);
    }

    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width:600px) {
    .cards-grid {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 380px) {
    .search-btn {
        display: none;
    }
}

/* From Uiverse.io by BlackisPlay */
#ghost {
    position: relative;
    scale: 0.8;
}

#red {
    animation: upNDown infinite 0.5s;
    position: relative;
    width: 140px;
    height: 140px;
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    grid-template-rows: repeat(14, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-areas:
        "a1  a2  a3  a4  a5  top0  top0  top0  top0  a10 a11 a12 a13 a14"
        "b1  b2  b3  top1 top1 top1 top1 top1 top1 top1 top1 b12 b13 b14"
        "c1 c2 top2 top2 top2 top2 top2 top2 top2 top2 top2 top2 c13 c14"
        "d1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 d14"
        "e1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 e14"
        "f1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 f14"
        "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
        "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
        "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
        "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
        "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
        "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
        "st0 st0 an4 st1 an7 st2 an10 an10 st3 an13 st4 an16 st5 st5"
        "an1 an2 an3 an5 an6 an8 an9 an9 an11 an12 an14 an15 an17 an18";
}

@keyframes upNDown {

    0%,
    49% {
        transform: translateY(0px);
    }

    50%,
    100% {
        transform: translateY(-10px);
    }
}

#top0,
#top1,
#top2,
#top3,
#top4,
#st0,
#st1,
#st2,
#st3,
#st4,
#st5 {
    background-color: #00D1FF;
}

#top0 {
    grid-area: top0;
}

#top1 {
    grid-area: top1;
}

#top2 {
    grid-area: top2;
}

#top3 {
    grid-area: top3;
}

#top4 {
    grid-area: top4;
}

#st0 {
    grid-area: st0;
}

#st1 {
    grid-area: st1;
}

#st2 {
    grid-area: st2;
}

#st3 {
    grid-area: st3;
}

#st4 {
    grid-area: st4;
}

#st5 {
    grid-area: st5;
}

#an1 {
    grid-area: an1;
    animation: flicker0 infinite 0.5s;
}

#an18 {
    grid-area: an18;
    animation: flicker0 infinite 0.5s;
}

#an2 {
    grid-area: an2;
    animation: flicker1 infinite 0.5s;
}

#an17 {
    grid-area: an17;
    animation: flicker1 infinite 0.5s;
}

#an3 {
    grid-area: an3;
    animation: flicker1 infinite 0.5s;
}

#an16 {
    grid-area: an16;
    animation: flicker1 infinite 0.5s;
}

#an4 {
    grid-area: an4;
    animation: flicker1 infinite 0.5s;
}

#an15 {
    grid-area: an15;
    animation: flicker1 infinite 0.5s;
}

#an6 {
    grid-area: an6;
    animation: flicker0 infinite 0.5s;
}

#an12 {
    grid-area: an12;
    animation: flicker0 infinite 0.5s;
}

#an7 {
    grid-area: an7;
    animation: flicker0 infinite 0.5s;
}

#an13 {
    grid-area: an13;
    animation: flicker0 infinite 0.5s;
}

#an9 {
    grid-area: an9;
    animation: flicker1 infinite 0.5s;
}

#an10 {
    grid-area: an10;
    animation: flicker1 infinite 0.5s;
}

#an8 {
    grid-area: an8;
    animation: flicker0 infinite 0.5s;
}

#an11 {
    grid-area: an11;
    animation: flicker0 infinite 0.5s;
}

@keyframes flicker0 {

    0%,
    49% {
        background-color: #00D1FF;
    }

    50%,
    100% {
        background-color: transparent;
    }
}

@keyframes flicker1 {

    0%,
    49% {
        background-color: transparent;
    }

    50%,
    100% {
        background-color: #00D1FF;
    }
}

#eye {
    width: 40px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 10px;
}

#eye::before {
    content: "";
    background-color: white;
    width: 20px;
    height: 50px;
    transform: translateX(10px);
    display: block;
    position: absolute;
}

#eye::after {
    content: "";
    background-color: white;
    width: 40px;
    height: 30px;
    transform: translateY(10px);
    display: block;
    position: absolute;
}

#eye1 {
    width: 40px;
    height: 50px;
    position: absolute;
    top: 30px;
    right: 30px;
}

#eye1::before {
    content: "";
    background-color: white;
    width: 20px;
    height: 50px;
    transform: translateX(10px);
    display: block;
    position: absolute;
}

#eye1::after {
    content: "";
    background-color: white;
    width: 40px;
    height: 30px;
    transform: translateY(10px);
    display: block;
    position: absolute;
}

#pupil {
    width: 20px;
    height: 20px;
    background-color: var(--bg-dark-main);
    position: absolute;
    top: 50px;
    left: 10px;
    z-index: 1;
    animation: eyesMovement infinite 3s;
}

#pupil1 {
    width: 20px;
    height: 20px;
    background-color: var(--bg-dark-main);
    position: absolute;
    top: 50px;
    right: 50px;
    z-index: 1;
    animation: eyesMovement infinite 3s;
}

@keyframes eyesMovement {

    0%,
    49% {
        transform: translateX(0px);
    }

    50%,
    99% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(0px);
    }
}

#shadow {
    background-color: black;
    width: 140px;
    height: 140px;
    position: absolute;
    border-radius: 50%;
    transform: rotateX(80deg);
    filter: blur(20px);
    top: 80%;
    animation: shadowMovement infinite 0.5s;
}

@keyframes shadowMovement {

    0%,
    49% {
        opacity: 0.5;
    }

    50%,
    100% {
        opacity: 0.2;
    }
}

/* From Uiverse.io by namecho */
.switch {
    --button-width: 2em;
    --button-height: 1em;
    --toggle-diameter: 1em;
    --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
    --toggle-shadow-offset: 10px;
    --toggle-wider: 2.5em;
    --color-grey: #cccccc;
    --color-green: #4296f4;
}

.slider {
    display: inline-block;
    width: var(--button-width);
    height: var(--button-height);
    background-color: var(--color-grey);
    border-radius: calc(var(--button-height) / 2);
    position: relative;
    transition: 0.3s all ease-in-out;
}

.slider::after {
    content: "";
    display: inline-block;
    width: var(--toggle-diameter);
    height: var(--toggle-diameter);
    background-color: #fff;
    border-radius: calc(var(--toggle-diameter) / 2);
    position: absolute;
    top: var(--button-toggle-offset);
    transform: translateX(var(--button-toggle-offset));
    box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
    transition: 0.3s all ease-in-out;
}

.switch input[type="checkbox"]:checked+.slider {
    background-color: var(--color-green);
}

.switch input[type="checkbox"]:checked+.slider::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
    box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
}

.switch input[type="checkbox"] {
    display: none;
}

.switch input[type="checkbox"]:active+.slider::after {
    width: var(--toggle-wider);
}

.switch input[type="checkbox"]:checked:active+.slider::after {
    transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
}

.add-tooltip {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: black;
}

.add-tooltip .add-tooltiptext {
    visibility: hidden;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 8px;
    position: absolute;
    z-index: 1;
    bottom: 20%;
    /* above the element */
    right: 10%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    white-space: nowrap;
    font-size: small;
}

.add-tooltip:hover .add-tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* From Uiverse.io by barisdogansutcu */
.simple-loader svg {
    width: 1.5em;
    transform-origin: center;
    animation: rotate4 2s linear infinite;
}

.simple-loader circle {
    fill: none;
    stroke: white;
    stroke-width: 2;
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    animation: dash4 1.5s ease-in-out infinite;
}

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

@keyframes dash4 {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 200;
        stroke-dashoffset: -35px;
    }

    100% {
        stroke-dashoffset: -125px;
    }
}