:where([class^="ri-"])::before { content: "\f3c2"; }
:where([class^="ri-"]) { font-family: "Remix Icons"; font-style: normal; font-weight: 400; font-size: 1.5rem; line-height: 1; text-align: center; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
:where([class^="ri-"]):not([class*="ri-"])::before { content: "\f3c2"; }
body {
font-family: 'Inter', sans-serif;
scroll-behavior: smooth;
}
.gradient-text {
background: linear-gradient(135deg, #4f46e5 0%, #10b981 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hover-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.skill-card {
position: relative;
overflow: hidden;
}
.skill-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.skill-card:hover::before {
opacity: 1;
}
.project-card {
position: relative;
overflow: hidden;
}
.project-card img {
transition: transform 0.5s ease;
}
.project-card:hover img {
transform: scale(1.1);
}
.project-overlay {
background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
transform: translateY(100%);
transition: transform 0.5s ease;
}
.project-card:hover .project-overlay {
transform: translateY(0);
}
.nav-link {
position: relative;
padding-bottom: 4px;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(135deg, #4f46e5 0%, #10b981 100%);
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
.progress-bar-fill {
animation: fillProgress 1.5s ease forwards;
}
@keyframes fillProgress {
from { width: 0; }
to { width: var(--progress); }
}
.social-icon {
transition: transform 0.3s ease, background-color 0.3s ease;
}
.social-icon:hover {
transform: translateY(-3px) scale(1.1);
}
.contact-form input,
.contact-form textarea {
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
border-color: #4f46e5;
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.button-gradient {
background: linear-gradient(135deg, #4f46e5 0%, #10b981 100%);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.button-gradient:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(79, 70, 229, 0.2);
}
.section-title {
position: relative;
display: inline-block;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 3px;
background: linear-gradient(135deg, #4f46e5 0%, #10b981 100%);
}
.floating {
animation: floating 3s ease-in-out infinite;
}
@keyframes floating {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.ripple {
position: relative;
overflow: hidden;
}
.ripple::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
transform: scale(0);
transition: transform 0.5s ease;
}
.ripple:hover::after {
transform: scale(2);
}
.gradient-bg {
background: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
}
.typing::after {
content: "|";
animation: blink 1s infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.progress-bar {
position: relative;
height: 8px;
border-radius: 4px;
background: #000000;
overflow: hidden;
}
.progress-bar-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
border-radius: 4px;
transition: width 1s ease-in-out;
}
.project-card:hover .project-overlay {
opacity: 1;
}
.project-card:hover img {
transform: scale(1.05);
}
input:focus, textarea:focus {
outline: none;
border-color: #020111;
}
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -4px;
left: 0;
background-color: #010008;
transition: width 0.3s ease;
}
.nav-link:hover::after, .nav-link.active::after {
width: 100%;
}
.scroll-indicator {
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-20px); }
60% { transform: translateY(-10px); }
}
.skill-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.skill-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.logo-container {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  
  .logo {
    max-width: 80px;  /* Smaller size */
    height: auto;
    border-radius: 10px; /* Optional: rounded corners */
  }
  
/* Full-screen background image */
body {
    font-family: 'Inter', sans-serif;
    background-color: #1e1e1e;
    color: #f5f5f5;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    background-image: url('https://static.vecteezy.com/system/resources/thumbnails/056/513/884/small/an-evocative-interior-scene-featuring-a-textured-wall-painted-in-a-vibrant-gradient-bathed-in-a-blend-of-light-and-shadow-and-a-floor-with-a-cool-hue-free-photo.jpg');
    background-size: cover; /* Ensures the image covers the entire viewport */
    background-position: center center; /* Centers the image */
    background-attachment: fixed; /* Keeps the image fixed while scrolling */
    background-repeat: no-repeat; /* Prevents the image from repeating */
  }
  
  /* Adjusting the rest of the elements for better visibility */
  .form-wrapper {
    max-width: 900px;
    margin: 50px auto;
    background-color: rgba(45, 45, 45, 0.7); /* Slight opacity for the background */
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }
  
  /* Example of text styling */
  h1 {
    text-align: center;
    font-size: 2.8rem;
    margin-bottom: 10px;
    color: #ffffff; /* White color for contrast */
  }
  .text-description {
    font-size: 1.1rem; /* Slightly larger text for better readability */
    line-height: 1.8; /* Improved line height for spacing */
    color: #000000; /* Set text color to black */
    text-align: center; /* Center-align the paragraph */
    margin-top: 20px;
    margin-bottom: 40px; /* Adding space at the bottom */
    padding: 20px; /* Padding around the text */
    background-color: rgba(255, 255, 255, 0.8); /* Light background with transparency */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    max-width: 80%; /* Limit width to improve readability */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
  }
  
  .text-description:hover {
    transform: translateY(-5px); /* Lift the paragraph on hover */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
  }
/* Fix the navbar at the top and add smooth transition */
#navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background-color: transparent; /* Default transparent background */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }
  
  /* Add a background color when the user scrolls */
  #navbar.scrolled {
    background-color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Shadow to make it stand out */
  }
  
  /* Add padding to navbar when scrolled */
  #navbar.scrolled .nav-link {
    color: black;
    transition: color 0.3s ease;
  }
  
  /* When hovering on the navbar links */
  .nav-link {
    padding: 10px 20px;
    font-weight: 500;
    color: black;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  .nav-link:hover {
    background-color: #4f46e5;
    color: white;
  }
  
  /* Make sure the navbar stays above content */
  body {
    margin-top: 70px; /* Adjust according to navbar height */
  }
/* Fix the navbar at the top and set a background color */
#navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background-color: #333; /* Set the navbar background color (dark gray) */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }
  
  /* Add a background color when the user scrolls */
  #navbar.scrolled {
    background-color: #fff; /* Change to white on scroll */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Shadow effect */
  }
  
  /* Add padding to navbar when scrolled */
  #navbar.scrolled .nav-link {
    color: black; /* Ensure the text turns black when scrolled */
    transition: color 0.3s ease;
  }
  
  /* Navbar link styles */
  .nav-link {
    padding: 10px 20px;
    font-weight: 500;
    color: white; /* Text color when not scrolled */
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  /* Hover effect for the navbar links */
  .nav-link:hover {
    background-color: #4f46e5;
    color: white;
  }
  
  /* Adjust body margin for the fixed navbar */
  body {
    margin-top: 70px; /* Adjust depending on navbar height */
  }