/* /Components/ProjectCard.razor.rz.scp.css */
/* Project Card Styles */
.project-card[b-a5qkd9c3vi] {
    background-color: #676262; /* Dark background color */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Box shadow for depth */
    margin-bottom: 20px;
    max-width: 700px; /* Fixed width for the card */
    transition: box-shadow 0.3s ease;
}

.project-card:hover[b-a5qkd9c3vi] {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8); /* Subtle white glow on hover */
}

.project-header[b-a5qkd9c3vi] {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 5px;
    border-bottom: 4px solid #4CAF50; /* Add underline */
    
    color: #eae7e7; /* White text color */
}

.project-header h3[b-a5qkd9c3vi] {
    margin: 0;
    font-size: 24px;
}

.project-body[b-a5qkd9c3vi] {
    display: flex;
    flex-direction: row; /* Arrange items in a row */
    padding-bottom: 20px;
    border-bottom: 4px solid #4CAF50; /* Add underline */
}

.project-video[b-a5qkd9c3vi] {
    flex: 2; /* Take up 2/3 of the card width */
    display: flex;
    justify-content: center;
    align-items: center;
}

.project-video video[b-a5qkd9c3vi] {
    width: 100%; /* Make video take up the full width of its container */
    height: 100%;
    border-radius: 10px; /* Rounded corners for the video */
}

.project-content[b-a5qkd9c3vi] {
    flex: 1; /* Take up 1/3 of the card width */
    text-align: left; /* Align content to the left */
    color: #eae7e7; /* White text color */
    padding-left: 20px; /* Add some padding to the left */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.project-link[b-a5qkd9c3vi] {
    color: #29be2e; /* Green text color */
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    text-align: center !important;
    justify-content: center !important;
    margin-bottom: 5px;
    transition: color 0.3s ease;
}

.project-link:hover[b-a5qkd9c3vi] {
    color: #45a049; /* Darker green on hover */
}

.project-description[b-a5qkd9c3vi] {
    list-style-type: disc;
    padding-left: 20px;
}

.project-description li[b-a5qkd9c3vi] {
    margin-bottom: 5px;
}

/* Mobile Styles */
@media only screen and (max-width: 768px) {
    .project-card[b-a5qkd9c3vi] {
        max-width: 100%; /* Full width for the card on smaller screens */
        padding: 15px; /* Reduce padding */
    }
    .project-body[b-a5qkd9c3vi] {
        flex-direction: column; /* Stack items on smaller screens */
        padding-bottom: 10px; /* Reduce bottom padding */
        border-bottom: none; /* Remove underline */
    }
    .project-video[b-a5qkd9c3vi] {
        flex: none; /* Disable flex for video on smaller screens */
    }
    .project-video video[b-a5qkd9c3vi] {
        border-radius: 0; /* Remove border radius */
    }
    .project-content[b-a5qkd9c3vi] {
        padding-left: 0; /* Remove left padding */
    }
    .project-link[b-a5qkd9c3vi] {
        text-align: center; /* Center align links */
    }
    .project-description[b-a5qkd9c3vi] {
        padding-left: 15px; /* Adjust padding */
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* Navbar styles */
.navbar[b-8tt0bzs93x] {
    background-color: #121212; /* Dark background color */
    border-bottom: solid rgb(154, 232, 38) 3px;
    padding: 20px; /* Padding for the navbar */
    justify-content: center;
    display: flex;
    align-items: center; /* Center vertically */
    position: fixed; /* Fixed position */
    top: 0; /* Position at the top of the viewport */
    left: 0; /* Align to the left edge */
    right: 0; /* Align to the right edge */
    z-index: 1000; /* Ensure it's above other content */
}

.navbar-left[b-8tt0bzs93x] {
    color: #fff; /* White text color */
    font-size: 24px; /* Font size for the name */
    font-weight: bold; /* Bold font for the name */
    padding-right: 150px;
}

.navbar-right ul[b-8tt0bzs93x] {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex; /* Use flexbox for the list items */
}

.navbar-right ul li[b-8tt0bzs93x] {
    margin-left: 20px; /* Add margin to the left of each item */
}

.navbar-right ul li:first-child[b-8tt0bzs93x] {
    margin-left: 0; /* Remove margin from the first item */
}

.navbar-right ul li a[b-8tt0bzs93x] {
    color: #fff; /* White text color */
    text-decoration: none;
    font-size: 18px; /* Font size for the links */
    transition: color 0.3s ease; /* Smooth color transition */
}

.navbar-right ul li a:hover[b-8tt0bzs93x] {
    color: #4CAF50; /* Green color on hover */
}

.navbar-right ul li a.active[b-8tt0bzs93x] {
    font-weight: bold; /* Bold font for active link */
}

/* Mobile Styles */
@media only screen and (max-width: 768px) {
    .navbar[b-8tt0bzs93x] {
        padding: 10px; /* Reduce padding for the navbar on smaller screens */
    }
    .navbar-left[b-8tt0bzs93x] {
        font-size: 20px; /* Reduce font size for the name on smaller screens */
        padding-right: 100px; /* Reduce padding for the name */
    }
    .navbar-right ul li[b-8tt0bzs93x] {
        margin-left: 10px; /* Reduce margin between navbar items */
    }
    .navbar-right ul li a[b-8tt0bzs93x] {
        font-size: 16px; /* Reduce font size for links on smaller screens */
    }
}
/* /Pages/About.razor.rz.scp.css */
/* About Card Styles */
.about-card[b-v86xqwgcz6] {
    background-color: #333; /* Darker background color */
    background-image: linear-gradient(135deg, #333 25%, #444 100%);
    padding: 20px;
    border-radius: 15px; /* Softer border radius */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Enhanced box shadow */
    margin-bottom: 20px;
    margin-top: 150px;
    display: flex;
    flex-direction: column;
    max-width: 800px; /* Adjusted width for better spacing */
    transition: box-shadow 0.3s ease; /* Smooth transitions */
}

.about-card:hover[b-v86xqwgcz6] {
    box-shadow: 0 0 20px 5px rgba(76, 175, 80, 0.6); /* Green glow on hover */
}

.about-info[b-v86xqwgcz6] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px; /* Add space between columns */
}

.left-column[b-v86xqwgcz6] {
    flex: 1; /* Take up equal space */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent overflowing content */
    align-items: center; /* Center content horizontally */
}

.about-image img[b-v86xqwgcz6] {
    width: 150px; /* Adjust image size as needed */
    height: auto;
    margin-top: 10px;
    border-radius: 50%; /* Rounded image */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow to the image */
    transition: transform 0.3s ease; /* Smooth transition for image */
}

.about-image img:hover[b-v86xqwgcz6] {
    transform: scale(1.1); /* Slight zoom effect on hover */
}

.about-content[b-v86xqwgcz6] {
    text-align: center; /* Align content to the center */
    color: #fff; /* White text color */
    flex-grow: 1; /* Allow content to grow */
    overflow: auto; /* Enable content scrolling */
    margin-top: 10px; /* Add space above content */
}

.right-column[b-v86xqwgcz6] {
    flex: 1; /* Take up equal space */
    color: #fff; /* White text color */
    overflow: hidden; /* Prevent overflowing content */
}

.right-content[b-v86xqwgcz6] {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
}

.right-content h3[b-v86xqwgcz6] {
    margin-top: 0; /* Remove top margin for h3 elements */
    margin-bottom: 10px; /* Add space below h3 elements */
    border-bottom: 2px solid #4CAF50; /* Add underline */
    padding-bottom: 5px; /* Add padding below text */
    width: 100%; /* Full width for underline */
    text-align: center; /* Center text */
}

.right-content ul[b-v86xqwgcz6] {
    list-style-type: none;
    padding: 0;
    text-align: center; /* Center text */
}

.right-content ul li[b-v86xqwgcz6] {
    margin-bottom: 5px;
}

.skills-list[b-v86xqwgcz6] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    margin: 0;
}

.skills-list li[b-v86xqwgcz6] {
    background-color: #4CAF50; /* Green background color for skills */
    color: #fff; /* White text color */
    padding: 8px 15px;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth color transition */
}

.skills-list li:hover[b-v86xqwgcz6] {
    background-color: #45a049; /* Darker green on hover */
    transform: scale(1.1); /* Slight zoom effect on hover */
}

/* Mobile Styles */
@media only screen and (max-width: 768px) {
    .about-card[b-v86xqwgcz6] {
        margin-top: 50px; /* Adjust margin-top for smaller screens */
        padding: 15px; /* Reduce padding */
    }
    .about-info[b-v86xqwgcz6] {
        flex-direction: column; /* Stack columns on smaller screens */
        gap: 10px; /* Reduce gap between columns */
    }
    .left-column[b-v86xqwgcz6], .right-column[b-v86xqwgcz6] {
        flex: 1; /* Take full width on smaller screens */
    }
    .about-image img[b-v86xqwgcz6] {
        width: 100px; /* Reduce image size */
    }
}