/* Base styles and fonts */
        body {
            font-family: 'Inter', sans-serif;
            scroll-behavior: smooth;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: 'Poppins', sans-serif;
        }

        /* Custom animations */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

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

        .animate-fade-in {
            animation: fadeIn 1s ease-out;
        }

        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(30px);
            }

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

        .animate-slide-in-right {
            animation: slideInRight 0.8s ease-out;
        }

        .animate-blink {
            animation: blink 1s step-end infinite;
        }

        @keyframes blink {
            50% {
                opacity: 0;
            }
        }

        /* Skill level indicators */
        .skill-level {
            height: 4px;
            background: rgba(37, 99, 235, 0.3);
            border-radius: 2px;
            overflow: hidden;
            position: relative;
        }

        .skill-level-fill {
            position: absolute;
            height: 100%;
            background: rgb(37, 99, 235);
            border-radius: 2px;
        }

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

        ::-webkit-scrollbar-track {
            background: #1f2937;
        }

        ::-webkit-scrollbar-thumb {
            background: #3b82f6;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #2563eb;
        }

        /* Smooth section transitions */
        section {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }

        section.visible {
            opacity: 1;
            transform: translateY(0);
        }
        .logo {
         display: flex;          /* keeps items in one row */
        align-items: center;    /* aligns text with logo vertically */
        }

        .logo-img {
        width: 30px;            /* set your logo size */
        height: auto;
        margin-right: 6px;      /* space between logo & name */
     
       }

        .logo-text {
         font-size: 15px;
         font-weight: bold;
         }  


         .highlight {
        color: #3b82f6;;   /* dark golden yellow */
         font-weight: 700;
}

       .specialize {
  font-size: 20px;  /* adjust size as needed */
  font-weight: 600;
  margin-bottom: 16px;
 
}


.skill-level {
  height: 6px;
  background: #444;       /* background line */
  border-radius: 4px;
  overflow: hidden;
}

.skill-level-fill {
  height: 6px;
  background: #3b82f6;    /* blue fill */
  border-radius: 4px;
  transition: width 1s ease-in-out;
}
#skills i {
  color: #3b82f6;   /* Tailwind blue-500 */
}


.footer-icon {
  font-size: 28px;
  color: #9ca3af; /* gray-400 */
  transition: all 0.3s ease;
}

.footer-icon:hover {
  color: #3b82f6; /* blue-500 on hover */
  transform: scale(1.2);
}
/* Social button style */
.social-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #1f2937; /* dark gray card */
  color: white;
  padding: 20px;
  border-radius: 12px;
  width: 120px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.social-btn i {
  font-size: 32px;
  margin-bottom: 8px;
}

.social-btn:hover {
  transform: translateY(-6px) scale(1.05);
  background: #3b82f6; /* blue hover */
  box-shadow: 0 8px 20px rgba(59,130,246,0.4);
  color: white;
}



/* Home section background */
#home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;

  /* Background image */
  background-image: url("assets/img/blog/Content Creator.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;      /* fills screen on desktop */
  background-attachment: fixed; /* parallax effect */
}

/* Mobile-specific fix */
@media (max-width: 768px) {
  #home {
    background-attachment: scroll; /* mobile doesn’t support fixed */
    background-size: contain;      /* show full image */
    background-position: top;
  }
}