body {
            font-family: Arial, sans-serif;
            color: #ffffff;
            background-color: #000000;
        }
.navbar {
    background-color: #000000;
    padding: 15px;
}

.navbar-brand {
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
}

.navbar-nav .nav-link {
    color: #ffffff;
    font-size: 18px;
    position: relative;
    transition: color 0.3s;
}

.navbar-nav .nav-link::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #00ffff; /* Light blue color */
    bottom: -4px;
    left: 0;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out;
}

.navbar-nav .nav-link:hover {
    color: aqua;
}

.navbar-nav .nav-link:hover::before {
    visibility: visible;
    transform: scaleX(1);
}
@media (max-width: 360px) {
    .navbar {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
    }
  
    .navbar .logo {
      margin-right: 10px;
    }
  
    .navbar .menu {
      margin-left: 10px;
    }
  
    .navbar .menu li {
      margin-bottom: 5px;
    }
  
    .navbar .menu li:last-child {
      margin-bottom: 0;
    }
  }
.container{
    position: relative;
    top: 50px;
}
        .hero-section {
            background-color: #000000;
            padding: 80px 0;
            text-align: center;
            color: #ffffff;
        }

        .hero-section h1 {
            font-size: 48px;
            margin-bottom: 20px;
        }

        .hero-section p {
            font-size: 18px;
            color: #888888;
            margin-bottom: 40px;
        }

        .portfolio-section {
            padding: 60px 0;
            background-color: #000000;
            color: #ffffff;
        }

        .portfolio-item {
            margin-bottom: 40px;
            transition: transform 0.3s;
        }

        .portfolio-item:hover {
            transform: translateY(-5px);
 	    box-shadow: 0 4px 8px 0 aqua, 0 5px 10px 0 aqua;
            border-radius: 5px;
        }

        .portfolio-item img {
            width: 100%;
            max-height: 300px;
            object-fit: cover;
            border-radius: 5px;
        }

        .portfolio-item h3 {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 24px;
            margin-top: 20px;
        }

        .portfolio-item p {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3; /* Number of lines to show before truncating */
            font-size: 16px;
            color: #888888;
            margin-bottom: 10px;
        }

        .contact-section {
            background-color: #000000;
            padding: 80px 0;
            text-align: center;
            color: #ffffff;
        }

        .contact-section h2 {
            font-size: 36px;
            margin-bottom: 40px;
        }

        .contact-section p {
            font-size: 18px;
            color: #888888;
            margin-bottom: 40px;
        }

        .typing-effect {
            display: inline-block;
            overflow: hidden;
            animation: typing 3s steps(20, end), blink-caret 0.5s step-end infinite;
        }

        @keyframes typing {
            from { width: 0; }
            to { width: 100%; }
        }

        @keyframes blink-caret {
            from, to { border-color: transparent; }
            50% { border-color: #ffffff; }
        }

        .section-heading {
            font-size: 36px;
            margin-bottom: 40px;
            text-align: center;
            color: #ffffff;
        }

        .resume-section {
            background-color: #000000;
            padding: 80px 0;
            color: #ffffff;
        }

        .resume-item {
            margin-bottom: 40px;
        }

        .resume-item h3 {
            font-size: 24px;
            margin-top: 20px;
        }

        .resume-item p {
            font-size: 16px;
            color: #888888;
            margin-bottom: 10px;
        }

        .scrolling-effect {
            position: relative;
        }

        .scrolling-effect:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(transparent 60%, rgba(255, 255, 255, 0.3) 100%);
            pointer-events: none;
        }

        .scrolling-effect p {
            padding-right: 15px;
        }

        .scrolling-effect:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(transparent 60%, rgba(255, 255, 255, 0.3) 100%);
            pointer-events: none;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background-color: #000000;
        }

        ::-webkit-scrollbar-thumb {
            background-color: aqua;
	    opacity: 50%;
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: aqua;
	    opacity: 100%;
        }
.ml3 {
  font-weight: 900;
  font-size: 3.5em;
  background: linear-gradient(#00FF00, #00FF7F);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
h1 {
  font-size: 24px;
}

.bold-white {
  font-weight: bold;
  color: #ffffff;
}

.bold-gradient-blue {
  font-weight: bold;
  background: -webkit-linear-gradient(#00a8ff, #0097e6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.color_11 {
    color: rgb(var(--color_11));
}