/* ==========================================================================
       DESIGN SYSTEM & CSS VARIABLES (NO GRADIENTS - FLAT SOLID COLORS ONLY)
       ========================================================================== */
    :root {
      /* Color Palette System */
      --primary-color: #054274;
      /* Deep Rich Blue */
      --primary-hover: #03335C;
      /* Darker Deep Blue */
      --accent-color: #06569B;
      /* Medium Royal Blue Accent */
      --accent-hover: #044379;
      /* Deep Royal Hover */
      --accent-light: #EBF4FB;
      /* Soft Sky Blue Light Background */
      --sky-blue: #0EA5E9;
      /* Bright Sky Blue Accent */
      --highlight-red: #E63946;
      /* Energetic Accent Red */
      --bg-offwhite: #F4F8FC;
      /* Clean Ice / Off-white section background */
      --bg-white: #FFFFFF;
      /* Pure white background */
      --text-dark: #1C2A3A;
      /* Dark Slate Blue body text */
      --text-light: #F8FAFC;
      /* Light text for dark backgrounds */
      --border-color: #E2E8F0;
      /* Hairline subtle border */

      /* Typography Tokens */
      --font-heading: 'Cinzel', Georgia, serif;
      --font-body: 'Inter', system-ui, -apple-system, sans-serif;

      /* Uniform Section Spacing (STRICT: Equal top and bottom) */
      --section-padding: 55px 0;
    }

    /* Mobile Section Spacing Adjustment */
    @media (max-width: 768px) {
      :root {
        --section-padding: 35px 0;
      }
    }

    @media (max-width: 480px) {
      :root {
        --section-padding: 30px 0;
      }
    }

    /* ==========================================================================
       BASE STYLES & RESET
       ========================================================================== */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      font-size: 16px;
      overflow-x: clip;
      width: 100%;
    }

    body {
      font-family: var(--font-body);
      color: var(--text-dark);
      background-color: var(--bg-white);
      line-height: 1.7;
      margin: 0;
      padding: 0;
      -webkit-font-smoothing: antialiased;
      overflow-x: clip;
      width: 100%;
      position: relative;
    }

    main {
      overflow-x: clip;
      width: 100%;
    }

    /* ==========================================================================
       UNIFORM TYPOGRAPHY SCALE (STRICT ENFORCEMENT - NOTHING UNDER 0.95rem)
       ========================================================================== */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: var(--font-heading);
      color: var(--primary-color);
      margin-top: 0;
      letter-spacing: 0.3px;
    }

    /* Section titles across ALL sections: 2.25rem desktop / 1.75rem mobile */
    h2,
    .section-heading {
      font-size: 2.25rem !important;
      font-weight: 700 !important;
      line-height: 1.3 !important;
      margin-bottom: 1.25rem !important;
    }

    @media (max-width: 768px) {

      h2,
      .section-heading {
        font-size: 1.75rem !important;
        margin-bottom: 1rem !important;
      }
    }

    @media (max-width: 480px) {

      h2,
      .section-heading {
        font-size: 1.45rem !important;
        line-height: 1.35 !important;
        margin-bottom: 0.85rem !important;
      }

      h3,
      h4,
      .sub-heading,
      .card-title-custom {
        font-size: 1.15rem !important;
      }

      p,
      .body-text {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
      }
    }

    /* Sub-headings across ALL sections: 1.35rem, font-weight 600 */
    h3,
    h4,
    .sub-heading,
    .card-title-custom {
      font-size: 1.35rem !important;
      font-weight: 600 !important;
      line-height: 1.35 !important;
    }

    /* Body paragraphs across ALL sections: 1rem (16px), line-height 1.7, Natural Left-Aligned Typography */
    p,
    .body-text {
      font-family: var(--font-body);
      font-size: 1rem !important;
      line-height: 1.7 !important;
      color: var(--text-dark);
      text-align: left;
      word-spacing: normal;
    }

    .footer-bottom-border p {
      text-align: center !important;
    }

    /* Small text, labels, badges, nav links: Never below 0.95rem */
    small,
    .small-text,
    .badge,
    .nav-link,
    .dropdown-item,
    .btn-custom-sm {
      font-size: 0.95rem !important;
    }

    /* Buttons: 1rem, font-weight 600, letter-spacing 0.3px */
    .btn-custom {
      font-family: var(--font-body);
      font-size: 1rem !important;
      font-weight: 600 !important;
      letter-spacing: 0.3px !important;
      padding: 0.75rem 1.65rem;
      border-radius: 6px;
      transition: all 0.3s ease;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      border: none;
      white-space: nowrap;
    }

    @media (max-width: 576px) {
      .btn-custom {
        padding: 0.65rem 1.25rem;
        font-size: 0.95rem !important;
        white-space: normal;
        text-align: center;
      }
    }

    .btn-gold {
      background-color: var(--accent-color);
      color: #FFFFFF !important;
      transition: all 0.35s ease;
    }

    .btn-gold:hover,
    .btn-gold:focus {
      background-color: var(--highlight-red);
      color: #FFFFFF !important;
      box-shadow: 0 6px 18px rgba(230, 57, 70, 0.35);
      transform: translateY(-2px);
    }

    .btn-red {
      background-color: var(--highlight-red);
      color: #FFFFFF !important;
      transition: all 0.35s ease;
    }

    .btn-red:hover,
    .btn-red:focus {
      background-color: #C52828;
      color: #FFFFFF !important;
      box-shadow: 0 6px 18px rgba(230, 57, 70, 0.35);
      transform: translateY(-2px);
    }

    .btn-outline-navy {
      background-color: transparent;
      color: var(--primary-color);
      box-shadow: inset 0 0 0 1px var(--primary-color);
      transition: all 0.35s ease;
    }

    .btn-outline-navy:hover,
    .btn-outline-navy:focus {
      background-color: var(--highlight-red);
      color: #FFFFFF !important;
      box-shadow: inset 0 0 0 1px var(--highlight-red), 0 6px 18px rgba(230, 57, 70, 0.35);
      transform: translateY(-2px);
    }

    /* Button Groups & Action CTA Spacing (Keeps Buttons Side-by-Side in One Row) */
    .about-cta-group {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      gap: 0.85rem;
    }

    @media (max-width: 768px) {
      .about-cta-group {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.65rem;
      }

      .about-cta-group .btn-custom {
        padding: 0.65rem 1.15rem;
        font-size: 0.92rem !important;
        white-space: nowrap;
        margin: 0;
      }
    }

    @media (max-width: 400px) {
      .about-cta-group {
        gap: 0.45rem;
      }

      .about-cta-group .btn-custom {
        padding: 0.55rem 0.85rem;
        font-size: 0.86rem !important;
      }
    }

    .contact-cta-group {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      row-gap: 0.75rem;
      column-gap: 0.75rem;
    }

    .contact-cta-group .btn-custom {
      margin-bottom: 0.5rem;
      margin-right: 0.5rem;
    }

    .text-accent {
      color: var(--accent-color) !important;
    }

    .text-sky {
      color: var(--sky-blue) !important;
    }

    .text-red {
      color: var(--highlight-red) !important;
    }

    /* ==========================================================================
       SECTION CONTAINERS & SPACING
       ========================================================================== */
    .section-padding {
      padding: var(--section-padding);
    }

    .bg-offwhite-custom {
      background-color: var(--bg-offwhite);
    }

    .bg-white-custom {
      background-color: var(--bg-white);
    }

    .bg-navy-custom {
      background-color: var(--primary-color);
      color: var(--text-light);
    }

    /* ==========================================================================
       CARD DESIGN SYSTEM (Subtle Shadows, Rounded Corners, Elevated Hover)
       ========================================================================== */
    .custom-card {
      background-color: #FFFFFF;
      border: none;
      border-radius: 12px;
      padding: 1.85rem;
      box-shadow: 0 6px 20px rgba(15, 27, 45, 0.04);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .custom-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 14px 30px rgba(15, 27, 45, 0.09);
    }

    .card-icon-wrapper {
      width: 54px;
      height: 54px;
      background-color: var(--accent-light);
      color: var(--primary-color);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.45rem;
      margin-bottom: 1.25rem;
      transition: all 0.3s ease;
      border: 1px solid rgba(5, 66, 116, 0.12);
    }

    .custom-card:hover .card-icon-wrapper {
      background-color: var(--primary-color);
      color: var(--sky-blue);
    }

    /* ==========================================================================
       1. NAVBAR SECTION (Clean Header, Sticky Top, Visible Dropdown Arrows)
       ========================================================================== */
    header,
    header.sticky-top {
      position: -webkit-sticky !important;
      position: sticky !important;
      top: 0 !important;
      z-index: 1030 !important;
      margin: 0;
      padding: 0;
      width: 100%;
    }

    .navbar-custom {
      background-color: var(--primary-color) !important;
      padding: 0.95rem 0;
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
      border: none;
      margin: 0;
    }

    .navbar-custom.scrolled {
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    }

    .navbar-brand-custom {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 1.65rem;
      color: #FFFFFF !important;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      letter-spacing: 0.5px;
    }

    .navbar-brand-custom .brand-dot {
      color: var(--sky-blue);
    }

    .nav-link-custom {
      font-family: var(--font-body);
      font-size: 0.95rem !important;
      font-weight: 500;
      color: #E2E8F0 !important;
      padding: 0.5rem 0.85rem !important;
      position: relative;
      transition: color 0.25s ease;
      display: inline-flex;
      align-items: center;
    }

    .nav-link-custom:hover,
    .nav-link-custom:focus,
    .nav-link-custom.active {
      color: var(--sky-blue) !important;
    }

    /* Visible Nav Dropdown Chevron Icon */
    .nav-dropdown-icon {
      font-size: 0.75rem !important;
      margin-left: 0.4rem;
      transition: transform 0.25s ease;
      display: inline-block;
      color: var(--sky-blue);
    }

    .dropdown:hover .nav-dropdown-icon,
    .dropdown.show .nav-dropdown-icon {
      transform: rotate(180deg);
      color: var(--sky-blue);
    }

    /* Animated Underline on Nav Links */
    .nav-link-custom::after {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      bottom: 2px;
      left: 50%;
      background-color: var(--sky-blue);
      transition: width 0.3s ease, left 0.3s ease;
    }

    .nav-link-custom:hover::after,
    .nav-link-custom.active::after {
      width: 70%;
      left: 15%;
    }

    /* Desktop Hover Dropdown Menu Behavior */
    @media (min-width: 1200px) {
      .navbar-nav .dropdown:hover .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }

      .dropdown-menu-custom {
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.25s ease 0.15s;
      }

      .navbar-nav .dropdown:hover .dropdown-menu {
        transition-delay: 0.1s;
      }
    }

    /* Premium Dropdown Menu Styling */
    .dropdown-menu-custom {
      background-color: var(--primary-color);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
      padding: 0.5rem 0;
      margin-top: 0.3rem;
    }

    .dropdown-menu-custom .dropdown-item {
      color: #E2E8F0 !important;
      font-family: var(--font-body);
      font-size: 0.95rem !important;
      font-weight: 500;
      padding: 0.65rem 1.25rem;
      transition: all 0.25s ease;
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }

    .dropdown-menu-custom .dropdown-item:hover,
    .dropdown-menu-custom .dropdown-item:focus {
      background-color: var(--primary-hover);
      color: var(--sky-blue) !important;
      padding-left: 1.5rem;
    }

    .dropdown-menu-custom .dropdown-item i {
      color: var(--sky-blue);
    }

    .navbar-toggler-custom {
      border: 1px solid rgba(255, 255, 255, 0.4);
      padding: 0.4rem 0.65rem;
      border-radius: 6px;
      color: #FFFFFF !important;
      background-color: transparent;
      transition: all 0.25s ease;
    }

    .navbar-toggler-custom i,
    .navbar-toggler-custom .bi-list {
      color: #FFFFFF !important;
    }

    .navbar-toggler-custom:hover {
      border-color: #FFFFFF;
      background-color: rgba(255, 255, 255, 0.1);
    }

    .navbar-toggler-custom:focus {
      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
      outline: none;
    }

    /* Offcanvas Mobile Menu Styling */
    .offcanvas-custom {
      background-color: var(--primary-color);
      color: #FFFFFF;
      border: none;
    }

    .offcanvas-custom .btn-close {
      background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
      opacity: 1 !important;
      filter: none !important;
      transition: all 0.25s ease;
    }

    .offcanvas-custom .btn-close:hover,
    .offcanvas-custom .btn-close:focus {
      opacity: 1 !important;
      transform: scale(1.15);
      outline: none;
      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
    }

    /* ==========================================================================
       2. HERO CAROUSEL SECTION (Positioned Directly Below Header Navbar)
       ========================================================================== */
    .hero-carousel-section {
      position: relative;
      width: 100%;
      background-color: var(--primary-color);
      margin-top: 0;
      padding-top: 0;
    }

    .hero-carousel-item {
      height: 70vh;
      min-height: 480px;
      max-height: 720px;
    }

    @media (max-width: 768px) {
      .hero-carousel-item {
        height: 45vh;
        min-height: 280px;
      }
    }

    .hero-carousel-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    /* Carousel Indicators Styled in Accent Gold */
    .carousel-indicators [data-bs-target] {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #FFFFFF;
      opacity: 0.5;
      border: 2px solid var(--accent-color);
      transition: all 0.3s ease;
    }

    .carousel-indicators .active {
      background-color: var(--accent-color);
      opacity: 1;
      transform: scale(1.25);
    }

    /* Minimal Prev/Next Carousel Controls */
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      background-color: rgba(15, 27, 45, 0.75);
      padding: 1.25rem;
      border-radius: 50%;
      background-size: 50%;
    }

    .carousel-control-prev:hover .carousel-control-prev-icon,
    .carousel-control-next:hover .carousel-control-next-icon {
      background-color: var(--accent-color);
    }

    /* ==========================================================================
       3. ABOUT ME SECTION
       ========================================================================== */

    /* About Page Grid: Image spans both rows on desktop, stacks on mobile */
    .about-grid-layout {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    @media (min-width: 992px) {
      .about-grid-layout {
        display: grid;
        grid-template-columns: 1fr 5fr 4fr;
        grid-template-rows: auto auto;
        gap: 2rem 2.5rem;
        grid-template-columns: 58% 42%;
      }

      .about-grid-text {
        grid-column: 1;
        grid-row: 1;
      }

      .about-grid-image {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: start;
      }

      .about-grid-skills {
        grid-column: 1;
        grid-row: 2;
      }
    }

    .about-image-wrapper {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 12px 32px rgba(15, 27, 45, 0.08);
    }

    .about-image-wrapper img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
      border-radius: 12px;
    }

    .about-badge-tag {
      position: absolute;
      bottom: 18px;
      left: 18px;
      background-color: var(--primary-color);
      color: #FFFFFF !important;
      padding: 0.6rem 1.2rem;
      border-radius: 8px;
      font-size: 0.95rem !important;
      font-weight: 600;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.3);
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      z-index: 5;
    }

    .about-badge-tag i {
      color: var(--sky-blue) !important;
      font-size: 1.15rem !important;
    }

    .about-badge-tag span {
      color: #FFFFFF !important;
    }

    .skills-badge-container {
      display: flex;
      flex-wrap: wrap;
      gap: 0.65rem;
      margin-top: 1.5rem;
    }

    .skill-badge {
      background-color: var(--bg-offwhite);
      color: var(--primary-color);
      padding: 0.5rem 1rem;
      border-radius: 20px;
      font-size: 0.95rem !important;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      transition: all 0.25s ease;
      box-shadow: 0 2px 6px rgba(15, 27, 45, 0.03);
    }

    .skill-badge:hover {
      background-color: var(--accent-light);
      color: var(--accent-hover);
      transform: translateY(-2px);
    }

    /* ==========================================================================
       4. Academics SECTION (Horizontal One-by-One Mouse Drag & Auto Slider)
       ========================================================================== */
    .beyond-academics-section {
      background-color: var(--bg-offwhite);
      position: relative;
    }

    .renaissance-slider-wrapper {
      position: relative;
      width: 100%;
    }

    .renaissance-slider-track {
      display: flex;
      align-items: stretch;
      gap: 1.5rem;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      padding: 24px 8px 36px 8px;
      margin-top: -16px;
      margin-bottom: -16px;
      -ms-overflow-style: none;
      /* IE and Edge */
      scrollbar-width: none;
      /* Firefox */
      cursor: grab;
      user-select: none;
      -webkit-overflow-scrolling: touch;
      scroll-padding: 0 8px;
    }

    .renaissance-slider-track::-webkit-scrollbar {
      display: none;
      /* Chrome, Safari, Opera */
    }

    .renaissance-slider-track.active-drag {
      cursor: grabbing;
      scroll-snap-type: none;
      scroll-behavior: auto;
    }

    .renaissance-card-slide {
      flex: 0 0 calc(33.333% - 1rem);
      max-width: calc(33.333% - 1rem);
      scroll-snap-align: start;
      display: flex;
      flex-direction: column;
    }

    @media (min-width: 768px) and (max-width: 991px) {
      .renaissance-card-slide {
        flex: 0 0 calc(50% - 0.75rem);
        max-width: calc(50% - 0.75rem);
        scroll-snap-align: start;
      }
    }

    @media (max-width: 767px) {
      .renaissance-slider-wrapper {
        overflow: hidden;
      }

      .renaissance-slider-track {
        gap: 1.5rem;
        padding: 16px 0 28px 0;
        margin-top: -10px;
        margin-bottom: -10px;
        scroll-padding: 0;
        scroll-snap-type: x mandatory;
      }

      .renaissance-card-slide {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        scroll-snap-align: center;
        scroll-snap-stop: always;
      }

      .renaissance-card {
        padding: 1.65rem 1.35rem;
        margin: 0;
        width: 100%;
      }

      .renaissance-card .body-text {
        font-size: 0.93rem !important;
        line-height: 1.6 !important;
      }
    }

    @media (max-width: 380px) {
      .renaissance-card {
        padding: 1.35rem 1.1rem;
      }

      .renaissance-card .card-title-custom {
        font-size: 1.25rem !important;
      }
    }

    .renaissance-card {
      background-color: #FFFFFF;
      border: 1px solid rgba(15, 27, 45, 0.08);
      border-radius: 16px;
      padding: 2rem 1.75rem;
      box-shadow: 0 6px 20px rgba(15, 27, 45, 0.05);
      transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.35s ease, border-color 0.35s ease;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      position: relative;
    }

    .renaissance-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 40px rgba(5, 66, 116, 0.12);
      border-color: rgba(198, 166, 100, 0.6);
      background-color: #FFFFFF;
    }

    .renaissance-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1.25rem;
    }

    .renaissance-tag {
      font-size: 0.75rem !important;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-uppercase: uppercase;
      color: var(--primary-color);
      background-color: var(--accent-light);
      border: 1px solid rgba(198, 166, 100, 0.3);
      padding: 0.35rem 0.85rem;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
    }

    .renaissance-icon-box {
      width: 50px;
      height: 50px;
      background-color: var(--accent-light);
      color: var(--primary-color);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.35rem;
      transition: all 0.35s ease;
      flex-shrink: 0;
      border: 1px solid rgba(5, 66, 116, 0.12);
    }

    .renaissance-card:hover .renaissance-icon-box {
      background-color: var(--primary-color);
      color: var(--sky-blue);
      transform: scale(1.08) rotate(3deg);
    }

    .renaissance-card .card-title-custom {
      font-family: var(--font-heading);
      font-size: 1.4rem !important;
      font-weight: 700 !important;
      color: var(--primary-color);
      margin-bottom: 0.75rem;
    }

    .renaissance-card .body-text {
      color: var(--text-dark);
      font-size: 0.96rem !important;
      line-height: 1.65 !important;
      margin-bottom: 1.15rem;
      flex-grow: 1;
    }

    .renaissance-highlights {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      margin-bottom: 1.4rem;
    }

    .highlight-chip {
      font-size: 0.8rem !important;
      font-weight: 600;
      color: var(--text-dark);
      background-color: var(--bg-offwhite);
      padding: 0.25rem 0.65rem;
      border-radius: 6px;
      border: 1px solid rgba(0, 0, 0, 0.04);
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
    }

    .renaissance-link {
      font-family: var(--font-body);
      font-size: 0.95rem !important;
      font-weight: 700;
      color: var(--accent-color);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      margin-top: auto;
      transition: color 0.25s ease;
    }

    .renaissance-link i {
      transition: transform 0.25s ease;
    }

    .renaissance-card:hover .renaissance-link {
      color: var(--accent-hover);
    }

    .renaissance-card:hover .renaissance-link i {
      transform: translateX(5px);
    }

    .renaissance-dots-container {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;
      margin-top: 0.5rem;
    }

    .renaissance-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: var(--primary-color);
      opacity: 0.25;
      border: none;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      padding: 0;
    }

    .renaissance-dot:hover {
      opacity: 0.6;
    }

    .renaissance-dot.active {
      width: 32px;
      border-radius: 10px;
      background-color: var(--accent-color);
      opacity: 1;
    }

    .renaissance-ctrl-btn {
      width: 44px;
      height: 44px;
      background-color: #FFFFFF;
      color: var(--primary-color);
      border: 1px solid var(--border-color);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 16px rgba(15, 27, 45, 0.08);
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .renaissance-ctrl-btn:hover {
      background-color: var(--accent-color);
      color: var(--primary-color);
      border-color: var(--accent-color);
      transform: scale(1.08);
      box-shadow: 0 8px 20px rgba(198, 166, 100, 0.3);
    }

    /* ==========================================================================
       5. VISION / GOALS SECTION ("Be the Change!" Sticky Left Column & Modern UI)
       ========================================================================== */
    @media (min-width: 992px) {
      .vision-sticky-col {
        position: sticky;
        top: 95px;
        align-self: flex-start;
      }
    }

    .vision-card-left {
      background-color: #FFFFFF;
      border: none;
      border-radius: 12px;
      padding: 1.5rem 1.65rem;
      box-shadow: 0 6px 20px rgba(15, 27, 45, 0.04);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .vision-card-left:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 30px rgba(15, 27, 45, 0.08);
    }

    .goals-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .goals-list-item {
      background-color: #FFFFFF;
      border: none;
      border-radius: 12px;
      padding: 1.5rem 1.65rem;
      margin-bottom: 1.15rem;
      display: flex;
      align-items: flex-start;
      gap: 1.25rem;
      box-shadow: 0 6px 20px rgba(15, 27, 45, 0.04);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .goals-list-item:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 30px rgba(15, 27, 45, 0.08);
    }

    .goal-badge-num {
      width: 42px;
      height: 42px;
      background-color: var(--accent-light);
      color: var(--primary-color);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.95rem !important;
      flex-shrink: 0;
      transition: all 0.3s ease;
      border: 1px solid rgba(5, 66, 116, 0.15);
    }

    .goals-list-item:hover .goal-badge-num {
      background-color: var(--primary-color);
      color: var(--sky-blue);
    }

    .goal-check-icon {
      color: var(--highlight-red);
      font-size: 1.25rem;
      margin-right: 0.4rem;
    }

    /* ==========================================================================
       6. QUICK LINKS SECTION
       ========================================================================== */
    .quick-link-card {
      text-decoration: none;
      color: var(--primary-color);
      display: flex;
      align-items: center;
      gap: 1.1rem;
      padding: 1.35rem;
      background-color: #FFFFFF;
      border: none;
      border-radius: 10px;
      box-shadow: 0 6px 18px rgba(15, 27, 45, 0.04);
      transition: all 0.3s ease;
    }

    .quick-link-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 28px rgba(15, 27, 45, 0.09);
      color: var(--primary-color);
    }

    .quick-link-icon {
      width: 46px;
      height: 46px;
      background-color: var(--accent-light);
      color: var(--primary-color);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      flex-shrink: 0;
      transition: all 0.3s ease;
      border: 1px solid rgba(5, 66, 116, 0.12);
    }

    .quick-link-card:hover .quick-link-icon {
      background-color: var(--primary-color);
      color: var(--sky-blue);
    }

    /* ==========================================================================
       7. EXPLORE SKILLS & PORTFOLIO SECTION (Clean 1-Line Cards, 5 per Row)
       ========================================================================== */
    .portfolio-cta-card {
      text-decoration: none;
      background-color: var(--bg-offwhite);
      border: none;
      border-radius: 10px;
      padding: 1.5rem 1.1rem;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      height: 100%;
      box-shadow: 0 4px 14px rgba(15, 27, 45, 0.03);
      transition: all 0.3s ease;
    }

    .portfolio-cta-card:hover {
      background-color: #FFFFFF;
      transform: translateY(-5px);
      box-shadow: 0 14px 28px rgba(15, 27, 45, 0.09);
    }

    #about-page .portfolio-cta-card {
      background-color: #FFFFFF;
    }

    .portfolio-cta-icon {
      width: 54px;
      height: 54px;
      background-color: var(--accent-light);
      color: var(--primary-color);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      margin-bottom: 0.9rem;
      transition: all 0.3s ease;
      border: 1px solid rgba(5, 66, 116, 0.12);
    }

    .portfolio-cta-card:hover .portfolio-cta-icon {
      background-color: var(--primary-color);
      color: var(--sky-blue);
    }

    .portfolio-cta-arrow {
      font-size: 0.95rem !important;
      font-weight: 600;
      color: var(--accent-color);
      display: flex;
      align-items: center;
      gap: 0.3rem;
      margin-top: 0.75rem;
    }

    .portfolio-cta-card:hover .portfolio-cta-arrow {
      color: var(--accent-hover);
    }

    /* ==========================================================================
       8. CONNECT CTA SECTION (Compact 2-Column Banner Layout - Content Left / Buttons Right)
       ========================================================================== */
    .connect-cta-section {
      background-color: var(--bg-offwhite);
      padding: 38px 0;
      border: none;
    }

    .connect-cta-banner {
      background-color: #FFFFFF;
      border-radius: 12px;
      padding: 1.75rem 2.25rem;
      box-shadow: 0 6px 22px rgba(15, 27, 45, 0.05);
    }

    /* ==========================================================================
       9. FOOTER & SCROLL TO TOP (High-Contrast Vibrant Icons)
       ========================================================================== */
    .footer-section {
      background-color: var(--primary-color);
      color: #E2E8F0;
      border: none;
    }

    .footer-section .text-accent {
      color: var(--sky-blue) !important;
    }

    .footer-title {
      font-family: var(--font-heading);
      font-size: 1.45rem !important;
      font-weight: 600;
      color: #FFFFFF;
      margin-bottom: 1.25rem;
    }

    .footer-contact-link {
      color: #E2E8F0;
      text-decoration: none;
      transition: color 0.25s ease;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }

    .footer-contact-link:hover {
      color: var(--sky-blue);
    }

    .social-icon-btn {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.12);
      color: #FFFFFF;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      font-size: 1.15rem;
      transition: all 0.3s ease;
      margin-right: 0.5rem;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .social-icon-btn:hover {
      background-color: var(--sky-blue);
      color: #FFFFFF;
      border-color: var(--sky-blue);
      transform: translateY(-3px);
      box-shadow: 0 6px 16px rgba(14, 165, 233, 0.35);
    }

    .footer-bottom-border {
      border-top: 1px solid rgba(226, 232, 240, 0.15);
      padding-top: 1.5rem;
      margin-top: 2.5rem;
    }

    /* Floating Scroll To Top Button */
    .scroll-top-btn {
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: 48px;
      height: 48px;
      background-color: var(--sky-blue);
      color: #FFFFFF;
      border: none;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      box-shadow: 0 6px 18px rgba(5, 66, 116, 0.4);
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      z-index: 1020;
    }

    .scroll-top-btn.visible {
      opacity: 1;
      visibility: visible;
    }

    .scroll-top-btn:hover {
      background-color: var(--highlight-red);
      color: #FFFFFF;
      transform: translateY(-3px);
    }

    /* ==========================================================================
       SUBTLE SCROLL ANIMATIONS (Intersection Observer Fade-Up)
       ========================================================================== */
    .fade-up-element {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .fade-up-element.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ==========================================================================
       COMPREHENSIVE RESPONSIVE DESIGN & MOBILE OPTIMIZATIONS
       ========================================================================== */

    /* Large Tablets & Small Desktops (max-width: 1199.98px) */
    @media (max-width: 1199.98px) {
      .offcanvas-custom {
        max-width: 320px;
        width: 85%;
      }

      .offcanvas-body {
        padding: 1.25rem 1rem;
      }

      .offcanvas-body .navbar-nav {
        gap: 0.35rem;
      }

      .offcanvas-body .nav-link-custom {
        font-size: 1.05rem !important;
        padding: 0.7rem 0.85rem !important;
        border-radius: 8px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .offcanvas-body .nav-link-custom:hover,
      .offcanvas-body .nav-link-custom:focus {
        background-color: rgba(255, 255, 255, 0.08);
      }

      .offcanvas-body .nav-link-custom::after {
        display: none;
      }

      .offcanvas-body .dropdown-menu-custom {
        background-color: rgba(0, 0, 0, 0.22);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 0.4rem;
        margin: 0.25rem 0 0.5rem;
        box-shadow: none;
      }

      .offcanvas-body .dropdown-item {
        padding: 0.6rem 0.85rem !important;
        font-size: 0.95rem !important;
        border-radius: 6px;
      }
    }

    /* Medium Tablets & Below (max-width: 991.98px) */
    @media (max-width: 991.98px) {
      .hero-carousel-item {
        height: 55vh;
        min-height: 350px;
      }

      .about-image-wrapper {
        max-width: 440px;
        margin: 1.5rem auto;
      }

      .about-header-wrapper,
      .vision-header-wrapper,
      .beyond-header-wrapper,
      .about-skills-title,
      .vision-goals-title,
      .responsive-center {
        text-align: center !important;
      }

      .vision-sticky-col {
        position: static;
        margin-bottom: 1.25rem;
      }

      .vision-goals-title {
        margin-bottom: 0.85rem !important;
      }

      .vision-card-left {
        padding: 1.35rem 1.25rem;
      }
    }

    /* Mobile Phones & Phablets (max-width: 768px) */
    @media (max-width: 768px) {
      .navbar-custom {
        padding: 0.75rem 0;
      }

      .hero-carousel-item {
        height: 45vh;
        min-height: 260px;
      }

      .carousel-control-prev-icon,
      .carousel-control-next-icon {
        padding: 0.9rem;
        background-size: 60%;
      }

      .carousel-indicators [data-bs-target] {
        width: 9px;
        height: 9px;
      }

      .connect-cta-banner {
        padding: 1.5rem 1.25rem;
      }

      .footer-section {
        padding-top: 2.75rem !important;
        padding-bottom: 2rem !important;
      }

      .scroll-top-btn {
        bottom: 20px;
        right: 20px;
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
      }
    }

    /* Small Mobile Phones (max-width: 576px) */
    @media (max-width: 576px) {
      .navbar-brand-custom {
        font-size: 1.35rem;
      }

      .hero-carousel-item {
        height: 38vh;
        min-height: 220px;
      }

      .carousel-control-prev,
      .carousel-control-next {
        width: 14%;
      }

      .carousel-control-prev-icon,
      .carousel-control-next-icon {
        padding: 0.75rem;
        background-size: 70%;
      }

      .about-badge-tag {
        bottom: 12px;
        left: 12px;
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem !important;
      }

      .skill-badge {
        font-size: 0.88rem !important;
        padding: 0.38rem 0.8rem;
      }

      .skills-badge-container {
        gap: 0.45rem;
      }

      .vision-card-left {
        padding: 1.15rem 1rem;
      }

      .goals-list-item {
        padding: 1.15rem 1rem;
        gap: 0.85rem;
      }

      .goal-badge-num {
        width: 36px;
        height: 36px;
        font-size: 0.85rem !important;
      }

      .quick-link-card {
        padding: 1rem 1.1rem;
        gap: 0.85rem;
      }

      .quick-link-icon {
        width: 42px;
        height: 42px;
        font-size: 1.15rem;
      }

      .portfolio-cta-card {
        padding: 1.1rem 0.6rem;
      }

      .portfolio-cta-icon {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
      }

      .portfolio-cta-arrow {
        font-size: 0.85rem !important;
        margin-top: 0.45rem;
      }

      .connect-cta-banner {
        padding: 1.35rem 1rem;
      }

      .connect-cta-banner h2 {
        font-size: 1.45rem !important;
      }
    }

    /* Extra Small Phones (max-width: 380px) */
    @media (max-width: 380px) {
      .navbar-brand-custom {
        font-size: 1.25rem;
      }

      .about-badge-tag {
        font-size: 0.8rem !important;
        padding: 0.35rem 0.65rem;
      }

      .portfolio-cta-card .sub-heading {
        font-size: 0.9rem !important;
      }
    }

    /* Touch target hit-box for dots & buttons */
    .renaissance-dot {
      position: relative;
    }

    .renaissance-dot::after {
      content: '';
      position: absolute;
      top: -10px;
      bottom: -10px;
      left: -8px;
      right: -8px;
    }

    .renaissance-ctrl-btn-mobile {
      width: 38px;
      height: 38px;
      font-size: 0.95rem;
      flex-shrink: 0;
    }

    /* ==========================================================================
   SUBPAGE & INNER HERO BANNER SYSTEM
   ========================================================================== */
    .page-hero-banner {
      background-color: var(--primary-color);
      color: #FFFFFF;
      padding: 4.5rem 0 3.5rem 0;
      position: relative;
      overflow: hidden;
    }

    @media (max-width: 768px) {
      .page-hero-banner {
        padding: 3rem 0 2.5rem 0;
      }
    }

    .breadcrumb-custom {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.9rem;
      color: #CBD5E1;
      margin-bottom: 1rem;
    }

    .breadcrumb-custom a {
      color: var(--sky-blue);
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .breadcrumb-custom a:hover {
      color: #FFFFFF;
    }

    .page-hero-title {
      color: #FFFFFF !important;
      font-size: 2.75rem !important;
      font-weight: 700 !important;
      line-height: 1.25 !important;
      margin-bottom: 1rem !important;
    }

    @media (max-width: 768px) {
      .page-hero-title {
        font-size: 2rem !important;
      }
    }

    .page-hero-lead {
      font-size: 1.05rem !important;
      color: #E2E8F0 !important;
      max-width: 900px;
      line-height: 1.8 !important;
    }

    .academic-metric-card {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 12px;
      padding: 1.25rem 1.35rem;
      color: #FFFFFF;
      height: 100%;
      transition: transform 0.3s ease, background 0.3s ease;
    }

    .academic-metric-card:hover {
      transform: translateY(-4px);
      background: rgba(255, 255, 255, 0.14);
    }

    .academic-year-card {
      background: transparent;
      border: none;
      border-radius: 0;
      padding: 0;
      box-shadow: none;
      margin-bottom: 1.5rem;
      transition: none;
    }

    .academic-year-card:hover {
      box-shadow: none;
      transform: none;
    }

    .year-header-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.35rem 1rem;
      border-radius: 30px;
      font-weight: 700;
      font-size: 0.9rem;
      letter-spacing: 0.5px;
      background-color: var(--primary-color);
      color: #FFFFFF !important;
      margin-bottom: 0.75rem;
    }

    .achievement-item {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      padding: 0.45rem 0;
      border-bottom: 1px solid rgba(15, 27, 45, 0.05);
    }

    .achievement-item:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .achievement-num {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background-color: var(--accent-light);
      color: var(--primary-color);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.8rem;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .cert-card {
      background-color: #FFFFFF;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 6px 20px rgba(15, 27, 45, 0.06);
      border: 1px solid var(--border-color);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      height: 100%;
    }

    .cert-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 36px rgba(15, 27, 45, 0.12);
    }

    .cert-card-img {
      width: 100%;
      height: 320px;
      object-fit: contain;
      display: block;
      background-color: #F8FAFC;
      cursor: pointer;
      transition: transform 0.35s ease;
    }

    .cert-card:hover .cert-card-img {
      transform: scale(1.02);
    }

    .cert-card-body {
      padding: 1.25rem;
    }

    /* 5-Photo Modern Gallery Grid */
    .academic-gallery-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 1.25rem;
    }

    @media (max-width: 992px) {
      .academic-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 576px) {
      .academic-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.85rem;
      }
    }

    /* Image & Book Frame Cards (Uniform, Cohesive Gallery Design) */
    .gallery-frame-card,
    .book-frame-card {
      background: #FFFFFF;
      border: 1px solid #E2E8F0;
      border-radius: 16px;
      padding: 12px;
      box-shadow: 0 4px 16px rgba(15, 27, 45, 0.05);
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .gallery-frame-card {
      height: auto;
    }

    .book-frame-card {
      height: 250px;
      width: 100%;
      background: #FAFCFF;
      border: 1.5px solid rgba(5, 66, 116, 0.12);
    }

    .gallery-frame-card:hover,
    .book-frame-card:hover {
      transform: translateY(-6px);
      border-color: rgba(5, 66, 116, 0.35);
      box-shadow: 0 14px 30px rgba(5, 66, 116, 0.12);
    }

    .gallery-frame-img,
    .book-frame-img {
      border-radius: 8px;
    }

    .gallery-frame-img {
      width: 100%;
      aspect-ratio: 3 / 4;
      object-fit: cover;
      object-position: top center;
      display: block;
    }

    .book-frame-img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
      display: block;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(15, 27, 45, 0.08);
      transition: transform 0.35s ease;
    }

    .book-frame-card:hover .book-frame-img {
      transform: scale(1.03);
    }

    /* Clean Center Floating Zoom-In Icon (No Color Overlay on Image) */
    .card-zoom-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.6);
      width: 44px;
      height: 44px;
      background: rgba(15, 27, 45, 0.75);
      color: #FFFFFF;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      opacity: 0;
      transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      pointer-events: none;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    }

    .gallery-frame-card:hover .card-zoom-icon,
    .book-frame-card:hover .card-zoom-icon {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    .gallery-zoom-overlay {
      display: none !important;
    }

    /* Book Summary Pill Badges & Clean Boxes */
    .book-pill-badge {
      background-color: #054274 !important;
      color: #FFFFFF !important;
      font-weight: 700;
      padding: 7px 22px;
      border-radius: 8px;
      display: inline-block;
      font-size: 1.15rem;
      letter-spacing: 0.3px;
    }

    .book-summary-box {
      background: #FFFFFF;
      border: 1px solid var(--border-color);
      border-radius: 18px;
      padding: 2.2rem 2rem;
      box-shadow: 0 4px 16px rgba(15, 27, 45, 0.05);
      height: 100%;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      position: relative;
    }

    .book-summary-box:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 24px rgba(15, 27, 45, 0.09);
    }

    /* Screen-Fitted Lightbox Modal (Zero Scrolling, Fits 100% on Screen) */
    .image-lightbox-modal .modal-dialog {
      max-width: fit-content;
      max-width: -moz-fit-content;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 1rem;
    }

    .image-lightbox-modal .modal-content {
      background-color: rgba(15, 27, 45, 0.96);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 14px;
      padding: 10px;
      box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6);
      width: auto;
      max-width: 90vw;
      margin: auto;
    }

    .image-lightbox-modal .modal-header {
      border: none;
      padding: 0 0 6px 0;
      min-height: auto;
    }

    .image-lightbox-modal .modal-body {
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .image-lightbox-img {
      max-height: 72vh;
      max-width: 85vw;
      width: auto;
      height: auto;
      object-fit: contain;
      border-radius: 8px;
      display: block;
    }

    /* ==========================================================================
       TECH PROJECTS & TRAININGS CUSTOM STYLES
       ========================================================================== */
    .tech-gallery-card {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      background: #FAFCFF;
      border: 1.5px solid rgba(5, 66, 116, 0.12);
      height: 240px;
      cursor: pointer;
      transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .tech-gallery-card:hover {
      transform: translateY(-5px);
      border-color: rgba(5, 66, 116, 0.35);
      box-shadow: 0 14px 28px rgba(5, 66, 116, 0.12);
    }

    .tech-gallery-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.4s ease;
    }

    .tech-gallery-card:hover .tech-gallery-img {
      transform: scale(1.05);
    }

    .tech-gallery-card:hover .card-zoom-icon {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    /* Accolade Card Hover */
    .accolade-card {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      cursor: default;
    }
    .accolade-card .body-text {
      line-height: 1.75;
    }
    .accolade-card:hover {
      transform: translateY(-5px) !important;
      box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
    }

    /* Philosophy Quote Box */
    .tech-philosophy-quote {
      background: #EBF4FB;
      border-left: 4px solid var(--primary-color);
      border-radius: 0 14px 14px 0;
      padding: 1.6rem 2rem;
      margin: 2rem 0;
      position: relative;
    }

    .tech-philosophy-quote p {
      color: var(--primary-color);
      font-weight: 600;
      font-size: 1.05rem !important;
      line-height: 1.7;
      margin-bottom: 0;
    }

    /* Tech Project Card */
    .tech-project-card {
      background: #FFFFFF;
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 2rem;
      box-shadow: 0 4px 18px rgba(15, 27, 45, 0.04);
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
      position: relative;
    }

    .tech-project-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 14px 30px rgba(5, 66, 116, 0.1);
      border-color: rgba(5, 66, 116, 0.3);
    }

    .tech-project-number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--primary-color);
      color: #FFFFFF;
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 1.15rem;
      padding: 6px 16px;
      border-radius: 8px;
      width: fit-content;
      height: auto;
    }

    .tech-project-icon-box {
      width: 42px;
      height: 42px;
      background: var(--accent-light);
      color: var(--primary-color);
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
    }

    .tech-project-title {
      font-size: 1.25rem !important;
      font-weight: 700 !important;
      color: var(--primary-color);
      margin-bottom: 0.5rem;
    }

    .tech-meta-label {
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: var(--accent-color);
      margin-bottom: 0.35rem;
      display: flex;
      align-items: center;
      gap: 0.35rem;
    }

    .tech-badge {
      display: inline-block;
      background: var(--accent-light);
      color: var(--primary-color);
      font-size: 0.85rem;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 6px;
      margin-right: 6px;
      margin-bottom: 6px;
      border: 1px solid rgba(5, 66, 116, 0.08);
    }

    .tech-spec-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.6rem;
      background: #F8FAFD;
      border: 1px solid #E6EFF8;
      border-radius: 10px;
      padding: 0.9rem;
    }

    .tech-spec-item {
      font-size: 0.85rem;
    }

    .tech-spec-key {
      font-weight: 600;
      color: var(--primary-color);
      display: block;
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }

    .tech-spec-val {
      color: var(--text-dark);
      font-weight: 500;
    }

    /* Trainings Cards */
    .training-card-item {
      background: #FFFFFF;
      border: 1px solid var(--border-color);
      border-radius: 14px;
      padding: 1.4rem 1.6rem;
      box-shadow: 0 3px 12px rgba(15, 27, 45, 0.03);
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .training-card-item:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 22px rgba(5, 66, 116, 0.08);
      border-color: rgba(5, 66, 116, 0.25);
    }

    .iit-pill {
      background: var(--primary-color);
      color: #FFFFFF;
      font-weight: 700;
      font-size: 0.82rem;
      padding: 4px 12px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      letter-spacing: 0.3px;
    }

    .date-pill {
      background: var(--accent-light);
      color: var(--accent-color);
      font-weight: 600;
      font-size: 0.82rem;
      padding: 4px 10px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
    }

    .duration-pill {
      background: #F1F5F9;
      color: #475569;
      font-weight: 500;
      font-size: 0.8rem;
      padding: 3px 8px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
    }

    /* Page background enforcement */
    #tech-projects-page,
    #tech-projects-page main {
      background-color: #F4F8FC !important;
    }

    .read-more-toggle-btn {
      transition: all 0.25s ease;
      cursor: pointer;
    }

    .read-more-toggle-btn:hover {
      background-color: var(--primary-color) !important;
      color: #FFFFFF !important;
    }

    @media (min-width: 992px) {
      .intern-card-title {
        min-height: 3.2rem;
      }
    }