.btn-outline-secondary{
    border: none;
    border-radius: 50% !important;
}
.btn-outline-secondary:hover {
background-color: #ffffff !important;
color: #000000 !important;
border-color: #ffffff !important;
transform: translateY(-3px) !important
}
.dark-mode {
background-color: #1e1e1e !important;
color: #ffffff !important;
}
.dark-mode .floating-card {
background-color: #1e1e1e !important;
color: #ffffff !important;
}

/* All headings, paragraphs, spans, etc. */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6,
.dark-mode p,
.dark-mode span,
.dark-mode strong,
.dark-mode label,
.dark-mode li,
.dark-mode i,
.dark-mode svg {
color: #ffffff !important;
}

/* ======== Replace red with blue ======== */
.dark-mode .text-danger,
.dark-mode .text-red,
.dark-mode .highlight,
.dark-mode .accent,
.dark-mode .digital-artist,
.dark-mode .text-accent {
color: #ffffff !important;
}

/* ======== header: Dark Mode ======== */
.dark-mode #header{
background-color: #1e1e1e !important;   /* deep dark gray background */
}
.dark-mode .social-links a{
background-color: #1e1e1e !important;   /* deep dark gray background */
}
.dark-mode .social-links a:hover{
background-color: #1e1e1e !important;   /* deep dark gray background */
color: white !important;
transform: translateY(-3px);
box-shadow: 0 8px 25px color-mix(in srgb, white, transparent 100%);
}

/* ======== Navbar: Dark Mode ======== */
.dark-mode #navmenu a,
.dark-mode #navmenu .nav-link {
color: #ffffff !important;              /* white links */
transition: color 0.2s ease;
}
.dark-mode #navmenu a:hover,
.dark-mode #navmenu .nav-link:hover,
.dark-mode #navmenu a.active {
color: #c11313 !important;              /* bright blue accent */
}
.dark-mode #navmenu i {
color: #ffffff !important;              /* icon white */
}
.dark-mode #navmenu i:hover {
color: #c11313 !important;
}

/* Toggle button color adjustment */
.dark-mode #theme-toggle {
color: #ffffff !important;
}
.dark-mode #theme-toggle:hover {
background-color: #1e1e1e !important;
color: #ffffff !important;
}
/* ======== Buttons ======== */
.dark-mode .btn {
color: #ffffff !important;
border-color: #ffffff !important;
background-color: #1f1f1f !important;
transition: background-color 0.25s ease, border-color 0.25s ease;
}

.dark-mode .btn:hover {
background-color: #1e1e1e !important;
border-color: #777 !important;
}

/* Blue primary buttons */
.dark-mode .btn-primary {
background-color: #c11313 !important;
border-color: #c11313 !important;
color: #fff !important;
}
.dark-mode .btn-primary:hover {
background-color: #c11313 !important;
border-color: #c11313 !important;
color: white !important;
}

/* Outline buttons */
.dark-mode .btn-outline-secondary {
color: #ffffff !important;
/* border-color: #ffffff !important; */
}
.dark-mode .btn-outline-secondary:hover {
background-color: #c11313 !important;
color: #ffffff !important;
border-color: #ffffff !important;
}

/* ======== Cards, Sections, Resume, Portfolio ======== */
.dark-mode .card,
.dark-mode .section,
.dark-mode .resume-item,
.dark-mode .portfolio-card,
.dark-mode .contact-form,
.dark-mode .footer {
background-color: #1e1e1e !important;
color: #ffffff !important;
border-color: #333 !important;
}

/* ======== Icons ======== */
.dark-mode i,
.dark-mode .fa,
.dark-mode .bi {
color: #ffffff !important;
transition: color 0.2s ease;
}
.dark-mode i:hover,
.dark-mode .fa:hover,
.dark-mode .bi:hover {
color: #c11313 !important;
}

/* ======== Links ======== */
.dark-mode a {
color: #ffffff !important;
text-decoration: none;
transition: color 0.2s ease-in-out;
}
.dark-mode a:hover,
.dark-mode a:focus {
color: #ffffff !important;
}
.dark-mode .footer-des:hover {
color: #c11313 !important;
}

/* ======== Inputs ======== */
.dark-mode input,
.dark-mode textarea,
.dark-mode select {
background-color: #1f1f1f !important;
color: #ffffff !important;
border-color: #ffffff !important;
}

.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
border-color: #c11313 !important;
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* ======== Muted & Secondary Text ======== */
.dark-mode .text-muted {
color: #bbbbbb !important;
}

/* ======== Dark Mode Form Styling ======== */
.dark-mode input,
.dark-mode textarea,
.dark-mode select {
background-color: #1e1e1e !important;   /* dark background */
color: #ffffff !important;              /* white text */
border: 1px solid #333 !important;      /* subtle border */
}
.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
background-color: #1f1f1f !important;
border-color: #c11313 !important;       /* blue focus border */
color: #ffffff !important;
box-shadow: 0 0 5px #c11313;
}

/* Placeholder text color */
.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
color: #bbbbbb !important;              /* light gray placeholders */
opacity: 1;                             /* ensure visible in all browsers */
}

/* Optional: make the text inside autofilled inputs readable */
.dark-mode input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 30px #1e1e1e inset !important;
-webkit-text-fill-color: #ffffff !important;
}

/* Label text (if any) */
.dark-mode label {
color: #ffffff !important;
}

@media (max-width: 1199px) {
    .dark-mode .nav-menu{
    color: white !important;
    background-color: #1f1f1f !important;
    }
}