/* Reset and base */
    * {
      box-sizing: border-box;
    }
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      line-height: 1.6;
      margin: 0;
      color: #333;
      background: white;
    }
    a {
      color: #007acc;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }

    /* Container */
    .container {
      width: 90%;
      max-width: 1000px;
      margin: auto;
      padding: 20px 0;
    }
    /* Divider image */
    .divider {
    display: block;
     width: 200px;      /* Adjust width as needed */
    height: auto;      /* Keeps aspect ratio */
    margin: 20px auto; /* Adds space & centers image */
    }

    img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto; /* optional: centers the image */
    border-radius: 6px; /* optional: adds rounded corners */
}

.image-row {
  display: flex;
  gap: 12px;          /* space between images */
  justify-content: center; /* center images horizontally */
  flex-wrap: wrap;    /* allow wrapping on small screens */
}

.image-row img {
  max-width: 45%;     /* adjust width to fit two images side by side */
  height: auto;
  border-radius: 6px; /* optional rounded corners */
}

    /* Header & nav */
    header {
      background: #9bc4cb;
      color: white;
      padding: 10px 0;
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    header .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    header h1 {
      margin: 0;
      font-weight: bold;
      font-size: 2.8rem;
      cursor: default;
    }
    nav ul {
      list-style: none;
      padding-left: 0;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
    }
    nav ul li {
      margin: 0;
    }
    nav ul li a {
      color: white;
      font-weight: 600;
      padding: 8px 12px;
      display: inline-block;
      border-radius: 4px;
      transition: background 0.3s ease;
    }
    nav ul li a:hover,
    nav ul li a.active {
      background: #404d73;
    }

    /* Sections */
    section {
      background: #dee8ed;
      margin: 20px 0;
      padding: 25px;
      border-radius: 6px;
      box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
    }
    section h2 {
      margin-top: 0;
      /*border-bottom: 2px solid #404d73;*/
      padding-bottom: 8px;
    }

.profile-photo {
  float: right;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  margin-left: 25px;
  margin-top: -10px; /* adjust this value to move image up */
  border: 3px solid #404d73;
  transition: all 0.3s ease-in-out;
}

/* On small screens, center the image and shrink it slightly */
@media (max-width: 600px) {
  .profile-photo {
    float: none;
    display: block;
    margin: 0 auto 15px;
    width: 140px;
    height: 140px;
  }
    .divider {
    float: none;
    display: block;
    margin: 0 auto 15px;
    width: 100px;
    height: auto;
  }
}

.experience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns */
  gap: 8px; /* reduced gap between images */
  max-width: 360px; /* slightly wider grid to allow bigger images */
  float: right;
  margin-left: 20px;
  margin-bottom: 20px;
}

.experience-grid img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);*/
  object-fit: contain;
  padding: 2px; /* optional slight inner spacing */
}

@media (max-width: 600px) {
  .experience-grid {
    float: none;
    grid-template-columns: repeat(2, 1fr); /* Stack into 2 columns on mobile */
    margin: 0 auto 20px;
  }
}
    

    /* Projects grid */
    .projects-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
      gap: 20px;
      margin-top: 15px;
    }
    .project-item {
      border: 1px solid #ddd;
      border-radius: 6px;
      padding: 10px;
      background: white;
    }
    .project-item img {
      max-width: 100%;
      height: auto;
      border-radius: 4px;
    }
    .project-item h3 {
      margin: 10px 0 5px;
    }
    .project-item p {
      font-size: 0.9rem;
      color: #555;
    }

    ul {
    padding-left: 20px;
    margin-top: 10px;
  }

    ul li {
    margin-bottom: 6px;
    line-height: 1.5;
  }

    /* Footer */
    footer {
      text-align: center;
      padding: 20px 10px;
      font-size: 0.9rem;
      color: #666;
      margin-top: 40px;
    }

    /* Responsive tweaks */
    @media (max-width: 600px) {
      .profile-photo {
        float: none;
        display: block;
        margin: 0 auto 15px;
      }
      header .container {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }
      nav ul {
        justify-content: flex-start;
        flex-wrap: wrap;
      }
    }