* {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }

        /* Google Font import */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

        :root {
          --bg-start: #414345;
          --bg-end:   #232526;
          --highlight: #ff5349;
          --text-light: #fff;
          --text-muted: rgba(255,255,255,0.7);
          --card-bg: rgba(255,255,255,0.05);
          --border-color: rgba(255,255,255,0.1);
        }

        /* Body & global */
        body {
          font-family: 'Inter', sans-serif;
          background: linear-gradient(to right, var(--bg-start), var(--bg-end));
          color: var(--text-light);
          line-height: 1.6;
        }

        /* Header / Navigation */
        .heading {
          position: sticky;
          top: 0;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 1rem 4%;
          background: rgba(0,0,0,0.3);
          backdrop-filter: blur(10px);
          z-index: 10;
        }

        .title {
          font-size: 1.5rem;
          font-weight: 700;
        }

        .navigation ul {
          display: flex;
          gap: 2rem;
        }

        .navigation a {
          font-weight: 500;
          text-transform: uppercase;
          font-size: 0.9rem;
          transition: color 0.2s;
        }

        .navigation a:hover {
          color: var(--highlight);
        }

        /* Hero Section */
        .hero {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 4% 4%;
          min-height: 80vh;
          overflow: hidden;
        }

        /* Glowing radial orb behind image */
        .hero::before {
          content: "";
          position: absolute;
          width: 600px;
          height: 600px;
          top: 50%;
          right: 20%;
          transform: translate(50%, -50%);
          background: radial-gradient(
            circle at center,
            rgba(255, 83, 73, 0.35) 0%,
            rgba(255, 83, 73, 0) 70%
          );
          filter: blur(80px);
          z-index: 1;
        }

        /* Hero content */
        .hero-content {
          position: relative;
          z-index: 2;
          max-width: 45%;
        }

        .hero-content h3 {
          font-size: 1.2rem;
          margin-bottom: 0.5rem;
          font-weight: 400;
          color: var(--text-muted);
        }

        .hero-content h5 {
          font-size: 1.5rem;
          margin-bottom: 0.25rem;
          font-weight: 600;
        }

        .hero-content h2 {
          font-size: 3rem;
          margin-bottom: 1.5rem;
          font-weight: 800;
        }

        /* Buttons */
        .buttons {
          display: flex;
          gap: 1rem;
        }

        .btn-primary,
        .btn-outline {
          display: inline-block;
          padding: 0.75em 1.5em;
          font-weight: 600;
          border-radius: 4px;
          transition: all 0.3s ease;
          text-decoration: none;
        }

        .btn-primary {
          background: var(--highlight);
          color: #fff;
          border: 2px solid var(--highlight);
        }

        .btn-primary:hover {
          background: transparent;
          color: var(--highlight);
          transform: translateY(-2px);
        }

        .btn-outline {
          background: transparent;
          color: var(--highlight);
          border: 2px solid var(--highlight);
        }

        .btn-outline:hover {
          background: var(--highlight);
          color: #fff;
          transform: translateY(-2px);
        }

        /* Hero image */
        .photo {
          position: relative;
          z-index: 2;
        }

        .passport {
          display: block;
          width: 320px;
          height: 320px;
          object-fit: cover;
          border-radius: 50%;
          border: 4px solid rgba(255,255,255,0.1);
          box-shadow: 0 20px 60px rgba(0,0,0,0.5);
        }

        /* Global styles */
        ul {
          list-style: none;
        }

        a {
          text-decoration: none;
          color: inherit;
        }

        /* Section styles */
        .section {
          padding: 5rem 4%;
          max-width: 1200px;
          margin: 0 auto;
        }

        .section-title {
          font-size: 2.5rem;
          font-weight: 700;
          text-align: center;
          margin-bottom: 3rem;
          position: relative;
        }

        .section-title::after {
          content: '';
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translateX(-50%);
          width: 60px;
          height: 3px;
          background: var(--highlight);
        }

        /* About Section */
        .about-content {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 4rem;
          align-items: center;
        }

        .about-text {
          font-size: 1.1rem;
          color: var(--text-muted);
          line-height: 1.8;
        }

        .about-text h3 {
          color: var(--text-light);
          font-size: 1.5rem;
          margin-bottom: 1rem;
          font-weight: 600;
        }

        .achievements {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 1.5rem;
        }

        .achievement-card {
          background: var(--card-bg);
          padding: 1.5rem;
          border-radius: 8px;
          border: 1px solid var(--border-color);
          backdrop-filter: blur(10px);
        }

        .achievement-card h4 {
          color: var(--highlight);
          font-size: 1.1rem;
          margin-bottom: 0.5rem;
          font-weight: 600;
        }

        .achievement-card p {
          color: var(--text-muted);
          font-size: 0.9rem;
        }

        /* Experience Section */
        .experience-timeline {
          position: relative;
          padding-left: 2rem;
        }

        .experience-timeline::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 2px;
          background: var(--highlight);
        }

        .experience-item {
          position: relative;
          margin-bottom: 3rem;
          background: var(--card-bg);
          padding: 2rem;
          border-radius: 8px;
          border: 1px solid var(--border-color);
          backdrop-filter: blur(10px);
        }

        .experience-item::before {
          content: '';
          position: absolute;
          left: -2.5rem;
          top: 2rem;
          width: 12px;
          height: 12px;
          background: var(--highlight);
          border-radius: 50%;
          border: 3px solid var(--bg-start);
        }

        .experience-header {
          margin-bottom: 1rem;
        }

        .experience-title {
          font-size: 1.3rem;
          font-weight: 600;
          color: var(--text-light);
        }

        .experience-company {
          font-size: 1.1rem;
          color: var(--highlight);
          font-weight: 500;
        }

        .experience-date {
          color: var(--text-muted);
          font-size: 0.9rem;
        }

        .experience-description {
          color: var(--text-muted);
          line-height: 1.7;
        }

        .experience-description li {
          margin-bottom: 0.5rem;
          position: relative;
          padding-left: 1rem;
        }

        .experience-description li::before {
          content: '•';
          color: var(--highlight);
          position: absolute;
          left: 0;
        }

        /* Skills Section */
        .skills-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 2rem;
        }

        .skill-category {
          background: var(--card-bg);
          padding: 2rem;
          border-radius: 8px;
          border: 1px solid var(--border-color);
          backdrop-filter: blur(10px);
          text-align: center;
        }

        .skill-category h3 {
          color: var(--highlight);
          margin-bottom: 1rem;
          font-size: 1.2rem;
          font-weight: 600;
        }

        .skill-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 0.5rem;
          justify-content: center;
        }

        .skill-tag {
          background: rgba(255, 83, 73, 0.1);
          color: var(--text-light);
          padding: 0.4rem 0.8rem;
          border-radius: 20px;
          font-size: 0.85rem;
          border: 1px solid rgba(255, 83, 73, 0.3);
        }

        /* Projects Section */
        .projects-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
          gap: 2rem;
        }

        .project-card {
          background: var(--card-bg);
          border-radius: 8px;
          border: 1px solid var(--border-color);
          backdrop-filter: blur(10px);
          overflow: hidden;
          transition: transform 0.3s ease;
        }

        .project-card:hover {
          transform: translateY(-5px);
        }

        .project-content {
          padding: 2rem;
        }

        .project-title {
          font-size: 1.3rem;
          font-weight: 600;
          margin-bottom: 0.5rem;
          color: var(--text-light);
        }

        .project-description {
          color: var(--text-muted);
          margin-bottom: 1rem;
          line-height: 1.6;
        }

        .project-tech {
          display: flex;
          flex-wrap: wrap;
          gap: 0.5rem;
          margin-bottom: 1.5rem;
        }

        .tech-tag {
          background: rgba(255, 83, 73, 0.1);
          color: var(--highlight);
          padding: 0.3rem 0.6rem;
          border-radius: 15px;
          font-size: 0.8rem;
          border: 1px solid rgba(255, 83, 73, 0.3);
        }

        .project-impact {
          color: var(--text-light);
          font-weight: 500;
          font-size: 0.9rem;
        }

        /* Contact Section */
        .contact-content {
          max-width: 800px;
          margin: 0 auto;
          text-align: center;
        }

        .contact-intro {
          font-size: 1.2rem;
          color: var(--text-muted);
          margin-bottom: 3rem;
          line-height: 1.7;
        }

        .contact-info {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 2rem;
          margin-bottom: 3rem;
        }

        .contact-item {
          background: var(--card-bg);
          padding: 2rem;
          border-radius: 8px;
          border: 1px solid var(--border-color);
          backdrop-filter: blur(10px);
        }

        .contact-item h3 {
          color: var(--highlight);
          margin-bottom: 1rem;
          font-size: 1.1rem;
          font-weight: 600;
        }

        .contact-item p {
          color: var(--text-muted);
        }

        .contact-item a {
          color: var(--text-light);
          transition: color 0.3s ease;
        }

        .contact-item a:hover {
          color: var(--highlight);
        }
        /*contact form */
        .contact-form {
          max-width: 600px;
          margin: 0 auto;
          background: var(--card-bg);
          padding: 2rem;
          border-radius: 8px;
          border: 1px solid var(--border-color);
          backdrop-filter: blur(10px);
        }
        .contact-form label {
          display: block;
          margin-bottom: 0.5rem;
          color: var(--text-light);
        }
        .contact-form input,
        .contact-form textarea {
          width: 100%;
          padding: 0.75rem;
          margin-bottom: 1rem;
          border: 1px solid var(--border-color);
          border-radius: 4px;
          background: rgba(255,255,255,0.05);
          color: var(--text-light);
        }
        .contact-form textarea {
          height: 100px;
        }
        .contact-form button {
          background: var(--highlight);
          color: #fff;
          padding: 0.75rem 1.5rem;
          border: none;
          border-radius: 4px;
          cursor: pointer;
          font-weight: 600;
          transition: background 0.3s ease;
        }
        .contact-form button:hover {
          background: transparent;
          color: var(--highlight);
        }

        /* Footer */
        .footer {
          text-align: center;
          padding: 2rem 4%;
          border-top: 1px solid var(--border-color);
          color: var(--text-muted);
        }

        /* Responsive Design */
        @media (max-width: 768px) {
          .hero {
            flex-direction: column;
            text-align: center;
            padding: 2rem 4%;
          }

          .hero-content {
            max-width: 100%;
            margin-bottom: 2rem;
          }

          .hero-content h2 {
            font-size: 2.5rem;
          }

          .about-content {
            grid-template-columns: 1fr;
            gap: 2rem;
          }

          .achievements {
            grid-template-columns: 1fr;
          }

          .navigation ul {
            gap: 1rem;
          }

          .navigation a {
            font-size: 0.8rem;
          }

          .section {
            padding: 3rem 4%;
          }

          .section-title {
            font-size: 2rem;
          }

          .buttons {
            flex-direction: column;
            align-items: center;
          }
        }

        @media (max-width: 480px) {
          .heading {
            flex-direction: column;
            gap: 1rem;
            padding: 1rem 4%;
          }

          .passport {
            width: 250px;
            height: 250px;
          }

          .hero-content h2 {
            font-size: 2rem;
          }
        }