body {
        margin:0;
        font-family: 'Inter', sans-serif;
        line-height: 1.5;
        background:white;
        color:#404040;
      }

      header {
        width:90%;
        max-width:1000px;
        margin:auto;
      }

      .container {
        width:90%;
        max-width:1000px;
        margin:auto;
        background: rgba(64,64,64,0.02);
        border-radius: 20px;
        padding: 1rem 1rem;
      }

      .sub-container {
        margin: auto;
        background: rgba(64, 64, 64, 0.05);
        border-radius: 20px;
        padding: 1rem 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
      }

      footer {
        width:90%;
        max-width:1000px;
        margin:auto;
        background:#B99700;
        margin-top:1rem;
        padding:1rem;
        text-align:center;
        font-size:0.8rem;
        color:white;
        border-radius: 20px;
      }

      .certifications {
        padding: 2rem 1rem;
        text-align: center;
      }

      .cert-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 2.5rem;
        margin-top: 2rem;
        justify-items: center;
        align-items: start;
      }

      .cert-item {
        text-align: center;
      }

      .cert-item img {
        height: 120px;
        display: block;
        margin: 0 auto 1rem auto;
        transition: transform 0.3s ease, opacity 0.3s ease;
        padding: 0.5rem;
        border-radius: 8px;
        opacity: 0.9;
      }

      .cert-item img:hover {
        transform: scale(1.20);
        opacity: 0.9;
      }

      .cert-title {
        font-weight: 500;
        font-size: 0.95rem;
        color: #404040;
        margin-bottom: 0.5rem;
        max-width: 220px;
        margin-left: auto;
        margin-right: auto;
      }

      .two-columns {
        width:90%;
        max-width:1000px;
        background: rgba(64,64,64,0.02);
        border-radius: 20px;
        margin:auto;
        display: grid;
        grid-template-columns: 55% 40%;
        gap: 2rem;
        align-items: center;
        padding: 1rem 1rem;
      }

      .linkedin-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.8rem 1.5rem;
        background: #0A66C2;
        border: 1px solid rgba(255,255,255,0.1);
        color: #ffffff;
        font-weight: 600;
        text-decoration: none;
        border-radius: 8px;
        transition: all 0.3s ease;
      }

      .linkedin-btn:hover {
        background: #004182;
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(10, 102, 194, 0.3);
      }

      .linkedin-icon {
        background: white;
        color: #0A66C2;
        font-weight: bold;
        padding: 4px 8px;
        border-radius: 4px;
        font-family: Arial, sans-serif;
      }

      .email-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.8rem 1.5rem;
        background: transparent;
        color: #B99700;
        font-weight: 600;
        text-decoration: none;
        border: 2px solid #B99700;
        border-radius: 8px;
        transition: all 0.3s ease;
      }

      .email-btn:hover {
        background: rgba(185, 151, 0, 1);
        color: #ffffff;
        box-shadow: 0 6px 18px rgba(185, 151, 0, 0.25);
      }

      .profile-pic {
        width: 250px;
        height: 250px;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid #B99700;
      }

      .gold {
        color: #B99700;
      }

      .grey {
        color: #404040;
      }

      .white {
        position: absolute;
        top: 50%;
        left: 10%;
        transform: translateY(-50%);
        color: white;
        margin: 0;
        font-size: 42px;
        text-align: left;
      }

      .overlay1 {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 590px;
        height: 350px;
        background: rgba(185, 151, 0, 0.6);
        border-radius: 20px;
      }

      .overlay2 {
        position: absolute;
        top: 90px;
        left: 50px;
        width: 487px;
        height: 175px;
        background: rgba(60, 60, 60, 0.5);
        border-radius: 20px;
      }

      .overlay3 {
        position: relative;      /* needed for absolute positioning */
        width: 100%;             /* full width of parent */
        max-width: 1000px;
        margin: auto;
        border-radius: 20px;
        overflow: hidden;        /* keeps rounded corners clean */
      }

      .overlay3 img {
        width: 100%;
        height: 350px;
        object-fit: fill;        /* stretch if needed */
        display: block;
      }

      .overlay4 {
        position: absolute;
        top: 20px;
        left: 880px;
        width: 100%;             /* full width of parent */
        max-width: 1000px;
        margin: auto;
        overflow: hidden;        /* keeps rounded corners clean */
      }

      .overlay4 img {
        width: 100px;
        height: 100px;
        object-fit: fill;        /* stretch if needed */
        display: block;
      }