/* ===== Base Styles ===== */
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background-color: #222;
  background-size: cover;
  color: #111111;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  background: #111111;
  color: #f8f8f8;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif; 
      
}

/* ===== Navigation ===== */
#top-nav {
  position: sticky;
  top: 0;
  background: white;
  z-index: 50;
  padding: 0.75rem 0;
  border-bottom: 1px solid #e5e7eb;
}

.nav-button {
  position: relative;
  padding: 0.25rem 0.5rem;
  transition: color 0.3s ease;
}

.nav-button:hover {
  color: #000000;
}

.nav-button.active::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 3px;
  background: black;
  border-radius: 2px;
}

/* ===== Profile Section ===== */
.profile-img {
  border-radius: 1.5rem;
  width: 8rem;
  height: 8rem;
  object-fit: cover;
  box-shadow: 0px 8px 20px rgba(0,0,0,0.15);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.profile-img:hover {
  transform: scale(1.08) rotate(2deg);
  box-shadow: 0px 12px 28px rgba(0,0,0,0.25);
}

/* Floating Animation */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.float-animation {
  animation: float 4s ease-in-out infinite;
}

/* ===== Buttons ===== */
button {
  cursor: pointer;
  transition: all 0.3s ease;
}

button:focus {
  outline: none;
}

.bg-black {
  background-color: black;
}

.bg-black:hover {
  background-color: #222;
}

.border {
  border-width: 1px;
}

.border-black:hover {
  background-color: black;
  color: white;
}

/* ===== Tabs ===== */
.tab-button {
  position: relative;
  padding-bottom: 0.5rem;
  transition: color 0.3s ease;
}

.tab-button.active {
  color: black;
}

.tab-button.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background-color: black;
  border-radius: 2px;
}

/* Tab Content Fade */
.tab-content {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.tab-content.active {
  opacity: 1;
}

/* ===== Responsive Layout ===== */
@media (max-width: 768px) {
  .flex {
    flex-direction: column;
    text-align: center;
  }

  .gap-8 {
    gap: 1.5rem;
  }

  .profile-img {
    width: 6rem;
    height: 6rem;
  }

  #profile-tabs {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  #top-nav {
    gap: 1.5rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .profile-img {
    width: 5rem;
    height: 5rem;
  }

  #top-nav {
    flex-wrap: wrap;
    gap: 1rem;
  }

  button {
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
  }
}
    /* Floating Animation */
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-5px); }
    }
    .float-animation {
      animation: float 4s ease-in-out infinite;
    }

    /* Tab Active State */
    .tab-button {
      position: relative;
      padding-bottom: 0.5rem;
      transition: color 0.3s ease;
    }
    .tab-button.active::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -2px;
      height: 3px;
      background-color: black;
      border-radius: 2px;
    }

    /* Fade + Slide Animation for Scroll */
    .reveal {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }
    .reveal.active {
      opacity: 1;
      transform: translateY(0);
    }

    /* Fade Animation for Tabs */
    .tab-content {
      opacity: 0;
      transition: opacity 0.5s ease;
    }
    .tab-content.opacity-100 {
      opacity: 1;
    }

    .modal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

 .section-bg {
      background: #181818;
    }
    .card-bg {
      background: #222222;
    }
    .text-main {
      color: #f8f8f8;
    }
    .text-sub {
      color: #b0b0b0;
    }
    .btn-main {
      background: #f8f8f8;
      color: #111111;
      font-weight: 600;
    }
    .btn-main:hover {
      background: #b0b0b0;
      color: #111111;
    }
    .border-main {
      border-color: #222222;
    }
    .shadow-main {
      box-shadow: 0 8px 32px 0 rgba(0,0,0,0.18);
    }
    .nav-link {
      color: #f8f8f8;
      transition: color 0.2s;
    }
    .nav-link:hover {
      color: #b0b0b0;
    }
    .footer-bg {
      background: #181818;
    }
    @keyframes cert-scroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    #cert-track {
      min-width: 200%;
    }

    /* --- Responsive Fixes --- */
    @media (max-width: 1024px) {
      .max-w-5xl, .max-w-6xl, .max-w-7xl {
        max-width: 100vw !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      .section-bg, .card-bg, .footer-bg {
        border-radius: 0 !important;
      }
      .rounded-3xl, .rounded-2xl, .rounded-xl, .rounded-lg, .rounded-full {
        border-radius: 1rem !important;
      }
      .shadow-main {
        box-shadow: 0 4px 16px 0 rgba(0,0,0,0.18);
      }
      .flex-row, .lg\:flex-row, .lg\:flex-row-reverse {
        flex-direction: column !important;
      }
      .gap-12, .gap-16, .gap-24 {
        gap: 1.5rem !important;
      }
      .p-12, .p-10, .p-8 {
        padding: 1.25rem !important;
      }
      .h-320, .h-350, .h-40 {
        height: 180px !important;
      }
      .w-500, .w-600 {
        width: 100% !important;
        max-width: 100vw !important;
      }
      .text-5xl { font-size: 2rem !important; }
      .text-4xl { font-size: 1.5rem !important; }
      .text-3xl { font-size: 1.25rem !important; }
      .text-2xl { font-size: 1rem !important; }
      .text-xl { font-size: 0.95rem !important; }
      .text-lg { font-size: 0.9rem !important; }
      .px-4, .px-6 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
      .py-24, .py-20, .py-16 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
      .mb-16 { margin-bottom: 1.5rem !important; }
      .mb-8 { margin-bottom: 1rem !important; }
      .mb-6 { margin-bottom: 0.75rem !important; }
      .mb-4 { margin-bottom: 0.5rem !important; }
    }

    /* Social Links: Always wrap and center on mobile, bigger and spaced */
    @media (max-width: 768px) {
      .social-links {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 1.25rem !important;
        flex-wrap: wrap !important;
        margin-bottom: 1.5rem !important;
      }
      .social-links a {
        margin-bottom: 0.5rem;
        width: 3.5rem !important;
        height: 3.5rem !important;
        font-size: 1.5rem !important;
        box-shadow: 0 4px 16px 0 rgba(0,0,0,0.18);
        transition: transform 0.2s;
      }
      .social-links a:hover {
        transform: scale(1.1);
      }
      .social-links i {
        font-size: 1.5rem !important;
      }
    }
    /* Certificates Carousel: Professional, clean, centered on mobile */
   @media (max-width: 640px) {
  #cert-carousel {
    height: auto !important;
    min-height: unset !important;
    padding: 1.5rem 0 2rem 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: #181818;
    box-shadow: 0 4px 24px 0 rgba(0,0,0,0.18);
    border-radius: 1.25rem !important;
    position: relative;
    overflow: hidden;
  }

  #cert-track {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;       /* ✅ snap effect */
    -webkit-overflow-scrolling: touch;   /* ✅ smooth iOS swipe */
    gap: 1.5rem !important;
    width: 100% !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 0 1rem 1rem 1rem !important;
    scrollbar-width: thin;
    scrollbar-color: #b0b0b0 #222;
  }

  #cert-track::-webkit-scrollbar {
    height: 6px;
  }
  #cert-track::-webkit-scrollbar-thumb {
    background: #b0b0b0;
    border-radius: 4px;
  }

  #cert-track img {
    height: auto !important;
    width: 80% !important;                  /* ✅ make them big cards */
    max-width: 320px !important;
    flex: 0 0 auto !important;
    scroll-snap-align: center;              /* ✅ snaps each cert to center */
    padding: 0.75rem !important;
    border-radius: 1rem !important;
    box-shadow: 0 4px 16px 0 rgba(0,0,0,0.25);
    background: #fff;
    border: 2px solid #222222;
    transition: transform 0.3s, box-shadow 0.3s;
    object-fit: contain;
  }

  #cert-track img:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px 0 rgba(0,0,0,0.3);
    z-index: 2;
  }

  #cert-carousel::after {
    content: '⬅️ Swipe to view certificates ➡️';
    display: block;
    margin-top: 0.75rem;
    color: #b0b0b0;
    font-size: 0.95rem;
    text-align: center;
    opacity: 0.8;
  }
}


    /* Make burger menu button always visible above overlay */
    #burger-btn {
      z-index: 100;
      position: relative;
    }
    /* Make close button always visible above overlay */
    #close-menu {
      z-index: 101;
      position: relative;
    }
    /* When mobile menu is open, keep burger button visible and clickable */
    @media (max-width: 768px) {
      #burger-btn {
        position: fixed !important;
        top: 1rem !important;
        right: 1.25rem !important;
        background: #181818 !important;
        box-shadow: 0 4px 16px 0 rgba(0,0,0,0.18) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        display: flex !important;
      }
    }