/* --- Unsere Kernprodukte Abschnitt: Hellgrauer Hintergrund wie Gastro --- */
#kernprodukte.section-light {
    background-color: #f5f5f7;
    color: var(--text-color-dark);
}
#kernprodukte.section-light h2,
#kernprodukte.section-light h3,
#kernprodukte.section-light p {
    color: var(--text-color-dark);
}
.footer-info-contact > *:nth-child(1) {
    margin-left: 120px;
}
.footer-info-contact > *:nth-child(2) {
    margin-left: 120px;
}
.footer-info-row > *:first-child {
    margin-left: 0 !important;
    padding-left: 0 !important;
}
/* Footer Hover-Effekte */
.footer-info-contact a:hover {
    color: #800020 !important;
    transition: color 0.2s;
}
.footer-copyright-link:hover {
    color: #800020 !important;
    transition: color 0.2s;
}
/* --- Grundlegende Stile & Variablen --- */
:root {
    /* Farbpalette (Bordeaux-Thema) */
    --text-color-light: #f5f5f7;
    --text-color-dark: #1d1d1f;
    --text-color-grey: #6e6e73;
    --background-light: #ffffff;
    --background-dark: #000000;
    --background-grey: #f5f5f7;
    --background-vanilla: #f7f0e3; /* NEU: Vanille-Hintergrund */
    --link-color: #800020;     /* Primär-Bordeaux */
    --link-color-hover: #a8324a; /* Helleres Bordeaux für Hover */
    --link-color-dark-bg: #a8324a; /* Bordeaux für dunklen BG */
    --link-color-dark-bg-hover: #c94f6d; /* Hover für Bordeaux auf dunklem BG */
    --border-color: #d2d2d7;
    --h3-safran-color: #a8324a;  /* Bordeaux Akzentfarbe */
    --h3-vanilla-color: #a08d76; /* NEU: Vanille Akzentfarbe */
    --h3-trueffel-color: #5c4033; /* NEU: Trüffel Akzentfarbe */


    /* Typografie */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Übergänge */
    --transition-fast: 0.2s ease-out;
    --transition-medium: 0.3s ease-out;
}

/* --- Globale Resets & Einstellungen --- */
html {
    scroll-behavior: smooth;
    font-size: 16px; /* Basis-Schriftgröße */
}

body {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-regular);
    line-height: 1.5; /* Etwas kompakter als vorher */
    margin: 0;
    padding: 0;
    background-color: var(--background-light);
    color: var(--text-color-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Verhindert horizontales Scrollen */
}

/* --- Typografie-Hierarchie --- */
h1, h2, h3, h4 {
    margin-top: 0;
    margin-bottom: 0.6em; /* Einheitlicher Abstand unten */
    line-height: 1.2;
    font-weight: var(--font-weight-semibold);
}

h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem); /* Responsive Schriftgröße */
    letter-spacing: -0.02em; /* Enger für große Titel */
    font-weight: var(--font-weight-bold);
}
h2 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    letter-spacing: -0.015em;
}
h3 { /* Basis H3 Stil */
    font-size: clamp(1.2rem, 3vw, 1.5rem);
        color: #fff; /* Set to a brighter white for better readability */
        text-shadow: 0 2px 12px rgba(0,0,0,0.22); /* Increased shadow for better contrast */
        opacity: 0.98; /* Slightly adjusted opacity */
    margin-bottom: 1em;
}
/* Spezifische H3 Farben pro Produktsektion */
#safran .feature-text h3 { color: var(--h3-safran-color); }
#vanille .feature-text h3 { color: var(--h3-vanilla-color); }
#trueffel .feature-text h3 { color: var(--h3-trueffel-color); }

h4 { /* Für Footer-Spalten */
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: #fff; /* Überschriften in der Fußzeile weiß */
    margin-bottom: 0.8em;
}

p {
    font-size: clamp(1rem, 2.5vw, 1.1rem);
    margin-top: 0;
    margin-bottom: 1.5em; /* Mehr Abstand nach Absätzen */
}
.large-text {
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.18);
/* Footer Social Icons Bordeaux Hover */
.footer-social-link:hover svg {
    background: none !important;
    fill: #800020 !important;
    color: #800020 !important;
    transition: fill 0.2s, color 0.2s;
}
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em; /* Mehr Abstand zum Button */
}

/* --- Links --- */
a {
    color: var(--link-color); /* Haupt-Linkfarbe Gold */
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover {
    text-decoration: underline;
    color: var(--link-color-hover); /* Dunkleres Gold beim Hover */
}

/* --- Layout Container --- */
.content-container {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 22px; /* Apple's typischer Padding */
}
.small-container {
    max-width: 720px;
}

/* --- Header --- */
.main-header {
    /* Helles Glas-Design beibehalten, passt gut zu Gold */
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: saturate(180%) blur(20px);
    color: var(--text-color-dark);
    padding: 0; /* Padding im Container */
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* Noch dezentere Linie */
}

.nav-container {
    max-width: 1024px; /* Leicht breiter */
    height: 60px; /* Feste Höhe */
    margin: 0 auto;
    padding: 0 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
}

.logo {
    font-size: 1.1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-color-dark);
    flex-shrink: 0; /* Verhindert Schrumpfen */
}
.logo:hover { text-decoration: none; color: var(--text-color-dark); }

.logo img {
    height: 72px;
    width: auto;
    display: block;
}

.main-nav { display: block; } /* Standardmäßig anzeigen */
.main-nav ul {
    list-style: none; padding: 0; margin: 0; display: flex; align-items: center; height: 100%;
}
.main-nav ul li { 
    margin: 0 12px; /* Weniger Abstand */
    position: relative;
}
.main-nav ul li .nav-link {
    position: relative;
    padding-bottom: 6px;
    transition: color 0.2s;
}
.main-nav ul li .nav-underline {
    display: block;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: #800020;
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform 0.25s cubic-bezier(.4,0,.2,1);
    z-index: 1;
}
.main-nav ul li .nav-link:hover .nav-underline,
.main-nav ul li.active .nav-link .nav-underline {
    transform: scaleX(1);
}
.main-nav ul li.active .nav-link {
    color: #800020;
}

.main-nav ul li a {
    color: var(--text-color-dark);
    font-size: 0.8rem; /* Kleiner für Nav-Links */
    opacity: 0.9;
    transition: opacity var(--transition-fast), color var(--transition-fast);
    position: relative; /* Für spätere Effekte */
    padding: 15px 0; /* Klickbereich vergrößern */
}
.main-nav ul li a:hover {
    opacity: 1;
    text-decoration: none;
    color: var(--link-color); /* Leicht goldener Akzent beim Hover im Menü */
}

.mobile-nav-toggle { /* Grundstyling für Mobile Button */
    display: none; /* Nur auf Mobile anzeigen */
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-color-dark);
    cursor: pointer;
}

/* --- Sektionen Allgemein --- */
section {
    padding: 100px 0; /* Noch mehr vertikaler Abstand */
    text-align: center;
    overflow: hidden; /* Verhindert das Überlappen von Rändern */
}

.section-dark {
    background-color: var(--background-dark);
    color: var(--text-color-light);
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--text-color-light); }
/* Ausnahme für Safran H3 */
#safran.section-dark .feature-text h3 { color: var(--h3-safran-color); }
.section-dark p { color: var(--text-color-light); opacity: 0.9; }
.section-dark .large-text { color: var(--text-color-grey); }
/* Links auf dunklem Hintergrund */
.section-dark a { color: var(--link-color-dark-bg); }
.section-dark a:hover { color: var(--link-color-dark-bg-hover); }

.section-light {
    background-color: var(--background-light);
    color: var(--text-color-dark);
}
/* Spezieller Hintergrund für Vanille */
#vanille.product-feature {
    background-color: var(--background-vanilla);
    color: var(--text-color-dark); /* Sicherstellen, dass Text dunkel bleibt */
}
#vanille.product-feature h2 { color: var(--text-color-dark); } /* H2 explizit dunkel */
#vanille.product-feature p { color: var(--text-color-dark); } /* P explizit dunkel */
#vanille.product-feature a { color: var(--link-color); } /* Standard-Gold für Links */
#vanille.product-feature a:hover { color: var(--link-color-hover); }

.section-grey {
    background-color: var(--background-grey);
    color: var(--text-color-dark);
}

/* --- Hero Section --- */
.hero-section {
    min-height: 85vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 120px 0; position: relative;
}
.hero-content { position: relative; z-index: 2; }
.hero-background {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
    background-color: var(--background-dark); /* Fallback */
    /* Optional: Bild hier einfügen */
    /* background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('placeholder-hero-background.jpg') no-repeat center center/cover; */
}
.hero-background img { width: 100%; height: 100%; object-fit: cover; /* Bild füllt den Bereich */ }

.cta-group {
    margin-top: 1.5em; display: flex; justify-content: center; align-items: center; gap: 20px; /* Abstand zwischen Buttons/Links */ flex-wrap: wrap; /* Umbruch bei Bedarf */
}

/* --- Call-to-Action Elemente (Angepasst für Gold) --- */
.cta-button {
    display: inline-block;
    background-color: var(--link-color);
    color: var(--text-color-light);
    padding: 10px 25px; /* Festeres Padding */
    border-radius: 20px; /* Stärker abgerundet */
    font-size: 0.9rem;
    font-weight: var(--font-weight-regular);
    cursor: pointer;
    border: 1px solid transparent; /* Rand hinzufügen für Konsistenz */
    transition: background-color var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.cta-button:hover {
    background-color: var(--link-color-hover); /* Dunkleres Gold */
    text-decoration: none;
    color: var(--text-color-light);
    transform: scale(1.03); /* Leichter Zoom-Effekt */
}

/* CTA Button auf dunklem Hintergrund */
.section-dark .cta-button {
    background-color: var(--link-color-dark-bg); /* Helleres Gold */
    color: var(--text-color-dark); /* Dunkler Text auf hellem Gold */
}
.section-dark .cta-button:hover {
    background-color: var(--link-color-dark-bg-hover); /* Hover für helleres Gold */
    color: var(--text-color-dark);
}

.cta-link {
    font-size: 0.9rem; font-weight: var(--font-weight-regular); display: inline-block; margin-top: 5px; /* Kleiner Abstand oben */
    /* Behält die Standard-Linkfarbe der jeweiligen Sektion (hell/dunkel) */
}

/* --- Product Feature Sections --- */
.product-feature { padding: 120px 0; /* Sehr viel Abstand */ }
.feature-content {
    display: flex; align-items: center; justify-content: space-between; gap: 50px; /* Größerer Abstand */ max-width: 1100px; /* Noch etwas breiter */ margin: 0 auto; padding: 0 22px; text-align: left;
}
.feature-layout-image-right { flex-direction: row-reverse; }
.feature-layout-image-left { flex-direction: row; }
.feature-text { flex-basis: 40%; /* Etwas weniger Platz für Text */ max-width: 450px; /* Maximale Breite begrenzen */ }
.feature-text h2 { margin-bottom: 0.3em; /* Näher an h3 */ }
.feature-text h3 { margin-bottom: 1.2em; /* Spezifische Farben werden oben gesetzt */ }
.feature-text p { margin-bottom: 1.5em; font-size: 1rem; }
.feature-image { flex-basis: 55%; /* Mehr Platz für Bild */ text-align: center; }
.feature-image img {
    max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 18px; /* Apple-typischer Radius */ box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Subtiler Schatten */ background-color: #e0e0e0; /* Hellerer Platzhalter */
}

/* --- Info Sections (Industrie, Gastro) --- */
.info-section { text-align: left; /* Standardmäßig linksbündig für Textblöcke */ }
.info-section h2 { text-align: center; /* Überschrift zentriert */ margin-bottom: 1.5em; }
.info-section ul { list-style: disc; /* Standard-Listenpunkte */ margin-left: 20px; margin-bottom: 1.5em; }
.info-section ul li { margin-bottom: 0.5em; }
.info-section .cta-link { display: block; /* Link als Block für bessere Klickbarkeit */ text-align: center; /* Zentrieren */ margin-top: 2em; }
/* Styling für Produkt-Übersicht Links */
.product-links { display: flex; justify-content: center; gap: 20px; margin-top: 1.5em; flex-wrap: wrap; }

/* --- Kontaktformular Styling --- */
.contact-section h2 { text-align: center; margin-bottom: 0.5em; }
.contact-section > .content-container > p { /* Der Absatz direkt unter H2 */ text-align: center; color: var(--text-color-grey); margin-bottom: 3em; }
.contact-form { max-width: 600px; /* Maximale Breite des Formulars */ margin: 0 auto; /* Zentrieren */ text-align: left; }
.form-group { margin-bottom: 1.5em; /* Abstand zwischen Formularfeldern */ }
.form-group label { display: block; margin-bottom: 0.5em; font-weight: var(--font-weight-semibold); font-size: 0.9rem; color: var(--text-color-dark); }
/* Spezifisches Label für Checkbox */
.form-group .checkbox-label { display: flex; align-items: center; font-weight: var(--font-weight-regular); font-size: 0.85rem; color: var(--text-color-grey); }
.form-group .checkbox-label input[type="checkbox"] { margin-right: 10px; width: auto; /* Checkbox nicht 100% breit machen */ margin-bottom: 0; /* Standard-Margin entfernen */ accent-color: var(--link-color); /* Checkbox-Farbe anpassen */ }
.form-group .checkbox-label a { color: var(--link-color); text-decoration: underline; }
.form-group input[type="text"], .form-group input[type="email"], .form-group input[type="tel"], .form-group textarea {
    width: 100%; padding: 12px; border: 1px solid var(--border-color); border-radius: 8px; /* Leicht abgerundete Ecken */ font-size: 1rem; font-family: var(--font-primary); box-sizing: border-box; /* Padding und Border in Breite einrechnen */ transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-group input:focus, .form-group textarea:focus {
    outline: none; border-color: var(--link-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--link-color) 20%, transparent); /* Fokus-Indikator in Gold-Transparent */
}
.form-group textarea { resize: vertical; /* Nur vertikales Ändern der Größe erlauben */ min-height: 120px; }
.form-group.form-submit { text-align: center; /* Button zentrieren */ margin-top: 2em; }
.form-group.form-submit .cta-button { min-width: 180px; /* Mindestbreite für den Button */ }
.form-group.form-submit .checkbox-label { justify-content: center; /* Checkbox zentrieren */ margin-bottom: 1.5em; /* Abstand zum Button */ }
.contact-details-inline { text-align: center; margin-top: 3em; padding-top: 2em; border-top: 1px solid var(--border-color); /* Trennlinie */ font-size: 0.9rem; color: var(--text-color-grey); }
.contact-details-inline p { margin-bottom: 0.5em; }
.contact-details-inline a { color: var(--text-color-grey); /* Behält Grau für direkte Kontakte */ }
.contact-details-inline a:hover { color: var(--link-color); }

/* --- About Section --- */
.about-section { text-align: center; padding: 80px 0; }
.about-section h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.about-section p { max-width: 600px; margin-left: auto; margin-right: auto; color: var(--text-color-grey); }

/* --- Footer --- */
.main-footer {
    background: #222 !important;
    color: #fff;
    padding-top: 50px;
    font-size: 0.8rem; /* Kleinerer Basistext im Footer */
}
.footer-content {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 22px 40px 22px;
    border-bottom: 1px solid var(--border-color); /* Trennlinie */
    color: #fff;
}
.footer-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 36px;
    margin-bottom: 36px;
    text-align: left;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 22px;
    padding-right: 22px;
    width: 100%;
}
}
.footer-info a:hover {
    color: var(--link-color);
}
.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Gleichmäßig verteilen */
    gap: 20px 40px; /* Vertikaler und horizontaler Abstand */
}
.footer-column {
    min-width: 160px;
}
.footer-column h4 {
    font-size: 0.85rem;
    margin-bottom: 1em;
    color: #fff !important;
    font-weight: 400;
    letter-spacing: 0.01em;
}
.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-column ul li {
    margin-bottom: 0.8em;
}
.footer-column ul li a {
    color: var(--text-color-grey);
    font-size: 0.8rem;
}
.footer-column ul li a:hover {
    color: var(--link-color);
}
.footer-bottom {
    max-width: 980px;
    margin: 0 auto;
    padding: 25px 22px;
    display: flex;
    justify-content: space-between; /* Copyright links, Links rechts */
    align-items: center;
    flex-wrap: wrap; /* Umbruch bei Bedarf */
    gap: 10px;
    color: #fff;
    font-size: 0.75rem;
}
.footer-bottom p {
    margin: 0;
}
.footer-legal-links a {
    color: var(--text-color-grey);
    margin: 0 8px;
}
.footer-legal-links a:hover {
    color: var(--link-color);
}


    
/* Abstand zwischen den ersten beiden und den letzten beiden Footer-Elementen maximieren */
.footer-info-row img {
    height: 100px;
    width: auto;
    display: block;
    margin: 0;
    color: #fff !important;
    fill: #fff !important;
}
.footer-info-contact {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    font-size: 1em;
}
.footer-info-contact a {
    color: #fff !important;
    text-decoration: none;
    margin-right: 8px;
    font-size: 1em;
}
.footer-info-contact span {
    color: #fff !important;
}
.footer-social {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 0;
}
.footer-social a svg {
    display: inline-block;
    height: 20px;
    width: 20px;
    vertical-align: middle;
    border-radius: 4px;
    background: #444;
    padding: 2px;
    transition: opacity 0.2s, background 0.2s;
    opacity: 0.85;
    color: #fff !important;
    fill: #fff !important;
}
.footer-social a:hover svg {
    opacity: 1;
    background: #b8860b;
}

/* --- Footer Divider --- */
.footer-top-divider,
.footer-nav-divider {
    border: 0;
    border-top: 1.5px solid #d2d2d7;
    width: 100%;
    margin: 32px 0;
}

/* --- Moderner Slider (Produkte & About) --- */
.modern-slider {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    min-height: 260px;
}
.modern-slide {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 260px;
    padding: 32px 0;
    background: none;
    transition: opacity 0.4s;
}
.modern-slide.active {
    display: flex;
}
.modern-slider-prev,
.modern-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border: 2px solid #b8860b;
    color: #b8860b;
    border-radius: 50%; 
    width: 48px;
    height: 48px;
    font-size: 2rem;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}
.modern-slider-prev:hover,
.modern-slider-next:hover {
    background: #b8860b;
    color: #fff;
}
.modern-slider-prev { left: 10px; }
.modern-slider-next { right: 10px; }
.modern-slider-pagination {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}
.modern-slider-pagination .dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #d2d2d7;
    cursor: pointer;
    transition: background 0.2s;
}
.modern-slider-pagination .dot.active {
    background: #800020;
}

/* --- Back-to-Top Button --- */
.back-to-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #800020 !important;
    color: #fff !important;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    transition: background 0.2s, color 0.2s;
}
.back-to-top-btn:hover {
    background: #a8324a !important;
    color: #fff !important;
}
.back-to-top-btn svg {
    stroke: #fff !important;
}

/* --- Call Me & Mail Me Buttons --- */
.callme-btn, .mailme-btn {
    position: fixed;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #800020;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    z-index: 1001;
    border: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.2s;
    font-size: 1.2rem;
    text-decoration: none;
}
.callme-btn { bottom: 98px; }
.mailme-btn { bottom: 52px; }
.back-to-top-btn { bottom: 6px; }
.action-fab {
    margin-bottom: 0;
    width: 42px;
    height: 42px;
}
.action-fab svg {
    width: 20px;
    height: 20px;
}
@media (max-width: 768px) {
    .action-fab {
        right: 10px;
        width: 36px;
        height: 36px;
    }
    .callme-btn { bottom: 102px; }
    .mailme-btn { bottom: 56px; }
    .back-to-top-btn { bottom: 10px; }
}

/* Alle Überschriften in Bordeaux, außer Footer */
h1, h2, h3, h4 {
    color: #800020 !important;
}
.footer-column h4 {
    color: #fff !important;
}

/* Alle Buttons in Bordeaux */
.cta-button, button, input[type="submit"] {
    background: #800020 !important;
    color: #fff !important;
    border: none;
    border-radius: 20px;
    font-weight: 600;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}
.cta-button:hover, button:hover, input[type="submit"]:hover {
    background: #a8324a !important;
    color: #fff !important;
    transform: scale(1.03);
}

/* --- Hero spezifische Anpassungen --- */
.hero-section h1 {
    color: #fff !important; /* H1 im Hero-Bereich auf weiß setzen */
}

.callme-btn:hover, .mailme-btn:hover, .action-fab:hover {
    background: #a8324a !important;
    color: #fff !important;
    transform: scale(1.08);
}