body {
      background-color: #0d0f12;
      color: #e0e0e0;
    }
    .navbar, footer {
      background-color: #0b0c0e;
    }
    /* Floating transparent nav */
/* Desktop only */
@media (min-width: 992px) {

    #navsubmenu {
        position: fixed;
        top: 20;
        left: 80%;
        transform: translateX(-50%);

        max-width: 1200px;
        z-index: 1000;
        padding: 1.3rem 1.5rem;

        background: transparent;

        transition:
            background 0.3s ease,
            box-shadow 0.3s ease,
            backdrop-filter 0.3s ease,
            opacity 0.4s ease,
            transform 0.4s ease;
    }

    #navsubmenu.scrolled {
        background: rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        top:0;
    }

    /* Hidden after inactivity */
    #navsubmenu.hidden {
        opacity: 0;
        pointer-events: none;
        transform: translateX(-50%) translateY(-20px);
    }

}
    .section-title {
      border-left: 4px solid #0d6efd;
      padding-left: 10px;
      margin-bottom: 20px;
    }
    .card {
      background-color: #16181c;
      border: none;
    }
    .card img, .card video {
      border-radius: 6px;
    }
    .skill-tag {
      background: #1b1e23;
      border: 1px solid #2b2f36;
      padding: 6px 12px;
      border-radius: 20px;
      margin: 4px;
      display: inline-block;
    }
    .gallery-img:hover,
    .video-frame:hover {
      transform: scale(1.03);
      transition: transform 0.3s ease-in-out;
    }
    .video-frame video {
      border-radius: 6px;
    }
    .timeline-item {
      margin-bottom: 15px;
    }
    .timeline-date {
      font-size: 0.9rem;
      color: #888;
    }

    /* Masonry Gallery */
    .masonry {
      column-count: 4;
      column-gap: 1rem;
    }

    @media (max-width: 992px) {
      .masonry { column-count: 3; }
    }

    @media (max-width: 768px) {
      .masonry { column-count: 2; }
    }

    @media (max-width: 576px) {
      .masonry { column-count: 1; }
    }

    .masonry-item {
      break-inside: avoid;
      margin-bottom: 1rem;
    }

    .masonry-item img {
      width: 100%;
      height: auto;     /* ← Natural resolution */
      border-radius: 6px;
      transition: transform 0.3s ease-in-out;
    }

    .masonry-item img:hover {
      transform: scale(1.03);
    }

    /* Carousel styles */
    .custom-carousel {
      position: relative;
      overflow: hidden;
      background: linear-gradient(180deg, #0f1114, #0b0c0e);
      border-radius: 8px;
    }
    .carousel-track {
      display: flex;
      transition: transform 0.5s ease;
    }
    .carousel-slide {
      min-width: 100%;
      user-select: none;
    }
    .carousel-slide img {
      display: block;
      width: 100%;
      height: 360px;
      object-fit: cover;
    }
    .carousel-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 5;
      background: rgba(0,0,0,0.35);
      border: none;
      color: #fff;
      font-size: 2rem;
      width: 44px;
      height: 60px;
    }
    .featured-video {
        max-width: 1400px;
        margin: 0 auto 4rem;
        background: #111;
        border-radius: 12px;
        overflow: hidden;
    }
    .featured-video .video-info {
        padding: 1.5rem;
    }
html {
    scroll-behavior: smooth;
}
.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    color: rgba(255,255,255,.75);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
    /* Styling for Certificate Tiles */
    .cert-image-tile {
      cursor: pointer;
      overflow: hidden;
      border-radius: 8px;
      border: 2px solid #2b2f36;
      background-color: #16181c;
      transition: transform 0.25s ease-in-out, border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
    }

    .cert-image-tile:hover {
      transform: scale(1.03);
      border-color: #0d6efd;
      box-shadow: 0 8px 24px rgba(13, 110, 253, 0.2);
    }

    .cert-image-tile img {
      width: 100%;
      height: 240px; /* Forces uniform thumbnail height across your grid layout */
      object-fit: cover; /* Crops image neatly into its thumbnail bounding box */
      display: block;
    }

    .video-frame {
        overflow: hidden;
        border-radius: 10px;
    }

    .video-frame iframe {
        transition: transform .3s ease;
    }

    .video-frame:hover iframe {
        transform: scale(1.02);
    }
    .carousel-btn.prev { left: 8px; }
    .carousel-btn.next { right: 8px; }
    .carousel-dots { text-align:center; padding:10px 0; }
    .carousel-dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:#555; margin:0 6px; cursor:pointer; }
    .carousel-dot.active { background:#0d6efd; }

    /* Gallery overlay and modal */
    .figure { position: relative; display:block; }
    .overlay {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      background: linear-gradient(180deg, transparent, rgba(0,0,0,0.6));
      color: #fff;
      padding: 10px;
      opacity: 0;
      transition: opacity 0.2s ease;
    }
    .figure:hover .overlay { opacity: 1; }
    .overlay h5 { margin:0; font-size:0.95rem; }

    .modal-overlay {
      position: fixed; inset:0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.7); z-index: 9999;
    }
    .modal-content-custom { max-width: 90%; max-height: 90%; }
    .modal-content-custom img { width: 100%; height: auto; border-radius:6px; }