body {
    font-family: 'Poppins', sans-serif;
}

/* Custom scrollbar styles */
::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}
::-webkit-scrollbar-track {
    background: #f0f0f0; /* Background color of the scrollbar track */
}
::-webkit-scrollbar-thumb {
    background: #888; /* Color of the scrollbar thumb */
    border-radius: 4px; /* Rounded corners for the scrollbar thumb */
}
::-webkit-scrollbar-thumb:hover {
    background: #555; /* Color of the scrollbar thumb on hover */
}

#particles-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /* Full viewport height */
    z-index: -1;
    /* Place behind other content */
}

nav {
    position: relative;
    z-index: 1;
    /* Ensure the navbar is above the particles */
}

@keyframes gradientBorder {
0% {
    border-image-source: linear-gradient(45deg, #FFFFE0, #FFD700, #FF6347, #FFD700);
}
50% {
    border-image-source: linear-gradient(45deg, #FFD700, #FF6347, #FFD700, #FFFFE0);
}
100% {
    border-image-source: linear-gradient(45deg, #FFFFE0, #FFD700, #FF6347, #FFD700);
}
}


.animated-border {
    border-style: solid;
    border-image-slice: 1; 
    animation: gradientBorder 5s linear infinite; 
    border-radius: 20px;

}

.sticky-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* background-color: rgba(0, 0, 0, 0.8); Adds a semi-transparent background */
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); Adds shadow for emphasis */
    z-index: 50; /* Ensures it stays above other elements */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}

.border-gradient-gray{
    border-image: linear-gradient(to right, #ffffff, #797979, #c7c7c7) 1;
}

html,
body {
    height: 100%;
    overflow-x: hidden;
    /* Prevents white gap on the right when sidebar opens */
}

/* Custom CSS for 3D effect */
.card {
    perspective: 1000px;
}
.card-inner {
    transform-style: preserve-3d;
    transition: transform 0.8s;
}
.card:hover .card-inner {
    transform: rotateY(180deg);
}
.card-front, .card-back {
    backface-visibility: hidden;
}
.card-back {
    transform: rotateY(180deg);
}