body {
     background-color: #0B2347;
     color: white;
     font-family: 'Poppins', sans-serif;
 }

 .navbar {
     background: rgba(26, 26, 26, 0.8);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     padding: 1rem 0;
     position: fixed;
     width: 100%;
     top: 0;
     z-index: 1000;
     transition: background-color 0.3s ease;
 }

 .navbar.scrolled {
     background: rgba(26, 26, 26, 0.95);
 }

 .navbar-brand {
     font-size: 1.5rem;
     font-weight: bold;
 }

 .navbar-toggler {
     border: none;
     padding: 0.5rem;
 }

 .navbar-toggler:focus {
     box-shadow: none;
 }

 .navbar-toggler-icon {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
 }

 .navbar-nav {
     gap: 1rem;
 }

 .nav-link {
     color: rgba(255, 255, 255, 0.75) !important;
     transition: color 0.3s ease;
 }

 .nav-link:hover {
     color: #fff !important;
 }

 .btn-custom {
     background-color: #007bff;
     color: white;
     border: none;
     padding: 0.5rem 1rem;
     border-radius: 5px;
     transition: background-color 0.3s ease;
 }

 .btn-custom:hover {
     background-color: #0056b3;
     color: white;
 }

 @media (max-width: 991.98px) {
     .navbar-collapse {
         background: rgba(26, 26, 26, 0.95);
         backdrop-filter: blur(10px);
         -webkit-backdrop-filter: blur(10px);
         padding: 1rem;
         border-radius: 0.5rem;
         margin-top: 1rem;
     }

     .navbar-nav {
         gap: 0.5rem;
     }

     .nav-item {
         padding: 0.5rem 0;
     }
 }

 /* Prevent content from hiding under navbar */
 body {
     padding-top: 70px;
     background-color: #0b2447;
     color: white;
 }

 .hero {
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 50px 20px;
 }

 .hero img {
     border-radius: 10px;
     max-width: 100%;
 }

 .hero-content h1 {
     font-weight: bold;
 }

 .hero-content h2 {
     color: #2E6DDF;
 }

 .btn-custom {
     background-color: #2E6DDF;
     border: none;
     color: white;
     border-radius: 10%;
 }

 .social-icons i {
     font-size: 24px;
     margin: 10px;
     color: white;
 }

 .social-icons i:hover {
     color: #2E6DDF;
 }

 .about-section {
     background-color: #0a2963;
     padding: 60px 20px;
     text-align: center;
 }

 .about-title {
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     font-weight: bold;
 }

 .about-title i {
     margin-right: 10px;
     font-size: 30px;
     color: #2E6DDF;
 }

 .divider {
     width: 100px;
     height: 3px;
     background-color: #2E6DDF;
     margin: 10px auto;
 }

 .about-image img {
     max-width: 100%;
     border-radius: 10px;
 }

 .about-content {
     text-align: left;
 }

 .about-content h2 {
     font-weight: bold;
     border-bottom: 2px solid rgba(255, 255, 255, 0.3);
     padding-bottom: 10px;
 }

 .about-content h4 {
     color: #2E6DDF;
 }

 .feature-card {
     background: rgba(255, 255, 255, 0.1);
     padding: 15px;
     border-radius: 8px;
     display: flex;
     align-items: center;
     gap: 15px;
     margin-top: 15px;
     transition: 0.3s;
 }

 .feature-card:hover {
     background: linear-gradient(to right, #2E6DDF, #8E44AD);
     transform: scale(1.05);
 }

 .feature-icon {
     font-size: 30px;
     color: white;
 }

 .section-title {
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     font-weight: bold;
 }

 .section-title i {
     margin-right: 10px;
     font-size: 30px;
     color: #2E6DDF;
 }

 .divider {
     width: 120px;
     height: 3px;
     background-color: #2E6DDF;
     margin: 10px auto;
 }

 .work-card {
     background: rgba(255, 255, 255, 0.1);
     padding: 20px;
     border-radius: 10px;
     transition: 0.3s;
 }

 .work-card:hover {
     background: linear-gradient(to right, #2E6DDF, #8E44AD);
     transform: scale(1.05);
 }

 .job-title {
     background-color: #2E6DDF;
     padding: 15px;
     border-radius: 8px;
     font-weight: bold;
     color: white;
 }

 .full-time-badge {
     background-color: rgba(255, 255, 255, 0.2);
     padding: 5px 10px;
     border-radius: 5px;
     font-size: 12px;
     display: inline-block;
     margin-top: 5px;
 }

 .work-details {
     text-align: left;
 }

 .work-details ul {
     list-style: none;
     padding-left: 0;
 }

 .work-details li {
     margin-bottom: 10px;
 }

 .work-details li::before {
     content: "✔";
     color: #2E6DDF;
     margin-right: 10px;
 }

 .skills-section {
     padding: 50px 0;
     background-color: #0a1f44;
     color: white;
 }

 .section-title {
     font-size: 28px;
     font-weight: bold;
 }

 .section-divider {
     width: 50px;
     height: 3px;
     background-color: #4a90e2;
     margin: 10px auto 30px;
 }

 .skill-card {
     background: #101d42;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
     transition: transform 0.3s ease;
 }

 .skill-card:hover {
     transform: translateY(-5px);
     background: #162447;
 }

 .skill-card h3 {
     font-size: 20px;
     font-weight: bold;
     margin-bottom: 10px;
 }

 .skill-card p {
     font-size: 14px;
 }

 .education-section {
     padding: 50px 0;
     background-color: #0a1f44;
     color: white;
 }

 .edu-card {
     background: #101d42;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
     transition: transform 0.3s ease;
     text-align: center;
 }

 .edu-card:hover {
     transform: translateY(-5px);
     background: #162447;
 }

 .edu-card h3 {
     font-size: 20px;
     font-weight: bold;
     margin-bottom: 5px;
 }

 .edu-card p {
     font-size: 16px;
     color: #b0c4de;
     margin-bottom: 5px;
 }

 .edu-date {
     font-size: 14px;
     font-style: italic;
     color: #4a90e2;
 }

 .certifications-section {
     padding: 50px 0;
     background-color: #0a1f44;
     color: white;
 }

 .cert-card {
     background: #101d42;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
     transition: transform 0.3s ease;
     text-align: center;
 }

 .cert-card:hover {
     transform: translateY(-5px);
     background: #162447;
 }

 .cert-card h3 {
     font-size: 20px;
     font-weight: bold;
     margin-bottom: 5px;
 }

 .cert-card p {
     font-size: 16px;
     color: #b0c4de;
     margin-bottom: 5px;
 }

 .cert-date {
     font-size: 14px;
     font-style: italic;
     color: #4a90e2;
 }

 .podium-perspectives {
     padding: 5rem 0;
     background-color: #0a1f44;
 }

 .podium-perspectives .section-title {
     color: #61dafb;
     margin-bottom: 1.5rem;
 }

 .podium-perspectives .section-title i {
     margin-right: 0.5rem;
     color: #61dafb;
 }

 .video-card {
     background: #1b263b;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1);
     transition: transform 0.3s ease;
     height: 100%;
 }

 .video-card:hover {
     transform: translateY(-5px);
     background: #162447;
 }

 .video-wrapper {
     position: relative;
     padding-top: 56.25%;
     /* 16:9 Aspect Ratio */
     overflow: hidden;
 }

 .video-wrapper iframe,
 .video-wrapper img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .video-content {
     padding: 1.5rem;
 }

 .video-content h3 {
     font-size: 1.25rem;
     margin-bottom: 0.5rem;
     color: #61dafb;
 }

 .video-content p {
     font-size: 0.9rem;
     margin-bottom: 1rem;
     color: #b0c4de;
 }

 .video-content .badge {
     font-size: 0.8rem;
     padding: 0.5em 1em;
     background-color: #4a90e2;
 }

 .video-content a {
     color: #61dafb;
     transition: color 0.3s ease;
 }

 .video-content a:hover {
     color: #4facfe;
 }

 @media (max-width: 768px) {
     .video-card {
         margin-bottom: 2rem;
     }
 }

 .gallery-title {
     font-size: 2rem;
     color: #61dafb;
     margin-bottom: 20px;
 }

 .gallery-item {
     position: relative;
     overflow: hidden;
     border-radius: 8px;
     box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
     cursor: pointer;
 }

 .gallery-item img {
     width: 100%;
     height: 350px;
     object-fit: cover;
     transition: transform 0.3s ease-in-out, opacity 0.3s;
     border-radius: 8px;
 }

 .gallery-item img:hover {
     transform: scale(1.05);
     opacity: 0.8;
 }

 /* Lightbox Styles */
 .lightbox {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.9);
     text-align: center;
     justify-content: center;
     align-items: center;
 }

 .lightbox-img {
     max-width: 90%;
     max-height: 90%;
     margin-top: 5%;
     border-radius: 10px;
 }

 .close-btn {
     position: absolute;
     top: 15px;
     right: 30px;
     color: white;
     font-size: 40px;
     cursor: pointer;
 }

 .testimonials {
     text-align: center;
     padding: 50px 0;
 }

 .testimonials h2 {
     font-size: 2rem;
     color: #61dafb;
 }

 .carousel-item {
     padding: 20px;
 }

 .testimonial-card {
     background: #1b263b;
     padding: 20px;
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
     text-align: center;
     margin: auto;
     max-width: 600px;
 }

 .testimonial-card img {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     margin-bottom: 15px;
     border: 3px solid #61dafb;
 }

 .testimonial-text {
     font-style: italic;
 }

 .contact-section {
     padding: 50px 0;
 }

 .contact-box {
     background: #133b5c;
     padding: 40px;
     border-radius: 10px;
     box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
 }

 .contact-box h2 {
     color: #4facfe;
     font-weight: bold;
 }

 .contact-info p {
     font-size: 1.1rem;
 }

 .contact-info i {
     color: #4facfe;
     font-size: 1.5rem;
     margin-right: 10px;
 }

 .social-icons a {
     color: #4facfe;
     font-size: 1.5rem;
     margin: 0 10px;
     transition: 0.3s;
 }

 .social-icons a:hover {
     color: #fff;
     transform: scale(1.2);
 }

 .btn-send {
     background: #4facfe;
     border: none;
     padding: 10px 20px;
     font-size: 1.2rem;
     color: #fff;
     border-radius: 5px;
     transition: 0.3s;
 }

 .btn-send:hover {
     background: #3a8fe3;
 }

 /* WhatsApp Icon */
 .whatsapp-float {
     position: fixed;
     bottom: 20px;
     right: 20px;
     z-index: 1001;
 }

 .whatsapp-float a {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 60px;
     height: 60px;
     background: #25D366;
     color: white;
     font-size: 30px;
     border-radius: 50%;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     transition: 0.3s;
 }

 .whatsapp-float a:hover {
     background: #1ebe57;
     transform: scale(1.1);
 }

 .social-icons {
     display: flex;
     gap: 15px;
     /* Spacing between icons */
 }

 .social-link {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 50px;
     height: 50px;
     font-size: 24px;
     color: white;
     background: rgba(255, 255, 255, 0.1);
     /* Subtle background */
     border-radius: 50%;
     transition: 0.3s;
     text-decoration: none;
 }

 .social-link:hover {
     transform: scale(1.1);
 }

 .social-link:nth-child(1):hover {
     background: #333;
 }

 /* GitHub */
 .social-link:nth-child(2):hover {
     background: #0A66C2;
 }

 /* LinkedIn */
 .social-link:nth-child(3):hover {
     background: #1DA1F2;
 }

 /* Twitter */
 .social-link:nth-child(4):hover {
     background: #E4405F;
 }

 /* Instagram */
 /* Fade-in effect for the hero section */
 .animate-fade-in {
     animation: fadeIn 1.2s ease-in-out;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(-20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Button Hover Animation */
 .btn-animate {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .btn-animate:hover {
     transform: scale(1.1);
     box-shadow: 0px 8px 20px rgba(255, 255, 255, 0.2);
 }

 /* Social Icons Hover Effect */
 .icon-animate {
     transition: transform 0.3s ease, color 0.3s ease;
 }

 .icon-animate:hover {
     transform: scale(1.2);
     color: #ffcc00;
 }

 /* Floating Profile Image Animation */
 .floating-img {
     animation: floatUpDown 3s ease-in-out infinite;
 }

 .gallery-img {
     height: 400px;
     width: 100%;
     object-fit: cover;
 }

 .gallery-item {
     margin-bottom: 20px;
     overflow: hidden;
     border-radius: 8px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
 }

 .gallery-item:hover {
     transform: translateY(-5px);
 }