#hero .subtitle {
    font-size: clamp(18px, 5vw, 24px);
    opacity: 0.8;
    font-weight: 500;
}

/* Remove hover effect from about image */
#about .image,
#about .image *,
#about .image img,
#about .image a,
#about .image div {
    cursor: default !important;
    pointer-events: none !important;
}

#about .image img:hover {
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    cursor: default !important;
}

#about .image img {
    transition: none !important;
    cursor: default !important;
}

/* Set consistent max-width of 940px for all sections */
.container {
    max-width: 940px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Ensure all sections have the same width */
#hero .container,
#about .container,
#experience .container,
#education .container,
#achievements .container,
#contact .container {
    max-width: 940px !important;
    width: 100% !important;
}

/* Override column width constraints in about and experience sections */
#experience .row.justify-content-center {
    width: 100% !important;
    max-width: 100% !important;
}

#experience .col-sm-12.col-md-8.col-lg-8 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* Make experience container full width within its parent */
#experience .experience-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* Override column width constraints in about and career highlights sections */
#about .row.justify-content-center {
    width: 100% !important;
    max-width: 100% !important;
}

#about .col-sm-12.col-md-9 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* Override column width constraints in career highlights section */
#career-highlights .row.justify-content-center {
    width: 100% !important;
    max-width: 100% !important;
}

#career-highlights .col-md-9 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* Style career highlights card to match education */
#career-highlights .card {
    background-color: var(--secondary-color) !important;  /* Match the education section */
    border-radius: 1rem !important;
    border: none !important;
    color: var(--text-color) !important;  /* Match the education section */
}

#career-highlights .card .card-body {
    border-radius: 1rem !important;
    padding: 2rem;
    background-color: var(--secondary-color) !important;  /* Match the education section */
    color: var(--text-color) !important;  /* Match the education section */
}

/* Ensure tabs in experience section span full width */
#experience .nav-pills {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Ensure tab content in experience section spans full width */
#experience .tab-content {
    width: 100% !important;
}

/* Remove all box-shadow (outer glow) effects from components */

/* Hero section */
#hero .image img {
    box-shadow: none !important;
}

#hero .image.animate img:hover {
    box-shadow: none !important;
}

/* Experience section */
#experience .experience-container {
    box-shadow: none !important;
}

/* Education section */
#education .card {
    box-shadow: none !important;
}

#education .card:hover {
    box-shadow: none !important;
}

/* Achievements section */
#achievements .card {
    box-shadow: none !important;
}

/* Contact section */
#contact form .form-control {
    box-shadow: none !important;
}

#contact-form-status button {
    box-shadow: none !important;
}

#contact-form-status .alert {
    box-shadow: none !important;
}

/* Projects section */
#projects .card {
    box-shadow: none !important;
}

#projects .card:hover {
    box-shadow: none !important;
}

/* Single/About section */
#single .featured-image img {
    box-shadow: none !important;
}

#single #topScroll:hover {
    box-shadow: none !important;
}

/* Header section */
.showHeaderOnTop {
    box-shadow: none !important;
}

#search:focus {
    box-shadow: none !important;
}

#search-content {
    box-shadow: none !important;
}

/* Footer section */
footer .card:hover {
    box-shadow: none !important;
}

/* List page section - remove shadow */
#list-page .card {
    box-shadow: none !important; /* Ensure no shadow */
}

/* Add thin very dark gray border to profile image */
#hero .image img {
    border: 3px solid #333333 !important;
}

/* Set text selection highlight color */
::selection {
  background-color: #6c757d; /* Dark Gray */
  color: #ffffff; /* White text */
}

/* Remove underline from social icons in contact section */
#contact .text-center a {
  text-decoration: none !important;
}

::-moz-selection { /* Firefox */
  background-color: #6c757d; /* Dark Gray */
  color: #ffffff; /* White text */
}

/* Add black circle background to the favicon in the navbar, social links, and footer */
.navbar-brand img,
.social-icon img[src="/fav.png"],
footer img[src="/fav.png"] {
  background-color: #000000;
  border-radius: 50%;
  padding: 2px;
}

/* Add horizontal padding to recent post (within footer) and list page footers */
footer #recent-posts .post-footer, /* More specific selector for footer context */
#list-page .post-footer {
  padding-left: 1rem !important; /* Reduced padding */
  padding-right: 1rem !important; /* Reduced padding */
}

/* Remove hover transform/transition effect from list page and recent posts cards */
#list-page .card:hover,
#recent-posts .card:hover {
  transform: none !important;
  transition: none !important;
  box-shadow: none !important; /* Ensure no shadow on hover either */
}

/* Ensure recent posts cards also have no shadow in base state */
#recent-posts .card {
  box-shadow: none !important;
}

/* Customization for 'Read' button removed to match 'View' button */

/* Sticky Footer CSS (Original or modified as needed) */
/* Reverted Grid layout - will apply Flexbox later if needed */
html {
  height: 100% !important;
}
body {
  /* display: grid; */ /* Reverted */
  /* grid-template-areas:
    "header"
    "content"
    "footer"; */ /* Reverted */
  /* grid-template-rows: auto 1fr auto; */ /* Reverted */
  min-height: 100vh !important; /* Keep this to ensure body tries to fill height */
  margin: 0; /* Keep this */
  /* Add Flexbox for alternative sticky footer if needed */
   display: flex;
   flex-direction: column;
}

/* Assign direct children to grid areas - Reverted */
/* body > header {
  grid-area: header;
} */

/* Increase height of blog list cards */
#list-page .card {
    min-height: 450px !important; /* Increase minimum height */
}
body > #content {
  /* grid-area: content; */ /* Reverted */
  /* flex-grow: 1; */ /* Reverted - will add back for Flexbox */
   flex: 1 0 auto; /* Make content grow in Flexbox */
}
body > footer {
  /* grid-area: footer; */ /* Reverted */
  /* background-color: var(--background-color); */ /* Reverted */
   flex-shrink: 0; /* Prevent footer from shrinking in Flexbox */
}

/* Ensure copyright section background also matches - Reverted */
/* footer .container.py-4 {
    background-color: var(--background-color);
} */

/* Style tag badge hover state */
.tags-list a.badge {
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.tags-list a.badge:hover {
  background-color: var(--secondary-color) !important; /* Use secondary color for background */
  color: var(--text-color); /* Use main text color for text */
}

/* Style bullet points and numbered lists in blog posts */
#single .page-content ul,
#single .page-content ol {
  padding-left: 2.5em; /* Increase overall list padding */
  list-style-position: outside; /* Position bullets/numbers outside */
}

#single .page-content ul li,
#single .page-content ol li {
  margin-bottom: 1.5em; /* Increased space between list items */
  /* position: relative; */ /* Removed */
  padding-left: 0; /* Rely on parent list padding */
}

/* Hanging indent effect removed, handled by list-style-position and padding */
/* #single .page-content ul li {
  text-indent: -1.2em;
} */

/* Hanging indent effect removed, handled by list-style-position and padding */
/* #single .page-content ol li {
  text-indent: -1.5em;
} */

/* Style certifications card to match other sections */
#certifications .card {
    background-color: var(--secondary-color) !important; /* Match other sections */
    border-radius: 1rem !important;
    border: none !important;
    color: var(--text-color) !important; /* Match other sections */
    box-shadow: none !important; /* Remove shadow for consistency */
}

#certifications .card .card-body {
    border-radius: 1rem !important; /* Match parent card */
    padding: 1.5rem; /* Consistent padding */
    background-color: var(--secondary-color) !important; /* Match other sections */
    color: var(--text-color) !important; /* Match parent card */
}

/* Ensure no hover effects that add shadows or transforms */
#certifications .card:hover {
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}

/* Remove underline from links in certifications section */
#certifications a {
  text-decoration: none !important;
}

/* Style 'Read' button text and border to match teal and dark on hover */
#list-page .post-footer .btn-outline-info,
#recent-posts .post-footer .btn-outline-info {
  color: #0dcaf0 !important; /* Bootstrap info teal */
  border-color: #0dcaf0 !important; /* Ensure border is also teal */
}

#list-page .post-footer .btn-outline-info:hover,
#recent-posts .post-footer .btn-outline-info:hover {
  color: #212529 !important; /* Dark text on hover */
  background-color: #0dcaf0 !important; /* Teal background on hover */
  border-color: #0dcaf0 !important; /* Ensure border stays teal on hover */
}

/* Ensure consistent card footer separator (light/visible for dark theme) */
#list-page .post-footer,
#recent-posts .post-footer,
#certifications .card-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important; /* Visible light border - Force override */
}