/* Universal reset moved to navigation.css */

 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
     color: white;
     overflow-x: hidden;
     min-height: 100vh;
 }

 /* Navigation styles moved to navigation.css */

 /* Main Container */
 .container {
     display: flex;
     min-height: 100vh;
     align-items: center;
     padding: 0 50px;
     padding-top: 45px;
     position: relative;
 }

 /* Image Section - Left */
 .image-section {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
 }

 .profile-container {
     position: relative;
     width: 350px;
     height: 350px;
     animation: slideInLeft 1s ease-out;
 }

 .profile-image {
     width: 100%;
     height: 120%;
     background: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCABAAEADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9/KKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/9k=') cover center/cover;
     border-radius: 50%;
     border: 4px solid rgba(0, 212, 255, 0.4);
     position: relative;
     overflow: hidden;
     backdrop-filter: blur(10px);
     box-shadow: 0 20px 60px rgba(0, 212, 255, 0.3);
 }

 .profile-image::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     border-radius: 50%;
     background: linear-gradient(45deg, transparent, rgba(0, 212, 255, 0.1));
     animation: rotate 20s linear infinite;
 }

 /* Content Section - Right */
 .content {
     flex: 1;
     max-width: 600px;
     z-index: 2;
     animation: slideInRight 1s ease-out;
     text-align: left;
     padding-left: 50px;
 }

 .greeting {
     color: #00d4ff;
     font-size: 16px;
     margin-bottom: 15px;
     letter-spacing: 1px;
 }

 .main-title {
     font-size: 4rem;
     font-weight: bold;
     margin-bottom: 20px;
     line-height: 1.1;
     background: linear-gradient(45deg, #ffffff, #00d4ff);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     animation: glow 2s ease-in-out infinite alternate;
 }

 .subtitle {
     color: #00d4ff;
     font-size: 35px;
     margin-bottom: 15px;
     letter-spacing: 1px;
     font-weight: 600;
 }

 .tagline {
     color: #e0e0e0;
     font-size: 16px;
     margin-bottom: 20px;
     letter-spacing: 0.5px;
     font-style: italic;
 }

 .description {
     color: #cccccc;
     font-size: 18px;
     line-height: 1.8;
     margin-bottom: 40px;
     max-width: 500px;
     font-weight: 500;
 }

 .cta-button {
     display: inline-block;
     padding: 15px 30px;
     background: linear-gradient(45deg, #00d4ff, #0099cc);
     color: white;
     text-decoration: none;
     border-radius: 30px;
     font-weight: bold;
     letter-spacing: 1px;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0, 212, 255, 0.3);
 }

 .cta-button:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(0, 212, 255, 0.5);
 }

 /* Skills Icons */
 .skills-section {
     margin-top: 40px;
     padding-top: 30px;
     border-top: 2px solid rgba(0, 212, 255, 0.2);
 }

 .skills-title {
     color: #00d4ff;
     font-size: 18px;
     margin-bottom: 20px;
     letter-spacing: 1px;
 }

 .skills-icons {
     display: flex;
     gap: 20px;
     flex-wrap: wrap;
 }

 .skill-icon {
     width: 50px;
     height: 50px;
     background: rgba(0, 212, 255, 0.1);
     border: 2px solid rgba(0, 212, 255, 0.3);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease;
     position: relative;
 }

 .skill-icon:hover {
     transform: translateY(-5px);
     background: rgba(0, 212, 255, 0.2);
     border-color: rgba(0, 212, 255, 0.6);
     box-shadow: 0 10px 20px rgba(0, 212, 255, 0.3);
 }

 .skill-icon::before {
     content: attr(data-skill);
     position: absolute;
     bottom: -25px;
     left: 50%;
     transform: translateX(-50%);
     font-size: 10px;
     color: #ccc;
     white-space: nowrap;
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .skill-icon:hover::before {
     opacity: 1;
 }

 /* Navigation styles moved to navigation.css */

 /* VS Code Icon */
 .vscode-icon {
     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23007ACC"><path d="M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352z"/></svg>');
     background-size: 30px;
     background-repeat: no-repeat;
     background-position: center;
 }

 /* HTML Icon */
 .html-icon {
     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23E34F26"><path d="M1.5 0h21l-1.91 21.563L11.977 24l-8.565-2.438L1.5 0zm7.031 9.75l-.232-2.718 10.059.003.23-2.622L5.412 4.41l.698 8.01h9.126l-.326 3.426-2.91.804-2.955-.81-.188-2.11H6.248l.33 4.171L12 19.351l5.379-1.443.744-8.157H8.531z"/></svg>');
     background-size: 30px;
     background-repeat: no-repeat;
     background-position: center;
 }

 /* CSS Icon */
 .css-icon {
     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231572B6"><path d="M1.5 0h21l-1.91 21.563L11.977 24l-8.565-2.438L1.5 0zm17.09 4.413L5.41 4.41l.213 2.622 10.125.002-.255 2.716h-6.64l.24 2.573h6.182l-.366 3.523-2.91.804-2.956-.81-.188-2.11h-2.61l.29 3.855L12 19.288l5.373-1.53L18.59 4.413z"/></svg>');
     background-size: 30px;
     background-repeat: no-repeat;
     background-position: center;
 }

 /* JavaScript Icon */
 .js-icon {
     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23F7DF1E"><path d="M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z"/></svg>');
     background-size: 30px;
     background-repeat: no-repeat;
     background-position: center;
 }

 /* Bootstrap Icon */
 .bootstrap-icon {
     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%237952B3"><path d="M11.77 11.24H9.956V8.202h2.152c1.17 0 1.834.522 1.834 1.466 0 1.008-.773 1.572-2.174 1.572zm.324 1.206H9.957v3.348h2.231c1.459 0 2.232-.585 2.232-1.685s-.795-1.663-2.326-1.663zM24 0v24H0V0h24zM8.537 6.791v10.696h3.94c2.604 0 4.96-1.006 4.96-3.692 0-1.89-1.196-2.99-2.785-3.434.901-.577 1.663-1.663 1.663-2.785 0-2.604-1.925-3.785-4.96-3.785H8.537zm2.42 1.674h2.231c1.196 0 1.925.577 1.925 1.663 0 1.196-.795 1.663-2.231 1.663H10.957V8.465z"/></svg>');
     background-size: 30px;
     background-repeat: no-repeat;
     background-position: center;
 }

 /* Photoshop Icon */
 .photoshop-icon {
     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2331A8FF"><path d="M0 0v24h24V0H0zm1 1h22v22H1V1zm4.8 5.4c0-.4.3-.7.8-.7h2.8c3.4 0 5.4 2.3 5.4 5.4s-2.1 5.4-5.4 5.4H6.6c-.4 0-.8-.3-.8-.7V6.4zm2.4 2.3v5.8h2c2.1 0 3-1.4 3-2.9s-.9-2.9-3-2.9h-2zm8.6-1.4c-1.1 0-1.9.8-1.9 1.9s.8 1.9 1.9 1.9c1.1 0 1.9-.8 1.9-1.9s-.8-1.9-1.9-1.9zm-1.5 3.8v4.4c0 .2.2.4.4.4h.7c.2 0 .4-.2.4-.4v-4.4h-.7-.8z"/></svg>');
     background-size: 30px;
     background-repeat: no-repeat;
     background-position: center;
 }

 /* Decorative Elements */
 /* .floating-shapes {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
        } */

 .shape {
     position: absolute;
     background: rgba(0, 212, 255, 0.1);
     border-radius: 50%;
     animation: float 6s ease-in-out infinite;
 }

 .shape:nth-child(1) {
     width: 80px;
     height: 80px;
     top: 20%;
     right: 20%;
     animation-delay: 0s;
 }

 .shape:nth-child(2) {
     width: 60px;
     height: 60px;
     bottom: 30%;
     left: 10%;
     animation-delay: 2s;
 }

 .shape:nth-child(3) {
     width: 40px;
     height: 40px;
     top: 60%;
     right: 40%;
     animation-delay: 4s;
 }

 /* Portfolio Badge */
 .portfolio-badge {
     position: absolute;
     bottom: 30px;
     right: 50px;
     color: #666;
     font-size: 12px;
     letter-spacing: 2px;
     writing-mode: vertical-rl;
     text-orientation: mixed;
 }

 /* Progress Line */
 .progress-line {
     position: fixed;
     bottom: 0;
     left: 0;
     height: 3px;
     background: linear-gradient(90deg, #00d4ff, #0099cc);
     width: 25%;
     animation: progressGlow 2s ease-in-out infinite alternate;
 }

 /* Animations */
 @keyframes slideInLeft {
     from {
         opacity: 0;
         transform: translateX(-50px);
     }

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

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

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

 @keyframes float {

     0%,
     100% {
         transform: translateY(0px) rotate(0deg);
     }

     50% {
         transform: translateY(-20px) rotate(180deg);
     }
 }

 @keyframes rotate {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 @keyframes glow {
     from {
         text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
     }

     to {
         text-shadow: 0 0 30px rgba(0, 212, 255, 0.8);
     }
 }

 @keyframes progressGlow {
     from {
         box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
     }

     to {
         box-shadow: 0 0 20px rgba(0, 212, 255, 0.8);
     }
 }

 /* Responsive Design */
 @media (max-width: 768px) {
     /* Navigation styles moved to navigation.css */

     .container {
         flex-direction: column;
         padding: 100px 20px 20px;
         text-align: center;
     }

     .content {
         padding-left: 0;
         margin-top: 30px;
     }

     .main-title {
         font-size: 2.5rem;
     }

     .profile-container {
         width: 250px;
         height: 250px;
     }

     .portfolio-badge {
         position: static;
         writing-mode: horizontal-tb;
         text-align: center;
         margin-top: 20px;
     }
 }

 /* Particle Background */
 .particles {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: 1;
 }

 .particle {
     position: absolute;
     width: 2px;
     height: 2px;
     background: rgba(0, 212, 255, 0.6);
     border-radius: 50%;
     animation: particleMove 8s linear infinite;
 }

 @keyframes particleMove {
     0% {
         transform: translateY(100vh) translateX(0);
         opacity: 0;
     }

     10% {
         opacity: 1;
     }

     90% {
         opacity: 1;
     }

     100% {
         transform: translateY(-100px) translateX(100px);
         opacity: 0;
     }
 }

 body {
     margin: 0;
     font-family: Arial, sans-serif;
 }

 .footer {
     background: #0d1117;
     color: #fff;
     text-align: center;
     padding: 25px 10px;
     margin-top: 40px;
     border-top: 2px solid #0a66c2;
 }

 .footer-container {
     max-width: 900px;
     margin: 0 auto;
 }

 .footer-text {
     font-size: 16px;
     margin-bottom: 15px;
     font-family: "Poppins", sans-serif;
 }

 /* .social-links a {
        display: inline-block;
        margin: 0 10px;
        font-size: 30px;
        color: #0a66c2;
        transition: all 0.3s ease;
      }

      .social-links a:hover {
        color: #fff;
        transform: scale(1.3) rotate(5deg);
      } */