/* 🌿 General Styles */
    body {
      margin: 0;
      font-family: 'Inter', sans-serif;
      background: #f9fafb;
      color: #1a1a1a;
      scroll-behavior: smooth;
    }

    h1, h2, h3 {
      font-weight: 600;
      margin: 0 0 15px;
    }

    p {
      line-height: 1.6;
      color: #333;
    }

    a {
      color: #607d8b;
      text-decoration: none;
      transition: color 0.3s;
    }

    a:hover {
      color: #9caf88;
    }

    /* 🌿 Navbar */
    nav {
      position: fixed;
      top: 0;
      width: 100%;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(6px);
      display: flex;
      justify-content: center;
      gap: 30px;
      padding: 15px 0;
      z-index: 1000;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }

    nav a {
      font-weight: 500;
      font-size: 15px;
    }

    /* 🌿 Hero */
    .hero {
      height: 100vh;
      background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
                  url('images/switzerlandinterlaken.JPG') center/cover no-repeat;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
      text-align: center;
      padding: 0 20px;
    }

    .hero h1 {
      font-size: 3rem;
      margin-bottom: 15px;
    }

    .hero p {
      font-size: 1.2rem;
      max-width: 600px;
      color: #ffffff; 
    }

    /* 🌿 Sections */
    section {
      padding: 80px 20px;
      max-width: 1000px;
      margin: 0 auto;
    }

    .resume button {
      background: #607d8b;
      border: none;
      padding: 12px 25px;
      color: #fff;
      font-size: 15px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.3s;
    }

    .resume button:hover {
      background: #9caf88;
    }

    /* 🌿 Resume Thumbnail */
    .resume-preview {
      width: 300px;           
      max-width: 100%;        
      border-radius: 10px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.25); 
      transition: transform 0.3s;
      display: block;
      margin: 20px auto;      
    }

    .resume-preview:hover {
      transform: scale(1.08); 
    }

    /* 🌿 Experience Feed Container */
    /* replace your .experience-section rules with these */
  .experience-section {
    max-width: 1000px; /* same max-width used by your other sections */
    margin: 0 auto;
    padding: 40px 0;
  }

.experience-section h2 {
  text-align: left;
  margin-bottom: 15px; /* same spacing as other headings */
  font-weight: 600;
  color: #333;
}


    /* replace your .experience-section h2 with this */
    .experience-section h2 {
      text-align: left;
      margin-bottom: 15px; /* matches the global h2 margin: 0 0 15px */
      color: #333;
    }

    /* 🌿 Social Media Post Card */ 
    .post-card { background: #ffffff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); margin-bottom: 30px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
    .post-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); } /* 🌿 Post Header (like Instagram username bar) */
    .post-header { display: flex; align-items: center; padding: 15px 20px; border-bottom: 1px solid #f0f0f0; }

    .profile-pic img { width: 40px; height: 40px; object-fit: cover; /* fills the circle without stretching */ border-radius: 50%; /* makes it a circle */ margin-right: 10px; }

    .post-info {
      flex: 1;
    }

    .post-title {
      font-weight: 600;
      font-size: 0.95rem;
      color: #333;
      margin: 0 0 2px 0;
    }

    .post-location {
      font-size: 0.8rem;
      color: #607d8b;
      margin: 0;
    }

    .post-date {
      font-size: 0.75rem;
      color: #999;
      margin-left: auto;
      flex-shrink: 0;
    }

/* 🌿 Post Image */
.photo-collage {
  display: grid;
  grid-template-columns: 2fr 1fr; /* Big photo on the left, small stack on the right */
  gap: 10px;
  margin: 20px 0;
}

/* Big photo */
.big-photo img {
  width: 100%;
  max-height: 300px; /* cap the height */
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

/* Small photos stack */
.small-photos {
  display: grid;
  grid-template-rows: 1fr 1fr; /* Stack the two small photos vertically */
  gap: 10px;
}

.small-photos img {
  width: 100%;
  max-height: 145px; /* cap height so small photos don't stretch post */
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

/* Hover zoom effect */
.small-photos img:hover,
.big-photo img:hover {
  transform: scale(1.03);
}


    /* Company specific styling */
    .post-1 .post-image { background: linear-gradient(135deg, #9caf88 20%, #a8c09a 100%); }
    .post-2 .post-image { background: linear-gradient(135deg, #607d8b 20%, #78909c 100%); }
    .post-3 .post-image { background: linear-gradient(135deg, #9caf88 20%, #a8c09a 100%); }

    /* 🌿 Post Actions (like/comment bar) */
    .post-actions {
      display: flex;
      align-items: center;
      padding: 12px 20px 8px;
      gap: 18px;
    }

    .action-btn {
      background: none;
      border: none;
      font-size: 1.3rem;
      color: #607d8b;
      cursor: pointer;
      transition: color 0.2s, transform 0.2s;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .action-btn:hover {
      color: #9caf88;
      transform: scale(1.1);
    }

    .action-btn.liked {
      color: #e91e63;
    }

    .action-btn span {
      font-size: 0.8rem;
      font-weight: 500;
    }

    /* 🌿 Post Caption */
    .post-caption {
      padding: 0 20px 15px;
    }

    .caption-text {
      font-size: 0.9rem;
      line-height: 1.5;
      color: #333;
      margin-bottom: 8px;
    }

    .skills-hashtags {
      margin-top: 10px;
    }

    .hashtag {
      color: #607d8b;
      font-weight: 500;
      font-size: 0.85rem;
      margin-right: 6px;
      cursor: pointer;
      transition: color 0.2s;
    }

    .hashtag:hover {
      color: #9caf88;
    }

    /* 🌿 Comments Section */
    .post-comments {
      border-top: 1px solid #f0f0f0;
      padding: 0 20px;
      background: #fafbfc;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease, padding 0.4s ease;
    }

    .post-comments.expanded {
      max-height: 400px;
      padding: 15px 20px;
    }

    .comments-header {
      font-weight: 600;
      font-size: 0.9rem;
      color: #333;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .comment {
      display: flex;
      margin-bottom: 12px;
      font-size: 0.85rem;
      line-height: 1.4;
    }

    .comment-author {
      font-weight: 600;
      color: #607d8b;
      margin-right: 6px;
      flex-shrink: 0;
    }

    .comment-text {
      color: #444;
    }

    /* 🌿 View More Toggle */
    .view-more {
      color: #607d8b;
      font-size: 0.85rem;
      cursor: pointer;
      font-weight: 500;
      margin-top: 8px;
      transition: color 0.2s;
    }

    .view-more:hover {
      color: #9caf88;
    }

    /* 🌿 Heart animation */
    @keyframes heartBeat {
      0% { transform: scale(1); }
      50% { transform: scale(1.2); }
      100% { transform: scale(1); }
    }

    .action-btn.liked {
      animation: heartBeat 0.3s ease;
    }

    /* 🌿 Updated Projects Section */
    .projects-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 25px;
    }

    /* 🌿 Flip Card Container */
    .flip-card {
      background-color: transparent;
      width: 100%;
      height: 280px;
      perspective: 1000px;
    }

    .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: left;
      transition: transform 0.6s;
      transform-style: preserve-3d;
      cursor: pointer;
    }

    /* Desktop hover behavior */
    @media (hover: hover) and (pointer: fine) {
      .flip-card:hover .flip-card-inner {
        transform: rotateY(180deg);
      }
    }

    /* Mobile click behavior - added via JavaScript */
    .flip-card-inner.flipped {
      transform: rotateY(180deg);
    }

    .flip-card-front, .flip-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 12px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.1);
      padding: 25px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
    }

    .flip-card-front {
      background: linear-gradient(135deg, #9caf88 0%, #a8c09a 100%);
      color: white;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .flip-card-back {
      background: #ffffff;
      color: #333;
      transform: rotateY(180deg);
      overflow-y: auto;
    }

    /* 🌿 Front Card Styles */
    .flip-card-front h3 {
      font-size: 1.4rem;
      margin-bottom: 10px;
      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    .flip-card-front .tech-stack {
      font-size: 0.9rem;
      opacity: 0.9;
      margin-bottom: 15px;
      font-weight: 500;
    }

    .flip-card-front .hover-hint {
      font-size: 0.8rem;
      opacity: 0.8;
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }

    /* Update hint text for mobile */
    @media (max-width: 768px) {
      .flip-card-front .hover-hint {
        display: none;
      }
      
      .flip-card-front .tap-hint {
        font-size: 0.8rem;
        opacity: 0.8;
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
      }
    }

    .flip-card-front .tap-hint {
      display: none;
    }

    @media (max-width: 768px) {
      .flip-card-front .tap-hint {
        display: flex;
      }
    }

    /* 🌿 Back Card Styles */
    .flip-card-back h3 {
      margin-bottom: 15px;
      color: #333;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .flip-card-back .github-link {
      color: #607d8b;
      font-size: 1.1rem;
      transition: color 0.3s;
    }

    .flip-card-back .github-link:hover {
      color: #9caf88;
    }

    .flip-card-back ul {
      margin: 15px 0;
      padding-left: 20px;
    }

    .flip-card-back li {
      margin-bottom: 8px;
      line-height: 1.5;
      font-size: 0.9rem;
    }

    .flip-card-back .tech-list {
      font-weight: 600;
      color: #607d8b;
      margin-bottom: 15px;
    }

    /* 🌿 Special styling for card 2 back content */
    .card-2 .flip-card-back .tech-list {
      font-weight: 600;
      color: #9caf88; /* Green instead of blue */
      margin-bottom: 15px;
    }

    /* 🌿 Sage Green and Baby Blue gradient themes for each card */
    .card-1 .flip-card-front {
      background: linear-gradient(135deg, #9caf88 0%, #a8c09a 100%); /* Sage Green */
    }

    .card-2 .flip-card-front {
      background: linear-gradient(135deg, #607d8b 0%, #78909c 100%); /* Navbar Blue */
    }

    .card-3 .flip-card-front {
      background: linear-gradient(135deg, #9caf88 0%, #a8c09a 100%); /* Sage Green */
    }

    /* 🌿 Close button cards */
    .close-btn {
      position: absolute;
      top: 10px;
      right: 12px;
      background: transparent;
      border: none;
      font-size: 1.5rem;
      font-weight: bold;
      color: #607d8b;
      cursor: pointer;
      z-index: 10;
      transition: color 0.2s;
      display: none; /* 👈 Hide by default */
    }

    .close-btn:hover {
      color: #9caf88;
    }

    /* Show only on mobile */
    @media (max-width: 768px) {
      .close-btn {
        display: block;
      }
    }

    /* 🌿 Polaroid Hobby Cards */
    .hobbies-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 25px;
      justify-items: center;
    }
    
    .polaroid {
      background: #fff;
      padding: 10px 10px 15px;
      border-radius: 6px;
      box-shadow: 0 6px 15px rgba(0,0,0,0.25);
      text-align: center;
      font-family: 'Inter', sans-serif; /* handwriting style */
      width: 180px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .polaroid img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      border-radius: 4px;
      display: block;
    }
    
    .polaroid p {
      margin: 8px 0 0;
      font-size: 0.9rem;
      color: #333;
    }
    
    .polaroid:hover {
      transform: rotate(-2deg) scale(1.05);
      box-shadow: 0 10px 25px rgba(0,0,0,0.35);
      cursor: pointer;
    }

    /* 🌿 Footer */
    footer {
      text-align: center;
      padding: 40px 20px;
      background: #f1f5f4;
      color: #333;
    }

    footer a {
      margin: 0 10px;
      font-weight: 500;
      color: #607d8b;
      text-decoration: none;
      transition: color 0.3s;
    }

    footer a:hover {
      color: #9caf88;
    }

    /* 🌿 Animations */
    .fade-in {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 1s ease-out, transform 1s ease-out;
    }

    .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* 🌿 About Section Layout */
    .about-container {
      display: flex;
      align-items: center; 
      gap: 20px;           
      flex-wrap: wrap;      
    }

    /* Hover animation for profile photo */
    .profile-photo {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      object-fit: cover;
      object-position: top center;
      border: 3px solid #9caf88;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      margin: 0;
      transition: transform 0.3s, box-shadow 0.3s;
    }

    .profile-photo:hover {
      transform: scale(1.08);
      box-shadow: 0 8px 20px rgba(0,0,0,0.4);
      cursor: pointer;
    }

    .about-text {
      flex: 1;         
      min-width: 200px; 
    }

    /* 🌿 Friends Section */
    .friends-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
      max-width: 600px;
      margin: 40px auto 0;
    }

    .friend-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #ffffff;
      padding: 20px 25px;
      border-radius: 12px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.15);
      transition: transform 0.3s, box-shadow 0.3s;
      text-decoration: none;
      cursor: pointer;
    }

    /* Names inside the card */
    .friend-card p {
      margin: 0;
      font-weight: 600;
      font-size: 1.1rem;
      color: #607d8b;           /* Default blue */
      transition: color 0.3s;    /* Smooth hover transition */
    }

    .friend-card:hover p {
      color: #9caf88;            /* Green on hover */
    }

    .friend-card i {
      font-size: 1.2rem;
      transition: color 0.3s;
      color: #607d8b; /* Same as text initially */
    }

    /* Hover effect for card itself (shadow + lift) */
    .friend-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 25px rgba(0,0,0,0.2);
    }

    .friend-card:hover i {
      color: #9caf88; /* Icon color on hover */
    }

    /* 🌿 Mobile Responsive */
    @media (max-width: 768px) {
      .experience-section {
        max-width: 100%;
        padding: 20px 0;
      }

      .post-image {
        height: 250px;
      }

      .post-header {
        padding: 12px 15px;
      }

      .post-actions {
        padding: 10px 15px 6px;
      }

      .post-caption {
        padding: 0 15px 12px;
      }

      .post-comments {
        padding: 0 15px;
      }

      .post-comments.expanded {
        padding: 12px 15px;
      }

      .flip-card {
        height: 250px;
      }
      
      .flip-card-front h3 {
        font-size: 1.2rem;
      }
      
      .projects-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }
    }