/* Base Styles */
         :root {
             --primary-color: #2c3e50;
             --secondary-color: #3498db;
             --accent-color: #e74c3c;
             --light-color: #ecf0f1;
             --dark-color: #2c3e50;
             --text-color: #333;
             --text-light: #777;
             --shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
             --transition: all 0.3s ease;
         }
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
         html {
             scroll-behavior: smooth;
         }
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             line-height: 1.6;
             color: var(--text-color);
             background-color: #f9f9f9;
         }
         a {
             text-decoration: none;
             color: inherit;
         }
         ul {
             list-style: none;
         }
         .container {
             width: 90%;
             max-width: 1200px;
             margin: 0 auto;
             padding: 0 20px;
         }
         .section {
             padding: 80px 0;
         }
         .section-title {
             text-align: center;
             margin-bottom: 50px;
             position: relative;
         }
         .section-title h2 {
             font-size: 2.5rem;
             color: var(--primary-color);
             margin-bottom: 15px;
         }
         .section-title::after {
             content: '';
             position: absolute;
             width: 80px;
             height: 4px;
             background: var(--secondary-color);
             bottom: -10px;
             left: 50%;
             transform: translateX(-50%);
         }
         .btn {
             display: inline-block;
             padding: 12px 30px;
             background: var(--secondary-color);
             color: white;
             border: none;
             border-radius: 5px;
             cursor: pointer;
             font-size: 1rem;
             transition: var(--transition);
         }
         .btn:hover {
             background: #2980b9;
             transform: translateY(-3px);
             box-shadow: var(--shadow);
         }
         /* Header & Navigation */
         header {
             background: white;
             box-shadow: var(--shadow);
             position: fixed;
             width: 100%;
             top: 0;
             z-index: 1000;
         }
         .navbar {
             display: flex;
             justify-content: space-between;
             align-items: center;
             padding: 20px 0;
         }
         .logo {
             font-size: 1.8rem;
             font-weight: 700;
             color: var(--primary-color);
         }
         .logo span {
             color: var(--secondary-color);
         }
         .nav-links {
             display: flex;
         }
         .nav-links li {
             margin-left: 30px;
         }
         .nav-links a {
             font-weight: 500;
             transition: var(--transition);
         }
         .nav-links a:hover {
             color: var(--secondary-color);
         }
         .hamburger {
             display: none;
             cursor: pointer;
             font-size: 1.5rem;
         }
         /* Hero Section */
         .hero {
             height: 100vh;
             display: flex;
             align-items: center;
             background: linear-gradient(135deg, var(--primary-color), var(--dark-color));
             color: white;
             text-align: center;
         }
         .hero-content h1 {
             font-size: 3.5rem;
             margin-bottom: 20px;
         }
         .hero-content p {
             font-size: 1.5rem;
             max-width: 600px;
             margin: 0 auto 30px;
             opacity: 0.9;
         }
         .hero-btns {
             display: flex;
             justify-content: center;
             gap: 15px;
         }
         .btn-outline {
             background: transparent;
             border: 2px solid white;
         }
         .btn-outline:hover {
             background: white;
             color: var(--primary-color);
         }
         /* About Section */
         .about-content {
             display: grid;
             grid-template-columns: 1fr 2fr;
             gap: 50px;
             align-items: center;
         }
         .about-img {
             border-radius: 10px;
             overflow: hidden;
             box-shadow: var(--shadow);
         }
         .about-img img {
             width: 100%;
             height: auto;
             display: block;
             transition: var(--transition);
         }
         .about-img:hover img {
             transform: scale(1.05);
         }
         .about-text h3 {
             font-size: 1.8rem;
             margin-bottom: 20px;
             color: var(--primary-color);
         }
         .about-text p {
             margin-bottom: 20px;
             color: var(--text-light);
         }
         .skills {
             display: flex;
             flex-wrap: wrap;
             gap: 10px;
             margin-top: 20px;
         }
         .skill {
             background: var(--light-color);
             padding: 8px 15px;
             border-radius: 30px;
             font-size: 0.9rem;
         }
         /* Skills Icons Section */
         .skills-icons {
             display: flex;
             justify-content: center;
             flex-wrap: wrap;
             gap: 30px;
             margin-top: 40px;
         }
         .skill-icon {
             display: flex;
             flex-direction: column;
             align-items: center;
             gap: 10px;
             transition: var(--transition);
         }
         .skill-icon:hover {
             transform: translateY(-5px);
         }
         .skill-icon i {
             font-size: 3rem;
             color: var(--secondary-color);
         }
         .skill-icon span {
             font-weight: 500;
         }
         /* Projects Section */
         .projects {
             background: var(--light-color);
         }
         .projects-grid {
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
             gap: 30px;
         }
         .project-card {
             background: white;
             border-radius: 10px;
             overflow: hidden;
             box-shadow: var(--shadow);
             transition: var(--transition);
         }
         .project-card:hover {
             transform: translateY(-10px);
         }
         .project-img {
             height: 200px;
             overflow: hidden;
         }
         .project-img img {
             width: 100%;
             height: 100%;
             object-fit: cover;
             transition: var(--transition);
         }
         .project-card:hover .project-img img {
             transform: scale(1.1);
         }
         .project-info {
             padding: 20px;
         }
         .project-info h3 {
             font-size: 1.3rem;
             margin-bottom: 10px;
             color: var(--primary-color);
         }
         .project-info p {
             color: var(--text-light);
             margin-bottom: 15px;
         }
         .project-tags {
             display: flex;
             flex-wrap: wrap;
             gap: 8px;
             margin-bottom: 15px;
         }
         .tag {
             background: var(--light-color);
             padding: 5px 10px;
             border-radius: 5px;
             font-size: 0.8rem;
         }
         .project-links {
             display: flex;
             gap: 10px;
         }
         .project-links .btn {
             flex: 1;
             text-align: center;
             padding: 8px 15px;
             font-size: 0.9rem;
         }
         .btn-secondary {
             background: var(--primary-color);
         }
         .btn-secondary:hover {
             background: #1a252f;
         }
         /* Contact Section */
         .contact-content {
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 50px;
         }
         .contact-info h3 {
             font-size: 1.8rem;
             margin-bottom: 20px;
             color: var(--primary-color);
         }
         .contact-info p {
             margin-bottom: 30px;
             color: var(--text-light);
         }
         .contact-details {
             margin-bottom: 30px;
         }
         .contact-item {
             display: flex;
             align-items: center;
             margin-bottom: 15px;
         }
         .contact-item i {
             width: 40px;
             height: 40px;
             background: var(--light-color);
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             margin-right: 15px;
             color: var(--secondary-color);
         }
         .social-links {
             display: flex;
             gap: 15px;
         }
         .social-link {
             width: 40px;
             height: 40px;
             background: var(--light-color);
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             transition: var(--transition);
         }
         .social-link:hover {
             background: var(--secondary-color);
             color: white;
             transform: translateY(-5px);
         }
         .contact-form {
             background: white;
             padding: 30px;
             border-radius: 10px;
             box-shadow: var(--shadow);
         }
         .form-group {
             margin-bottom: 20px;
         }
         .form-group label {
             display: block;
             margin-bottom: 8px;
             font-weight: 500;
         }
         .form-control {
             width: 100%;
             padding: 12px 15px;
             border: 1px solid #ddd;
             border-radius: 5px;
             font-family: inherit;
             transition: var(--transition);
         }
         .form-control:focus {
             border-color: var(--secondary-color);
             outline: none;
         }
         textarea.form-control {
             min-height: 150px;
             resize: vertical;
         }
         /* Footer */
         footer {
             background: var(--dark-color);
             color: white;
             text-align: center;
             padding: 30px 0;
         }
         .footer-content {
             display: flex;
             justify-content: space-between;
             align-items: center;
         }
         .copyright {
             opacity: 0.8;
         }
         .github-link {
             display: flex;
             align-items: center;
             gap: 8px;
             color: white;
             transition: var(--transition);
         }
         .github-link:hover {
             color: var(--secondary-color);
         }
         /* Responsive Design */
         @media (max-width: 992px) {
             .about-content,
             .contact-content {
                 grid-template-columns: 1fr;
             }
             .about-img {
                 max-width: 400px;
                 margin: 0 auto;
             }
         }
         @media (max-width: 768px) {
             .navbar {
                 padding: 15px 0;
             }
             .nav-links {
                 position: fixed;
                 top: 70px;
                 left: -100%;
                 width: 100%;
                 height: calc(100vh - 70px);
                 background: white;
                 flex-direction: column;
                 align-items: center;
                 padding-top: 50px;
                 transition: var(--transition);
             }
             .nav-links.active {
                 left: 0;
             }
             .nav-links li {
                 margin: 15px 0;
             }
             .hamburger {
                 display: block;
             }
             .hero-content h1 {
                 font-size: 2.5rem;
             }
             .hero-content p {
                 font-size: 1.2rem;
             }
             .hero-btns {
                 flex-direction: column;
                 align-items: center;
             }
             .btn {
                 width: 200px;
                 text-align: center;
             }
             .footer-content {
                 flex-direction: column;
                 gap: 20px;
             }
             .project-links {
                 flex-direction: column;
             }
         }
         @media (max-width: 576px) {
             .section {
                 padding: 60px 0;
             }
             .section-title h2 {
                 font-size: 2rem;
             }
             .hero-content h1 {
                 font-size: 2rem;
             }
             .hero-content p {
                 font-size: 1rem;
             }
         }

        @media (max-width: 320px) {
          .container {
            margin: 0 10px;
            padding: 0;
          }
        }