/* ================== General Body & Typography ================== */
body {
    font-size: 1rem;
    line-height: 1.7;
}

h2,
h3 {
    margin-top: 1.4em;
}

.navbar-brand {
    font-weight: 600;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ================== Profile Picture ================== */
.profile-pic {
    display: block;
    margin: 0 auto 1.5rem auto;
    width: 280px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* ================== Navbar ================== */
.navbar,
.navbar-dark,
.navbar-light {
    background-color: #1e90ff !important;
    /* DodgerBlue */
}

.navbar a {
    color: white !important;
    font-weight: 700;
}

.navbar a:hover {
    color: #ffd700 !important;
}

.navbar-brand {
    color: white !important;
    font-weight: 700;
}

.navbar .theme-toggle,
.navbar .search {
    color: white !important;
    font-size: 1.1em;
}

body[data-theme="dark"] .navbar {
    background-color: #0d3b66 !important;
}

/* ================== Count Box ================== */
.count-box {
    display: inline-block;
    background-color: #1e90ff;
    color: white;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    margin: 0.5rem 0;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ================== Cards / General ================== */
.card {
    padding: 1.8rem;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    background-color: #fdfdfd;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-5px);
    border-color: #0055b7;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card h3 {
    margin-top: 0;
    color: #0055b7;
    font-weight: 700;
}

/* ================== Experience Section ================== */
.experience-card {
    padding: 1.8rem;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    background-color: #fdfdfd;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    /* Space between cards on mobile */
}

.experience-card:hover {
    transform: translateY(-5px);
    border-color: #1e90ff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.experience-card h3 {
    margin-top: 0;
    color: #1e90ff;
    /* Matches your navbar */
    font-weight: 700;
}

/* ================== Dark Mode for Experience ================== */

/* 1. If you want the cards to turn DARK with LIGHT text (Standard Dark Mode) */
body[data-theme="dark"] .experience-card {
    background-color: #252525 !important;
    /* Dark background */
    border-color: #444 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

/* Ensure all text inside the dark card is light gray/white */
body[data-theme="dark"] .experience-card p,
body[data-theme="dark"] .experience-card li,
body[data-theme="dark"] .experience-card strong,
body[data-theme="dark"] .experience-card em,
body[data-theme="dark"] .experience-card span {
    color: #e0e0e0 !important;
}

/* 2. OR: If you want the cards to stay WHITE with BLACK text even in dark mode */
/* body[data-theme="dark"] .experience-card {
    background-color: #ffffff !important; 
    border-color: #e9ecef !important;
}

body[data-theme="dark"] .experience-card p,
body[data-theme="dark"] .experience-card li,
body[data-theme="dark"] .experience-card strong,
body[data-theme="dark"] .experience-card em {
    color: #212529 !important; 
}
*/

/* Styles for specific elements inside the card */
body[data-theme="dark"] .experience-card h3 {
    color: #63b3ed !important;
    /* Lighter blue for the heading */
}

body[data-theme="dark"] .experience-card code {
    background-color: #3d3d3d !important;
    color: #ff79c6 !important;
    border: 1px solid #555;
}