/* ================================================================
   Monitomax Dark Theme  –  loaded last, overrides everything
   Palette:
     bg        #0a0a0f   card  #141419   card-2  #1c1c24
     border    #252535   input #1e1e28
     accent    #4385dc   light #6096db   glow rgba(67,133,220,.12)
     text-1    #ffffff   text-2 #b0b0c3  text-3  #6b6b80
   ================================================================ */

/* ── 1. CSS variables ─────────────────────────────────────────── */
:root {
    --mm-bg:           #181822;
    --mm-card:         #141419;
    --mm-card-2:       #1c1c24;
    --mm-border:       #252535;
    --mm-input:        #1e1e28;
    --mm-accent:       #4385dc;
    --mm-accent-light: #6096db;
    --mm-glow:         rgba(67, 133, 220, 0.10);

    /* Override framework palette variables */
    --dark-gray:                   #ffffff;
    --medium-gray:                 #b0b0c3;
    --light-gray:                  #6b6b80;
    --very-light-gray:             #141419;
    --light-medium-gray:           #252535;
    --extra-medium-gray:           #252535;
    --extra-medium-blue-t:         rgba(67, 133, 220, 0.06);
    --solitude-blue:               #1c1c24;
    --spring-wood:                 #141419;
    --white:                       #141419;
    --charcoal-blue:               #0a0a0f;
    --slate-blue:                  #141419;
    --extra-dark-slate-blue:       #0a0a0f;
    --extra-very-slate-blue:       #0a0a0f;
    --dark-slate-blue:             #141419;
    --medium-slate-blue:           #252535;
    --base-color:                  #4385dc;
}

/* ── 2. Base ──────────────────────────────────────────────────── */
html, body {
    background-color: #0a0a0f !important;
    color: #b0b0c3 !important;
}

section {
    background-color: #0a0a0f;
}

/* Hero gradient – must not be overridden by the rule above */
section.mm-hero {
    background: linear-gradient(135deg,#07071a 0%,#0c0c20 30%,#0a0f1e 60%,#060c18 100%) !important;
}

p { color: #b0b0c3; }

a { color: #b0b0c3; }
a:hover { color: #6096db; }

/* ── 3. Text utilities ────────────────────────────────────────── */
.text-dark-gray,
.text-dark-gray-2,
h1, h2, h3, h4, h5, h6 { color: #ffffff !important; }

.text-medium-gray,
.text-gray-600,
.text-gray-500,
.text-light-gray,
.text-light-gray-2,
.opacity-7,
.opacity-8 { color: #b0b0c3 !important; opacity: 1 !important; }

.text-white { color: #ffffff !important; }

.text-outline-color-extra-medium-gray { -webkit-text-stroke-color: #4385dc !important; }

/* ── 4. Backgrounds ───────────────────────────────────────────── */
.bg-white { background-color: #141419 !important; }
.bg-gray-100,
.bg-light,
.bg-very-light-gray { background-color: #141419 !important; }
.bg-light-gray { background-color: #141419 !important; }
.bg-extra-medium-gray { background-color: #1c1c24 !important; }
.bg-solitude-blue { background-color: #1c1c24 !important; }
.bg-spring-wood { background-color: #141419 !important; }

/* Hero left half – sliding lines bg */
.bg-sliding-line { background-color: #0d0d14 !important; }
/* The separator line in the hero */
.separator-line.bg-dark-gray { background-color: #252535 !important; }
/* Vertical label */
.title.text-dark-gray { color: #b0b0c3 !important; }

/* Quartz gradient (FAQ accordion wrapper) */
.bg-gradient-quartz-white {
    background: linear-gradient(135deg, #1c1c24 0%, #141419 100%) !important;
}

/* Light turquoise-blue CTA section */
.bg-light-turquoise-blue {
    background-color: rgba(67, 133, 220, 0.06) !important;
    border-top: 1px solid #252535 !important;
    border-bottom: 1px solid #252535 !important;
}

/* ── 5. Navigation ────────────────────────────────────────────── */
.navbar,
.navbar.bg-white,
.navbar.header-light,
header nav {
    background: linear-gradient(180deg, rgba(7,7,26,0.90) 0%, rgba(10,10,28,0.78) 100%) !important;
    border-bottom: 1px solid rgba(67,133,220,0.10) !important;
    backdrop-filter: blur(18px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
    box-shadow: 0 1px 32px rgba(7,7,26,0.55) !important;
}

.navbar .nav-link {
    color: #b0b0c3 !important;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: #6096db !important;
}

/* Hamburger lines */
.navbar-toggler-line {
    background-color: #b0b0c3 !important;
}

/* Mobile nav drawer */
.navbar-collapse {
    border-top: 1px solid #252535;
}

/* ── Modern slide-in mobile menu ─────────────────────────────── */
/* var(--white) is overridden to #141419 globally for dark mode;
   the framework uses it for mobile nav text — must be reset here. */
.navbar-modern-inner,
.navbar-collapse-clone {
    background-color: #0d0d14 !important;
}
[data-mobile-nav-style=modern] .navbar-modern-inner .navbar-nav .nav-item .nav-link,
[data-mobile-nav-style=modern] .navbar-modern-inner .navbar-nav .nav-item .dropdown-toggle {
    color: #e0e0f0 !important;
}
[data-mobile-nav-style=modern] .navbar-modern-inner .navbar-nav .nav-item.active .nav-link,
[data-mobile-nav-style=modern] .navbar-modern-inner .navbar-nav .nav-item:hover .nav-link {
    color: #4385dc !important;
}
[data-mobile-nav-style=modern] .navbar-modern-inner .navbar-nav > .nav-item {
    border-bottom-color: rgba(255,255,255,0.08) !important;
}
[data-mobile-nav-style=modern] .navbar-modern-inner .navbar-toggler-line {
    background-color: #e0e0f0 !important;
}
[data-mobile-nav-style=modern] .navbar-modern-inner .navbar-nav .nav-item .dropdown-menu a {
    color: #b0b0c3 !important;
}
[data-mobile-nav-style=modern] .navbar-modern-inner .navbar-nav .nav-item .dropdown-menu a:hover {
    color: #4385dc !important;
}

/* Language switcher */
.lang-switcher .btn-dark {
    background-color: #4385dc !important;
    border-color: #4385dc !important;
    color: #fff !important;
}
.lang-switcher .btn-outline-secondary {
    border-color: #252535 !important;
    color: #b0b0c3 !important;
}
.lang-switcher .btn-outline-secondary:hover {
    background-color: #1c1c24 !important;
    color: #fff !important;
}

/* ── 6. Cards & boxes ─────────────────────────────────────────── */
.box-shadow-quadruple-large,
.shadow-2xl,
.box-shadow-large,
.box-shadow-double-large {
    box-shadow: 0 8px 32px rgba(0,0,0,.55) !important;
}

/* Figcaption white box (About page number badge) */
figcaption.bg-white {
    background-color: #141419 !important;
    border: 1px solid #252535 !important;
}

/* Stack items (home feature sections) */
.stack-item { background-color: #0a0a0f !important; }
.stack-item.bg-white { background-color: #0d0d18 !important; }

/* Distinction visuelle par item */
.stack-item-01.bg-white { background-color: #0d0d18 !important; }
.stack-item-02.bg-white { background-color: #0e0f1c !important; }
.stack-item-03.bg-white { background-color: #0f1020 !important; }

/* Grand numéro décoratif — visible en bleu translucide */
.stack-item .fw-800.text-dark-gray-2,
.stack-item .alt-font.fw-800.text-dark-gray-2 {
    color: rgba(67, 133, 220, 0.25) !important;
    opacity: 1 !important;
    -webkit-text-stroke: 1px rgba(67, 133, 220, 0.15);
    text-shadow: none !important;
}

/* Barre titre verticale */
.stack-item .vertical-title-center .title.bg-white {
    background: rgba(10, 10, 20, 0.90) !important;
    color: #6096db !important;
    border-left: 2px solid rgba(67, 133, 220, 0.30) !important;
}

/* Process step boxes */
.col.process-step-style-10 {
    border-right: 1px solid #252535 !important;
}

/* ── 7. Accordion (FAQ) ───────────────────────────────────────── */
.accordion-item {
    background-color: transparent !important;
    border-color: #252535 !important;
}
.accordion-item .accordion-title,
.accordion-item .accordion-title span {
    color: #ffffff !important;
}
.accordion-item .accordion-body p,
.accordion-item .accordion-body {
    color: #b0b0c3 !important;
}
.border-color-transparent-dark-very-light {
    border-color: #252535 !important;
}
.accordion-item.active-accordion .accordion-title { color: #6096db !important; }

/* ── 8. Forms & inputs ────────────────────────────────────────── */
input, textarea, select {
    background-color: #1e1e28 !important;
    color: #ffffff !important;
    border-color: #252535 !important;
}
input::placeholder, textarea::placeholder { color: #6b6b80 !important; }
input:focus, textarea:focus, select:focus {
    border-color: #4385dc !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(67,133,220,.15) !important;
}

/* ── 9. Buttons ───────────────────────────────────────────────── */
.btn-base-color,
.btn-outline-color-base {
    border-color: #4385dc !important;
    color: #4385dc !important;
}
.btn-base-color:hover { background-color: #4385dc !important; color: #fff !important; }

/* btn-switch-text inner span hover state */
.btn-blue-light .btn-double-text,
.btn-blue-light span { color: #ffffff !important; }

.bg-base-color,
.bg-base-color:hover { background-color: #4385dc !important; }

.btn-outline-secondary {
    border-color: #252535 !important;
    color: #b0b0c3 !important;
}

/* ── 10. Borders ──────────────────────────────────────────────── */
.border-bottom,
.border-top,
.border-start,
.border-end,
.border-1 { border-color: #252535 !important; }

.border-color-transparent-white-light {
    border-color: #252535 !important;
}

/* ── 11. Scrolling marquee text ───────────────────────────────── */
.text-dark-gray-2 { color: #1e1e2c !important; }

/* Marquee spécifique : texte solide visible sur fond sombre */
.marquee-slide .text-dark-gray-2 {
    color: rgba(255, 255, 255, 0.10) !important;
    opacity: 1 !important;
}

/* ── 12. Hero banner – sliding box (white overlay on right) ───── */
.col-12.col-md-6 .position-absolute.bg-white {
    background-color: #141419 !important;
    border: 1px solid #252535 !important;
}

/* Fancy-text and slide text */
.text-slide { color: #ffffff !important; }

/* Yellow accent decorations – keep them visible */
.img_yellow img { filter: brightness(0.85); }

/* ── 13. Highlight separator underline ────────────────────────── */
.highlight-separator::after,
.highlight-separator-small::after {
    opacity: 0.4;
}

/* ── 14. Footer adjustments ───────────────────────────────────── */
footer.bg-dark-gray,
footer.bg-charcoal-blue {
    background-color: #060608 !important;
    border-top: 1px solid rgba(67,133,220,0.15);
}

/* Footer links */
footer a { color: #8888a0; }
footer a:hover { color: #6096db; }
footer .text-white,
footer span.fs-18.fw-400 { color: #ffffff !important; }

/* Footer-top : zone "Contactez-nous" */
.footer-top {
    background: rgba(67,133,220,0.03) !important;
    border-bottom: 1px solid rgba(67,133,220,0.10) !important;
}
.footer-top h3 { color: #ffffff !important; }
.footer-top .fs-20 { color: #b0b0c3 !important; }

/* Bouton 1 — filled "Écrivez-nous" (bg-base-color) */
.footer-top .bg-base-color {
    background: #4385dc !important;
    border: 1px solid #4385dc !important;
    color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(67,133,220,0.35) !important;
}
.footer-top .bg-base-color:hover {
    background: #3474cb !important;
    border-color: #3474cb !important;
    color: #ffffff !important;
}
.footer-top .bg-base-color i,
.footer-top .bg-base-color .btn-double-text { color: #ffffff !important; }

/* Bouton 2 — ghost "Téléphone" (btn-base-color) */
.footer-top .btn-base-color {
    background: rgba(67,133,220,0.08) !important;
    border: 1px solid rgba(67,133,220,0.30) !important;
    color: #6096db !important;
    box-shadow: none !important;
}
.footer-top .btn-base-color:hover {
    background: rgba(67,133,220,0.16) !important;
    border-color: #4385dc !important;
    color: #ffffff !important;
}
.footer-top .btn-base-color i,
.footer-top .btn-base-color .btn-double-text { color: inherit !important; }

/* Icônes sociales */
footer .elements-social ul li a {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid #252535 !important;
    color: #8888a0 !important;
}
footer .elements-social ul li a:hover {
    background: rgba(67,133,220,0.12) !important;
    border-color: rgba(67,133,220,0.35) !important;
    color: #6096db !important;
}

/* Copyright bar */
footer .row.fs-16 p,
footer .row.fs-16 a { color: #555568; }
footer .row.fs-16 a:hover { color: #6096db; }

/* ── 15. Scroll progress ──────────────────────────────────────── */
.scroll-progress .scroll-text { color: #6b6b80 !important; }
.scroll-progress .scroll-line { background-color: #252535 !important; }

/* ── 16. Page-specific: About figcaption numbers ─────────────── */
.position-absolute.bg-white.border-radius-100 {
    background-color: #141419 !important;
    border: 1px solid #252535 !important;
}

/* ── 17. Contact / form sections ─────────────────────────────── */
.bg-red-50 { background-color: #1c1c24 !important; }

/* ── 18. Hero section ─────────────────────────────────────────── */

/* ── Couleur brand unifiée pour tous les boutons bleus ────────── */
.btn-blue-light,
.btn-blue-light:visited,
a.btn-blue-light {
    background-color: #4385dc !important;
    border-color: #4385dc !important;
    color: #ffffff !important;
    box-shadow: 0 4px 18px rgba(67,133,220,0.35) !important;
}
.btn-blue-light:hover,
a.btn-blue-light:hover {
    background-color: #3474cb !important;
    border-color: #3474cb !important;
    box-shadow: 0 6px 24px rgba(67,133,220,0.50) !important;
    color: #ffffff !important;
}

/* ── Bouton déconnexion ────────────────────────────────────────── */
.btn-red-light,
.btn-red-light:visited {
    background-color: transparent !important;
    border-color: rgba(200,70,70,0.35) !important;
    color: #c07070 !important;
    box-shadow: none !important;
}
.btn-red-light:hover {
    background-color: rgba(200,70,70,0.10) !important;
    border-color: rgba(200,70,70,0.55) !important;
    color: #e08080 !important;
    box-shadow: 0 4px 14px rgba(200,70,70,0.18) !important;
}
.btn-red-light span,
.btn-red-light .btn-double-text { color: inherit !important; }

/* CTA primary button (hero) */
.mm-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 36px;
    background: #4385dc;
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .35px;
    border-radius: 10px;
    text-decoration: none !important;
    border: 1px solid rgba(96,150,219,0.40);
    box-shadow:
        0 0 0 1px rgba(67,133,220,0.20),
        0 0 28px rgba(67,133,220,0.35),
        0 6px 20px rgba(67,133,220,0.25),
        inset 0 1px 0 rgba(255,255,255,0.14);
    position: relative;
    overflow: hidden;
    transition: background .2s ease, box-shadow .3s ease, transform .25s ease;
    white-space: nowrap;
}
.mm-cta-btn:hover {
    background: #3474cb;
}
/* Shimmer sweep */
.mm-cta-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -110%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
    transform: skewX(-18deg);
    animation: mm-btn-shine 3.5s ease-in-out infinite 1.2s;
    pointer-events: none;
}
.mm-cta-btn:hover {
    box-shadow:
        0 0 0 1px rgba(67,133,220,0.40),
        0 0 45px rgba(67,133,220,0.60),
        0 8px 32px rgba(67,133,220,0.40),
        inset 0 1px 0 rgba(255,255,255,0.18);
    transform: translateY(-2px);
    color: #ffffff !important;
}
.mm-cta-btn i { transition: transform .2s ease; }
.mm-cta-btn:hover i { transform: translateX(5px); }

@keyframes mm-btn-shine {
    0%        { left: -110%; }
    40%, 100% { left: 160%; }
}

/* Float animation for right mockup block */
@keyframes mm-float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-14px); }
}
@keyframes mm-float-slow {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-9px); }
}

.mm-hero-mockup {
    animation: mm-float 6s ease-in-out infinite;
    display: flex;
    flex-direction: column;
}
.mm-hero-widget-1 { animation: mm-float-slow 5.5s ease-in-out infinite 0.9s; }
.mm-hero-widget-2 { animation: mm-float-slow 7s   ease-in-out infinite 1.8s; }


/* Left text panel */
.mm-hero-left {
    background: linear-gradient(135deg, #0d0d16 0%, #0a0a12 100%);
    /* Subtle dot grid */
    background-image:
        radial-gradient(circle, rgba(67,133,220,0.08) 1px, transparent 1px),
        linear-gradient(135deg, #0d0d16 0%, #0a0a12 100%);
    background-size: 28px 28px, 100% 100%;
    border-right: 1px solid #1e1e2c;
}

/* Vertical rotating label */
.mm-label-vertical { color: #4385dc !important; }

/* Big headline color (already set inline but safety) */
.mm-hero-title { color: #ffffff; }

/* Slide info card (right column bottom overlay) */
.mm-slide-card {
    background: rgba(10, 10, 15, 0.82);
    border: 1px solid rgba(67, 133, 220, 0.2);
    border-left: 3px solid #4385dc;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Override old bg-sliding-line if applied elsewhere */
.bg-sliding-line {
    background-image:
        radial-gradient(circle, rgba(67,133,220,0.06) 1px, transparent 1px),
        linear-gradient(135deg, #0d0d16 0%, #0a0a12 100%) !important;
    background-size: 28px 28px, 100% 100% !important;
    background-color: #0d0d16 !important;
}

/* Swiper pagination dots on dark */
.banner-slider .swiper-pagination-bullet {
    background: rgba(255,255,255,0.3) !important;
}
.banner-slider .swiper-pagination-bullet-active {
    background: #4385dc !important;
}

/* ── 19. Misc overrides ───────────────────────────────────────── */
.cursor-page-inner { display: none; }

/* Selection color */
::selection {
    background-color: rgba(67, 133, 220, 0.35) !important;
    color: #ffffff !important;
}

/* ── 20. Page banner (head.blade.php) ────────────────────────── */
/* Dim the yellow decorative underline image inside headings */
.highlight-separator span img,
.highlight-separator-small span img,
h1 .highlight-separator img,
h2 .highlight-separator img {
    filter: brightness(0.70) saturate(0.50) opacity(0.40) !important;
}

/* ── 21. About page ──────────────────────────────────────────── */
/* Parallax dark overlay */
.opacity-light.bg-dark-gray {
    background-color: rgba(7, 7, 20, 0.75) !important;
    opacity: 1 !important;
}
/* Blur glass strip below parallax heading */
.bg-dark-gray-transparent-medium {
    background: rgba(8, 8, 18, 0.82) !important;
}
.bg-dark-gray-transparent-medium.blur-box {
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
/* Blog feature cards — add separating border on dark */
.blog-side-image .grid-item .blog-box {
    border: 1px solid #252535;
    border-radius: 8px;
}

/* Feature card image zoom on hover */
.blog-box:hover .mm-feature-img {
    transform: scale(1.07);
}

/* FAQ — cartes liens hover */
.mm-faq-item.active-accordion {
    background: rgba(67,133,220,0.04) !important;
}
.col-md-4 > a[style*="0f0f18"]:hover {
    border-color: rgba(67,133,220,0.35) !important;
}

/* ── 22. Contact page ────────────────────────────────────────── */
/* Email / phone hover links */
a.text-dark-gray-hover,
.text-dark-gray-hover {
    color: #6096db !important;
}
a.text-dark-gray-hover:hover {
    color: #4385dc !important;
}
/* Google Maps dark tint */
.gmap_canvas iframe {
    filter: invert(1) hue-rotate(200deg) saturate(0.80) brightness(0.85) !important;
}
#location {
    border-top: 1px solid #252535;
    border-bottom: 1px solid #252535;
}

/* ── 23. Pricing page ────────────────────────────────────────── */
/* Media plans section — light-gray gradient → dark */
.bg-gradient-very-light-gray {
    background: linear-gradient(135deg, #0d0d18 0%, #0a0a12 100%) !important;
    border-top: 1px solid #252535 !important;
}
/* "Populaire" plan accent wrapper */
.bg-blue-light {
    background-color: #1a3d70 !important;
    border: 1px solid rgba(67, 133, 220, 0.28) !important;
    box-shadow: 0 8px 40px rgba(67, 133, 220, 0.18) !important;
}
/* Plan name badge */
.bg-solitude-blue {
    background-color: rgba(67, 133, 220, 0.12) !important;
    color: #6096db !important;
}
/* Pricing feature list dividers */
.border-color-extra-medium-gray,
.border-top.border-color-extra-medium-gray {
    border-color: #252535 !important;
}
/* "Choisissez" dark gray button → subtle dark card style */
.btn-dark-gray {
    background-color: #252535 !important;
    border-color: #252535 !important;
    color: #ffffff !important;
}
.btn-dark-gray:hover {
    background-color: #4385dc !important;
    border-color: #4385dc !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(67, 133, 220, 0.35) !important;
}
/* Dimmed list items in media pricing */
.pricing-body .opacity-6 { opacity: 0.65 !important; color: #b0b0c3 !important; }
/* Alert warning (plan not available) */
.alert-warning {
    background-color: rgba(210, 150, 0, 0.10) !important;
    border-color: rgba(210, 150, 0, 0.28) !important;
    color: #d4a820 !important;
}

/* ── 24. Alerts & form validation (all pages) ────────────────── */
.alert-success {
    background-color: rgba(30, 160, 80, 0.12) !important;
    border-color: rgba(30, 160, 80, 0.30) !important;
    color: #4caf7a !important;
}
.alert-danger {
    background-color: rgba(200, 50, 50, 0.12) !important;
    border-color: rgba(200, 50, 50, 0.30) !important;
    color: #e07070 !important;
}
.invalid-feedback,
.invalid-feedback-file {
    color: #e07070 !important;
    font-size: 13px;
}
input.is-invalid,
textarea.is-invalid {
    border-color: rgba(200, 50, 50, 0.50) !important;
}

/* ── 25. Register form extras ────────────────────────────────── */
input[type="radio"].check-form {
    accent-color: #4385dc;
}
/* Newsletter input inside dark footer */
.newsletter-style-02 input {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.14) !important;
    color: #ffffff !important;
}
.newsletter-style-02 input::placeholder { color: rgba(255,255,255,0.40) !important; }
.newsletter-style-02 .btn i { color: #ffffff !important; }

/* ── 26. Subscription / pricing-details page ─────────────────── */
.text-decoration-line-bottom {
    border-bottom-color: rgba(255,255,255,0.15) !important;
}
a.text-decoration-line-bottom:hover {
    border-bottom-color: #4385dc !important;
}

/* ── 27. Form controls (login, register, contact) ────────────── */
.form-control,
input.form-control,
textarea.form-control,
select.form-control {
    background-color: rgba(255,255,255,0.04) !important;
    border-color: #1e1e2e !important;
    color: #e0e0f0 !important;
}
.form-control:focus,
input.form-control:focus,
textarea.form-control:focus {
    background-color: rgba(67,133,220,0.06) !important;
    border-color: rgba(67,133,220,0.50) !important;
    box-shadow: 0 0 0 3px rgba(67,133,220,0.14) !important;
    color: #ffffff !important;
}
.form-control::placeholder { color: rgba(255,255,255,0.28) !important; }
.form-select {
    background-color: rgba(255,255,255,0.04) !important;
    border-color: #1e1e2e !important;
    color: #e0e0f0 !important;
}