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

    body {
      font-family: Arial, Helvetica, sans-serif;
      background: #111;
      color: #333;
      line-height: 1.6;
    }

    /* Header */
    header {
      background: #111;
      color: #fff;
      padding: 1rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
    }

    /* Logo + Title */
    .logo-container {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .logo-container img {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      object-fit: cover;
    }

    .logo-container span {
      font-size: 1.4rem;
      font-weight: bold;
      color: #fff;
      letter-spacing: 1px;
    }
    
    .main-title {
      position:relative; top:-4px;
      font-size:29px; font-weight:bold;
    }
    .sub-title {
      position:absolute; top : 46px; 
      font-size: 12px;   left: 75px; 
      font-weight: bold;
    }

    /* Navigation */
    nav {
      margin-left: auto;
    }

    nav ul {
      list-style: none;
      display: flex;
      gap: 1.5rem;
      padding-left:3px;
      padding-right: 3px;
    }

    nav a {
      color: #fff;
      text-shadow: -2px 1px 5px rgba(29, 109, 239, 1),
             1px 2px 25px rgba(23, 180, 224, 0.97);
      text-decoration: none;
      font-weight: bold;
      transition: color 0.3s;
    }

    nav a:hover {
      background: rgba(255, 137, 4, 0.1);
      text-shadow: 0px 0px 5px rgba(255, 255, 255, 1), 
               0px 0px 10px rgba(255, 255, 255, 1), 
			   0px 0px 15px rgba(255, 255, 255, 1),
			   0px 0px 20px rgba(64, 116, 181, 0.5),
			   0px 0px 30px rgba(64, 116, 181, 1),
			   0px 0px 40px rgba(264, 116, 181, 0.5),
			   0px 0px 55px rgba(64, 116, 181, 1),
			   0px 0px 75px rgba(64, 116, 181, 0.5);

    }

    /* Hamburger */
    .menu-toggle {
      display: none;
      position:absolute;
      flex-direction: column;
      cursor: pointer;
      gap: 5px;
      margin-left: 20px; /* push slightly away from nav */
      right:6px;
    }

    .menu-toggle span {
      width: 25px;
      height: 3px;
      background: #fff;
      border-radius: 2px;
    }
    
  .container{background:#112;}
  
  /* Text Shadow */  
  .shadow1 {
   color: rgba(255, 255, 255, 1);
   text-shadow: 2px 2px 0px rgba(64, 116, 181, 0.5), 
               2px -2px 0px rgba(64, 116, 181, 0.5), 
			   -2px 2px 0px rgba(64, 116, 181, 0.5), 
			   -2px -2px 0px rgba(64, 116, 181, 0.5), 
			   2px 0px 0px rgba(64, 116, 181, 0.5), 
			   0px 2px 0px rgba(64, 116, 181, 0.5), 
			   -2px 0px 0px rgba(64, 116, 181, 0.5), 
			   0px -2px 0px rgba(64, 116, 181, 0.5);
  }

  .shadow2{
    color: #fff;
    text-shadow: 2px 2px 0px rgba(14, 0, 0, 0.9), 
               2px -2px 0px rgba(1, 2, 14, 0.567), 
			   -2px 2px 0px rgba(3, 14, 109, 0.567), 
			   -2px -2px 0px rgba(0, 13, 18, 0.5), 
			   2px 0px 0px rgba(16, 0, 0, 0.9), 
			   0px 2px 0px rgba(0, 14, 19, 0.5), 
			   -2px 0px 0px rgba(3, 14, 109, 0.567), 
			   0px -2px 0px rgba(14, 1, 1, 0.9),
        11px 4px 26px rgb(0, 0, 0);
      
  }
  
    .shadow3{
     color: #112;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 1),
             0px 6px 15px rgba(0, 0, 0, 0.61),
             -1px 2px 3px rgba(10, 6, 84, 1),
             1px -3px 25px rgba(255, 77, 5, 0.34);
      
  }
  
    /* Footer */
    footer {
      background: #111;
      color: #aaa;
      text-align: center;
      padding: 2px;
      font-size: 0.9rem;
      border-top: 2px solid #ffffff;
    }

    footer p {
      margin: 5px 0;
    }

    footer a {
      color: #ffffff;
      text-decoration: none;
    }


    /* ================= Responsive Design ================= */

    @media (max-width: 768px) {
      nav ul {
        display: none;
        flex-direction: column;
        gap: 1rem;
        background: #111;
        position: absolute;
        top: 60px;
        right: 10px;
        border-radius: 8px;
        padding: 30px;
        z-index: 999;
      }
      nav ul li{line-height:10px; }

      .show { display: flex; }
      .menu-toggle {  position:absolute; display: flex; right:6px;}

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

    @media (max-width: 480px) {
      .logo-container span {  font-size: 1.1rem; }
     
      .hero {  padding: 4rem 1rem; }
      .hero h2 { font-size: 1.6rem; }
      .portfolio h3 { font-size: 1.5rem; }
    }