.text-black {
  color: #192b41 !important;
}

/* Compare Table round edges */
.col-12 > .row.no-gutters {
  border-radius: 12px;
  overflow: hidden;
}

.disable-selection {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.a {
  color: #010101;
  text-decoration: none;
  background-color: transparent;
}

.a:hover {
  cursor: pointer;
}

.black {
  color: black;
}

.rounded-image {
  border-radius: 10px;
}

/* Submenü-Container */
.submenu {
  border-radius: 5px; /* Abgerundete Ecken */
}

/* Submenü wird beim Hover angezeigt */
.nav li:hover .submenu {
  display: block; /* Zeigt das Submenü beim Hover an */
}

/* Submenüeinträge */
.submenu li {
  list-style: none; /* Entfernt Aufzählungszeichen */
  margin: 0; /* Entfernt Abstände */
  padding: 0; /* Entfernt Innenabstände */
}

/* Links im Submenü */
.submenu li a {
  display: flex; /* Flexbox für Text und Tag */
  align-items: center; /* Vertikale Zentrierung */
  justify-content: space-between; /* Platz zwischen Text und Tag */
  padding: 8px 12px; /* Innenabstand für mehr Platz */
  color: #333; /* Textfarbe */
  text-decoration: none; /* Entfernt Unterstreichungen */
  font-size: 16px; /* Schriftgröße */
  white-space: nowrap; /* Kein Zeilenumbruch */
}

/* Hover-Effekt für Submenülinks */
.submenu li a:hover {
  background-color: #f1f1f1; /* Hintergrundfarbe beim Hover */
  color: #1f4dde; /* Textfarbe beim Hover */
  border-radius: 5px; /* Abgerundete Ecken */
}

/* Tags */
.nav-tag {
  font-size: 14px; /* Schriftgröße */
  padding: 2px 6px; /* Innenabstand */
  border-radius: 5px; /* Abgerundete Ecken */
  font-weight: bold; /* Fettschrift */
  white-space: nowrap; /* Kein Zeilenumbruch */
  margin-left: 10px; /* Abstand zwischen Text und Tag */
}

.tag-orange {
  background-color: #f1d9b5; /* Hintergrundfarbe des Tags */
  color: rgb(255, 123, 0); /* Textfarbe */
}

.tag-blue {
  background-color: #b5b9f1; /* Hintergrundfarbe des Tags */
  color: rgb(0, 60, 255); /* Textfarbe */
}

.tag-green {
  background-color: #74d3a6; /* Hintergrundfarbe des Tags */
  color: rgb(12, 153, 76); /* Textfarbe */
}

/* Hintergrund des aktuell weißen Bereichs */
.offcanvas-content,
.vertical-menu ul.nav li,
.vertical-menu ul.nav li a {
  background-color: #1c1c1c; /* Dunkle Hintergrundfarbe für alle betroffenen Bereiche */
  color: #ffffff; /* Weiße Schrift für Kontrast */
}

/* Aktives Menü-Item */
.vertical-menu ul.nav li.current-menu-item a {
  background-color: #2a2a2a; /* Etwas helleres Grau für ausgewählte Menüpunkte */
  color: #ffffff; /* Weiße Schrift */
}

/* Entfernt unnötige Rahmen */
.vertical-menu ul.nav li {
  border: none;
}

/* Beibehaltung der restlichen Farben für Konsistenz */
.vertical-menu ul.nav li a {
  text-decoration: none;
  padding: 10px 15px;
  display: block;
}

/* Hover-Effekt */
.vertical-menu ul.nav li a:hover {
  background-color: #333333; /* Leicht heller für den Hover-Effekt */
  color: #ffffff;
}

/* Responsive Design: Für kleinere Bildschirme */
@media (max-width: 768px) {
  .submenu {
    min-width: 200px; /* Verkleinert die Breite des Submenüs */
  }
  .submenu li a {
    font-size: 14px; /* Kleinere Schriftgröße */
    padding: 6px 10px; /* Weniger Innenabstand */
  }
}

/* Modern Sticky Header for Black Week Sale */
.sticky-header {
  position: fixed; /* Always stays at the top */
  top: 0; /* Stick to the top of the page */
  width: 100%; /* Full width */
  background: linear-gradient(45deg, #377532, #0a552c); /* Smooth gradient */
  color: #ffffff; /* White text for high contrast */
  text-align: center; /* Center the text */
  padding: 10px 0; /* Consistent padding */
  font-size: 16px; /* Original font size */
  font-weight: 600; /* Slightly bold for modern look */
  z-index: 1000; /* Ensure it stays on top */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Modern shadow effect */
  letter-spacing: 0.5px; /* Slight spacing for elegance */
}

.sticky-header a {
  text-decoration: none; /* Remove underline */
  color: #dcdefc; /* Gold link color for emphasis */
  padding: 5px 15px; /* Add some clickable area around text */
  background: rgba(255, 255, 255, 0.1); /* Subtle background for the link */
  border-radius: 20px; /* Rounded corners for modern style */
  transition: all 0.3s ease; /* Smooth hover animations */
}

.sticky-header a:hover {
  background: rgb(16, 141, 16); /* Gold background on hover */
  color: #e2ffe9; /* Black text on hover */
  box-shadow: 0px 4px 10px rgba(96, 202, 26, 0.5); /* Glow effect on hover */
}

/* Main Header should start below the sticky header */
.main-header {
  position: fixed; /* Stays at the top, but below the sticky header */
  top: 45px; /* Adjust this to the height of the sticky header */
  width: 100%; /* Full width */

  z-index: 999; /* Lower than sticky header */
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Optional: add some shadow for better distinction */
}

/* Standard Light Mode */
body {
  background-color: #ffffff;
  color: #000000;
}

/* Dark Mode – nur aktiv, wenn die Klasse `dark-mode` gesetzt wird */
.dark-mode {
  background-color: #1a1a1a;
  color: rgba(255, 255, 255, 0.87);
}

.dark-mode a:hover {
  color: #80d8ff;
}

.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
  color: #ffffff;
}

/* Hintergrundfarben */
.dark-mode .bg-white {
  background-color: #1e1e1e !important;
}

.dark-mode .bg-light {
  background-color: #1a1a1a !important;
}

/* Textfarben */
.dark-mode .text-title {
  color: #f9fafb !important;
}

.dark-mode .text-regular {
  color: rgba(255, 255, 255, 0.7) !important;
}

.dark-mode .text-primary {
  color: #4da3ff !important;
}

.dark-mode .text-secondary {
  color: #80d8ff !important;
}

.dark-mode .text-warning {
  color: #ffa726 !important;
}

/* Tabellen */
.dark-mode .table {
  background-color: #1a1a1d;
}

.dark-mode .table th,
.dark-mode .table td {
  border: 1px solid #2c2f36;
  color: #e0e0e0;
}

/* Header */
.dark-mode .header {
  background-color: transparent !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  border-bottom: none !important;
}

.dark-mode .header-sticky.sticky {
  background-color: #1a1a1d !important;
  border-bottom: 1px solid #2c2f36 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

.dark-mode .header .nav > li > a {
  color: rgba(255, 255, 255, 0.8) !important;
}

.dark-mode .header-sticky.sticky .nav > li > a {
  color: #ffffff !important;
}

/* Dropdown-Menü */
.dark-mode .horizontal-menu .nav li ul {
  background-color: #1a1a1d !important;
  border: 1px solid #2c2f36 !important;
}

.dark-mode .horizontal-menu .nav li ul li {
  border-bottom: 1px solid #2c2f36 !important;
}

.dark-mode .horizontal-menu .nav li ul li:last-child {
  border-bottom: none !important;
}

.dark-mode .horizontal-menu .nav li ul li a {
  color: #e0e0e0 !important;
  border: none !important;
}

.dark-mode .horizontal-menu .nav li ul li a:hover {
  background-color: #252529 !important;
  color: #4da3ff !important;
  border: none !important;
}

.dark-mode .horizontal-menu .nav li ul li .submenu-button::after {
  color: #e0e0e0 !important;
  border: none !important;
}

/* Buttons */
.dark-mode .button {
  background-color: #4da3ff;
  color: #0e0e10;
}

.dark-mode .button:hover {
  background-color: #80d8ff;
}

/* Formulare */
.dark-mode input,
.dark-mode textarea {
  background-color: #252529;
  color: #ffffff;
  border: 1px solid #2c2f36;
}

.dark-mode input:focus,
.dark-mode textarea:focus {
  border-color: #4da3ff;
}

/* Cards */
.dark-mode .card {
  background-color: #1e1e1e;
  border-color: rgba(255, 255, 255, 0.1);
  color: #d1d5db;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Preistabellen */
.dark-mode .pricing-table-item .table-price {
  color: #ffffff !important;
}

/* Dark Mode Button Styling */
#dark-mode-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: 15px;
}

#dark-mode-toggle svg {
  width: 24px;
  height: 24px;
  color: #ffffff; /* White icon in light mode */
  transition: opacity 0.3s ease;
}

body.dark-mode #dark-mode-toggle svg {
  color: #e0e0e0; /* Light icon in dark mode */
}

#dark-icon {
  display: block; /* Show dark icon by default */
}

#light-icon {
  display: none; /* Hide light icon by default */
}

body.dark-mode #dark-icon {
  display: none; /* Hide dark icon in dark mode */
}

body.dark-mode #light-icon {
  display: block; /* Show light icon in dark mode */
}

/* Ensure text color for links in dropdown list */
.dropdown-list li a {
  color: #000000; /* Default black for light mode */
}

/* Specific style for the "More About" span in section-title */
.section-title .fw-semi-bold {
  color: rgb(66, 81, 249); /* Original blue color */
}

/* Override for dark mode to ensure visibility */
body.dark-mode .section-title .fw-semi-bold {
  color: #8ab4f8 !important; /* A lighter blue for dark mode */
}

/* Dark Mode Styles */
body.dark-mode {
  background-color: #1a1a1a; /* Dark background */
  color: #e0e0e0; /* Light text */
}

body.dark-mode .header.main-header .horizontal-menu .nav > li > a,
body.dark-mode .header.main-header .horizontal-menu .nav > li.submenu > a,
body.dark-mode .header.main-header .horizontal-menu .nav > li.submenu .submenu li a {
  color: #e0e0e0; /* Light text for menu items */
}

body.dark-mode .header.main-header .horizontal-menu .nav > li.submenu .submenu {
  background-color: #2a2a2a; /* Darker background for submenu */
  border-color: #3a3a3a; /* Darker border for submenu */
}

body.dark-mode .header.main-header .horizontal-menu .nav > li.submenu .submenu li a:hover {
  background-color: #3a3a3a; /* Hover background for submenu items */
}

.dark-mode .header.main-header .header-right .btn.black {
  background-color: #3a3a3a;
  color: #e0e0e0;
  border-color: #3a3a3a;
}

.dark-mode .header.main-header .header-right .btn.black:hover {
  background-color: #4a4a4a;
  border-color: #4a4a4a;
}

.dark-mode .header.main-header .header-right .btn-filled {
  background-color: #1f4dde; /* Keep primary color for filled button */
  color: #ffffff;
}

.dark-mode .header.main-header .header-right .btn-filled:hover {
  background-color: #1a3bbd; /* Darker hover for filled button */
}

.dark-mode .mobile-header .logo img.default-logo {
  display: none;
}

.dark-mode .mobile-header .logo img.sticky-logo {
  display: block;
}

.dark-mode .mobile-header .offcanvas-panel {
  background-color: #2a2a2a; /* Dark background for mobile offcanvas */
}

.dark-mode .mobile-header .offcanvas-header {
  border-bottom-color: #3a3a3a;
}

.dark-mode .mobile-header .offcanvas-content {
  background-color: #2a2a2a;
}

.dark-mode .mobile-header .vertical-menu .nav > li > a,
.dark-mode .mobile-header .vertical-menu .nav > li.submenu > a {
  color: #e0e0e0; /* Light text for mobile menu items */
}

.dark-mode .mobile-header .vertical-menu .nav > li.submenu .submenu li a {
  color: #c0c0c0; /* Slightly darker text for mobile submenu items */
}

.dark-mode .mobile-header .vertical-menu .nav > li.submenu .submenu {
  background-color: #3a3a3a; /* Darker background for mobile submenu */
}

.dark-mode .mobile-header .vertical-menu .nav > li.submenu .submenu li a:hover {
  background-color: #4a4a4a; /* Hover background for mobile submenu items */
}

.dark-mode .section-title .fw-semi-bold {
  color: #8ab4f8 !important; /* A lighter blue for dark mode */
}

.dark-mode .stats-card,
.dark-mode .protection-card,
.dark-mode .attack-type-card,
.dark-mode .threat-stat {
  background: #2a2a2a; /* Darker background for cards */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* Stronger shadow for dark mode */
  border-color: rgba(255, 255, 255, 0.1); /* Lighter border */
}

.dark-mode .stats-card:hover,
.dark-mode .protection-card:hover,
.dark-mode .attack-type-card:hover,
.dark-mode .threat-stat:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); /* Stronger hover shadow */
  border-color: rgba(255, 255, 255, 0.2); /* Lighter hover border */
}

.dark-mode .stats-card h5,
.dark-mode .protection-card h3,
.dark-mode .attack-type-card h4,
.dark-mode .threat-stat h5 {
  color: #e0e0e0; /* Light text for headings */
}

.dark-mode .stats-card p,
.dark-mode .protection-card p,
.dark-mode .attack-type-card p,
.dark-mode .threat-stat p,
.dark-mode .feature-list li span,
.dark-mode .attack-type-card ul li span {
  color: #c0c0c0; /* Lighter text for paragraphs and lists */
}

.dark-mode .feature-list li {
  border-bottom-color: rgba(255, 255, 255, 0.08); /* Lighter border for list items */
}

.dark-mode .footer {
  background-color: #1a1a1a; /* Dark background for footer */
}

.dark-mode .footer .widget-title {
  color: #ffffff; /* Light text for footer titles */
}

.dark-mode .footer .contact-info li,
.dark-mode .footer .widget_nav_menu ul li a,
.dark-mode .footer .copyright-text {
  color: #c0c0c0; /* Lighter text for footer content */
}

.dark-mode .footer .widget_nav_menu ul li a:hover {
  color: #ffffff; /* White hover for footer links */
}

.dark-mode .footer .dropdown-button {
  background-color: #3a3a3a;
  color: #e0e0e0;
  border-color: #4a4a4a;
}

.dark-mode .footer .dropdown-list {
  background-color: #1a1a1d;
  border: 1px solid #2c2f36;
}

.dark-mode .dropdown-list li a {
  color: rgba(255, 255, 255, 0.7) !important; /* Ensure text color is light */
}

.dark-mode .dropdown-list li:hover {
  background-color: #4a4a4a;
}

/* Dark mode for social icons */
.dark-mode .social-list a {
  color: rgba(255, 255, 255, 0.7) !important;
}

.dark-mode .social-list a:hover {
  color: #00e9fd !important;
}

/* Dark mode for back to top button */
.dark-mode .back-top {
  box-shadow: inset 0 0 0 2px rgba(77, 163, 255, 0.3) !important;
}

.dark-mode .back-top::after {
  color: #00e9fd !important;
}

.dark-mode .back-top:hover::after {
  color: #80d8ff !important;
}

.dark-mode .back-top svg.progress-circle path {
  stroke: #00e9fd !important;
}

/* Dark mode for preloader */
.dark-mode .preloader {
  background-color: #0e0e10 !important;
}

.dark-mode .spinner-loader span {
  border-color: #00e9fd !important;
}

/* Dark mode adjustments for inline styles */
.dark-mode [style*="background: linear-gradient(135deg, #f8f9ff"] {
  background: linear-gradient(135deg, #1a1a1d 0%, #252529 100%) !important;
}

/* Dark mode for any remaining white backgrounds */
.dark-mode [style*="background-color: #ffffff"],
.dark-mode [style*="background: #ffffff"] {
  background-color: #1e1e1e !important;
}

/* Dark mode for text colors in inline styles */
.dark-mode [style*="color: #010101"],
.dark-mode [style*="color: #000000"] {
  color: #ffffff !important;
}

.dark-mode [style*="color: #666666"] {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Ensure proper contrast for all text elements */
.dark-mode .fw-bold,
.dark-mode .fw-semi-bold {
  color: #ffffff !important;
}

/* Dark mode for any remaining elements that might have been missed */
.dark-mode .container,
.dark-mode .row,
.dark-mode .col-lg-6,
.dark-mode .col-md-6,
.dark-mode .col-12 {
  color: inherit;
}

/* Dark mode for specific text elements */
.dark-mode .mb-25,
.dark-mode .mb-20,
.dark-mode .mb-15,
.dark-mode .mb-10,
.dark-mode .mb-5 {
  color: inherit;
}

/* Dark mode for .btn.btn-filled */
.dark-mode .btn.btn-filled {
  background-image: linear-gradient(to right, #00e9fd 0%, #01c1fc 100%); /* Original gradient */
  color: #ffffff; /* Keep white text */
  border-color: transparent;
  box-shadow: 10px 10px 30px rgba(0, 233, 253, 0.2); /* Keep original shadow */
}

.dark-mode .btn.btn-filled:hover {
  background-image: linear-gradient(to right, #01c1fc 0%, #00e9fd 100%); /* Reverse gradient on hover */
  color: #ffffff;
  box-shadow: none;
}

/* Dark mode for .btn.btn-white */
.dark-mode .btn.btn-white {
  background-color: transparent;
  border-color: #00e9fd; /* Use secondary color for border in dark mode */
  color: #00e9fd; /* Use secondary color for text in dark mode */
}

.dark-mode .btn.btn-white:hover {
  background-color: #00e9fd; /* Fill with secondary color on hover */
  color: #ffffff; /* White text on hover */
  border-color: transparent;
}

/* Specific overrides for CTA section buttons in dark mode */
.dark-mode .cta-section .btn-filled {
  background: linear-gradient(135deg, #00e9fd 0%, #01c1fc 100%) !important; /* Use secondary color gradient */
  color: #ffffff !important;
  border: none !important;
}

.dark-mode .cta-section .btn-filled:hover {
  background: linear-gradient(135deg, #01c1fc 0%, #00e9fd 100%) !important;
  color: #ffffff !important;
}

.dark-mode .cta-section .btn-white {
  background: rgba(0, 233, 253, 0.2) !important; /* Transparent secondary color background */
  color: #ffffff !important;
  border: 1px solid rgba(0, 233, 253, 0.5) !important;
}

.dark-mode .cta-section .btn-white:hover {
  background: rgba(0, 233, 253, 0.3) !important;
  color: #ffffff !important;
}

/* Fix for "More About" span color in dark mode */
.dark-mode .section-title span {
  color: #4da3ff !important; /* A suitable blue for dark mode */
}

.slick-dots {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
}

.slick-dots li {
  margin: 0 7px; /* Etwas kleinerer Abstand zwischen den Punkten */
}

.slick-dots li button {
  display: block;
  font-size: 0; /* Versteckt die Zahl */
  width: 25px; /* Größe des Punktes */
  height: 6px; /* Größe des Punktes */
  background-color: gray; /* Farbe der Punkte */
  border: none;
  border-radius: 15% / 50%; /* Macht sie rund */
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s; /* Sanfter Übergang */
}

.slick-dots li button:hover {
  background-color: lightgray; /* Farbe beim Hover */
  transform: scale(1.3); /* Punkt wird leicht größer */
}

.slick-dots li.slick-active button {
  background-color: #00e9fd; /* Farbe des aktiven Punktes */
}

/* Ensure equal height for threat stats cards */
.threat-stats-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; /* Makes all direct children of this row equal height */
}

/* New styles for visual representations */
.visual-representation {
  min-height: 400px; /* Ensure a decent height */
  border-radius: 25px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
  border: 2px solid transparent;
}

.visual-representation.pletx-visual {
  background: linear-gradient(135deg, #1f4dde, #4251f9);
}

.visual-representation.as203446-visual {
  background: linear-gradient(135deg, #00e9fd, #01c1fc);
}

/* Fix alignment for ddos-core icon and other icons in the visual representation */
.visual-representation .large-icon {
  font-size: 8rem;
  color: rgba(255, 255, 255, 0.2);
  position: absolute;
  z-index: 1;
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* Ensure consistent alignment for all icons regardless of size differences */
.visual-representation .icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}

/* Remove any pulse animations */
.visual-representation *,
.protection-card *,
.stats-card * {
  animation: none !important;
}

.visual-representation .badge-overlay {
  position: absolute;
  padding: 10px 20px;
  border-radius: 25px;
  font-weight: 600;
  font-size: 14px;
  color: white;
  z-index: 2;
  backdrop-filter: blur(5px);
  background: rgba(255, 255, 255, 0.2); /* General background for badges */
}

.visual-representation.pletx-visual .badge-overlay.capacity-badge {
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, #1f4dde, #4251f9);
  box-shadow: 0 5px 15px rgba(31, 77, 222, 0.3);
}

.visual-representation.as203446-visual .badge-overlay.ttm-badge {
  top: 20px;
  left: 20px;
  background: linear-gradient(135deg, #00e9fd, #01c1fc);
  box-shadow: 0 5px 15px rgba(0, 233, 253, 0.3);
}

/* Hover effects for the new visual elements */
.visual-representation:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
  border-color: rgba(66, 81, 249, 0.2); /* Consistent with protection-card hover */
}

/* Dark mode adjustments for new visual elements */
.dark-mode .visual-representation {
  background: #2a2a2a; /* Darker background for cards */
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3) !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .visual-representation:hover {
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4) !important;
  border-color: rgba(0, 233, 253, 0.2) !important; /* Consistent with other dark mode badges */
}

.dark-mode .visual-representation .large-icon {
  color: rgba(255, 255, 255, 0.1); /* More subtle in dark mode */
}

.dark-mode .visual-representation.pletx-visual {
  background: linear-gradient(135deg, #1a1a1d, #252529); /* Darker gradient */
}

.dark-mode .visual-representation.as203446-visual {
  background: linear-gradient(135deg, #252529, #1a1a1d); /* Darker gradient */
}

.dark-mode .visual-representation .badge-overlay {
  background: rgba(77, 163, 255, 0.2) !important; /* Consistent with other dark mode badges */
  color: #ffffff !important;
}

/* Custom CSS for vertical alignment of slab icons */
.slab-stages .slab-item .slab-icon {
  vertical-align: middle; /* Vertically centers the icon with respect to the line */
}

/* ===== DDOS VISUALIZATION ALIGNMENT FIXES ===== */

/* Position network nodes so their ICONS (not containers) align with the flow line */
.network-node {
  position: absolute;
  /* Position the container so the icon center aligns with the flow line */
  top: calc(50% - 35px); /* 50% minus half of icon height (70px/2 = 35px) */
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
}

.network-node.source {
  left: 30px;
}

.network-node.server {
  right: 30px;
}

/* Ensure the node icon dimensions are consistent */
.node-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #2c2c54, #40407a);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 10px; /* Existing margin-bottom for node-icon */
  border: 2px solid rgba(0, 233, 253, 0.3);
  box-shadow: 0 0 30px rgba(0, 233, 253, 0.2);
  position: relative;
  overflow: hidden;
  color: #00e9fd;
}

.network-node.server .node-icon {
  background: linear-gradient(135deg, #00e9fd, #01c1fc);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 30px rgba(0, 233, 253, 0.4);
  color: white;
}

/* Position the protection shield so its center aligns with the flow line */
.protection-shield {
  position: absolute;
  left: 50%;
  /* Position so the shield core center aligns with the flow line */
  top: calc(50% - 50px); /* 50% minus half of shield core height (100px/2 = 50px) */
  transform: translateX(-50%); /* Only center horizontally */
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 15;
}

/* Ensure the shield core dimensions are consistent */
.shield-core {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #1f4dde, #4251f9);
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  position: relative;
  border: 3px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 50px rgba(31, 77, 222, 0.8), inset 0 0 30px rgba(255, 255, 255, 0.1);
  animation: shieldPulse 2s ease-in-out infinite;
  color: white;
  margin-bottom: 15px; /* Added to push the label down */
}

/* Ensure network flow line is properly positioned */
.network-flow-line {
  position: absolute;
  top: 50%;
  left: 80px;
  right: 80px;
  height: 3px;
  background: linear-gradient(90deg, rgba(0, 233, 253, 0.3) 0%, rgba(0, 233, 253, 0.8) 50%, rgba(0, 233, 253, 0.3) 100%);
  transform: translateY(-50%); /* Center the line vertically */
  border-radius: 2px;
  box-shadow: 0 0 20px rgba(0, 233, 253, 0.5);
}

/* Fix data packet alignment to flow along the line */
.data-packet {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%); /* Center packets on the line */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  z-index: 5;
  box-shadow: 0 0 15px currentColor;
  /* Added for smoother disappearance and to prevent flickering */
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Style for "bad packets" if they are meant to be red */
.data-packet.bad-packet {
  background-color: red;
  color: red; /* Ensures box-shadow is red */
}

/* Ensure packets truly disappear when they are meant to */
.data-packet.packet-hidden {
  /* Assuming JavaScript adds this class when a packet should disappear */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important; /* Prevent any interaction */
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .network-node {
    /* Adjust for smaller icons on mobile */
    top: calc(50% - 25px); /* 50% minus half of mobile icon height (50px/2 = 25px) */
  }

  .network-node.source {
    left: 20px;
  }

  .network-node.server {
    right: 20px;
  }

  .node-icon {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }

  .protection-shield {
    /* Adjust for smaller shield on mobile */
    top: calc(50% - 40px); /* 50% minus half of mobile shield height (80px/2 = 40px) */
  }

  .shield-core {
    width: 80px;
    height: 80px;
    font-size: 2rem;
  }

  .network-flow-line {
    left: 60px;
    right: 60px;
  }
}

/* New custom styles for the pricing section */
.bg-pricing-gradient {
  background: linear-gradient(135deg, #f0f2f5 0%, #e0e5ec 100%); /* Light greyish blue gradient */
}

.dark-mode .bg-pricing-gradient {
  background: linear-gradient(135deg, #1a1a1d 0%, #252529 100%) !important; /* Darker gradient for dark mode */
}

/* Ensure uniform height for pricing cards */
.pricing-plans-section .card {
  display: flex;
  flex-direction: column;
  height: 100%; /* Ensures all cards in a row have the same height */
  padding: 30px; /* Add padding inside the card */
}

.pricing-plans-section .card .feature-list {
  flex-grow: 1; /* Allows the feature list to take up available space */
  margin-bottom: 20px; /* Adjust as needed */
  padding-left: 0; /* Remove default ul padding */
  list-style: none; /* Remove default bullet points */
  text-align: left; /* Align text to the left */
  width: 100%; /* Take full width of card content area */
  padding: 0 20px; /* Add some horizontal padding */
}

.pricing-plans-section .card .btn {
  margin-top: auto; /* Pushes the button to the bottom */
}

/* Adjust feature list styling for pricing cards */
.pricing-plans-section .feature-list li {
  padding: 8px 0; /* Padding for list items */
  border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Subtle separator */
  color: #666666; /* Default text color */
}

.dark-mode .pricing-plans-section .feature-list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Dark mode separator */
  color: rgba(255, 255, 255, 0.7) !important; /* Dark mode text color */
}

.pricing-plans-section .feature-list li:last-child {
  border-bottom: none; /* No border for the last item */
}

.pricing-plans-section .table-price {
  font-size: 40px; /* Larger price font */
  font-weight: bold;
  color: #1f4dde; /* Primary color for price */
  margin-bottom: 20px;
}

.dark-mode .pricing-plans-section .table-price {
  color: #00e9fd !important; /* Secondary color for price in dark mode */
}

.pricing-plans-section .table-price sup {
  font-size: 0.5em; /* Smaller currency symbol */
  vertical-align: super;
}

.pricing-plans-section .table-price small {
  font-size: 0.4em; /* Smaller per month text */
  vertical-align: middle;
  color: #666666;
}

.dark-mode .pricing-plans-section .table-price small {
  color: rgba(255, 255, 255, 0.7) !important;
}

.pricing-plans-section .card-title {
  margin-bottom: 15px;
  color: #192b41; /* Dark text for titles */
}

.dark-mode .pricing-plans-section .card-title {
  color: #ffffff !important;
}

.pricing-plans-section .card p {
  color: #666666; /* Default text color for descriptions */
}

.dark-mode .pricing-plans-section .card p {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Adjust icon circle size for pricing cards if needed */
.pricing-plans-section .icon-circle {
  width: 60px;
  height: 60px;
  font-size: 2rem;
}

/* New styles for Why Choose Us cards */
.why-us-card {
  padding: 40px 30px; /* Slightly more padding */
  border-radius: 12px; /* More rounded corners */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* Softer, modern shadow */
  transition: all 0.3s ease; /* Smooth transitions for hover */
  border: 1px solid rgba(0, 0, 0, 0.05); /* Subtle border */
}

.why-us-card:hover {
  transform: scale(1.03); /* Zoom effect on hover */
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
  border-color: rgba(66, 81, 249, 0.2); /* Primary color border on hover */
}

/* Adjust icon circle size for consistency if needed */
.why-us-card .icon-circle {
  width: 70px; /* Slightly larger icons */
  height: 70px;
  font-size: 2.2rem; /* Adjust icon size within circle */
  margin-bottom: 25px; /* Adjust margin below icon */
}

/* Dark mode adjustments for Why Choose Us cards */
.dark-mode .why-us-card {
  background-color: #1e1e1e !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .why-us-card:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
  border-color: rgba(0, 233, 253, 0.2) !important; /* Secondary color border on hover in dark mode */
}

.dark-mode .why-us-card .card-title {
  color: #ffffff !important;
}

.dark-mode .why-us-card p {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Ensure the icon colors are correct in dark mode */
.dark-mode .why-us-card .icon-circle.bg-primary {
  background-color: rgba(77, 163, 255, 0.2) !important; /* Dark mode primary background */
  color: #4da3ff !important; /* Dark mode primary text */
}

.dark-mode .why-us-card .icon-circle.bg-secondary {
  background-color: rgba(0, 233, 253, 0.2) !important; /* Dark mode secondary background */
  color: #00e9fd !important; /* Dark mode secondary text */
}

.dark-mode .why-us-card .icon-circle.bg-warning {
  background-color: rgba(247, 170, 61, 0.2) !important; /* Dark mode warning background */
  color: #f7aa3d !important; /* Dark mode warning text */
}

/* Add the following CSS rules to ensure correct spacing for sections and elements. */

/* 1. Add the following margin-bottom utility classes: */
.mb-80 {
  margin-bottom: 80px !important;
}

.mb-100 {
  margin-bottom: 100px !important;
}

.mb-120 {
  margin-bottom: 120px !important;
}

/* 2. Add the following padding utility classes to reinforce section spacing: */
.pt-120 {
  padding-top: 120px !important;
}

.pb-120 {
  padding-bottom: 120px !important;
}

.pt-100 {
  padding-top: 100px !important;
}

.pb-100 {
  padding-bottom: 100px !important;
}

/* New class for feature section buttons */
.btn-feature-card {
  padding: 15px 35px !important; /* Larger padding for these buttons */
  display: flex; /* Use flexbox to align text and icon */
  align-items: center; /* Vertically center items */
  justify-content: center; /* Horizontally center items */
  margin-top: auto; /* Push button to the bottom of the flex container */
}

.btn-feature-card img.svg {
  margin-left: 10px; /* Space between text and icon */
  width: 16px; /* Adjust icon size if needed */
  height: 16px; /* Adjust icon size if needed */
}

/* Feature Card Styling to match Attack Type Cards */
.features-section .card {
  border-radius: 12px; /* More rounded corners */
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08); /* Softer, modern shadow */
  transition: all 0.4s ease; /* Smooth transitions for hover */
  border: 1px solid rgba(0, 0, 0, 0.05); /* Re-add a subtle general border */
  border-bottom: 5px solid transparent; /* Add a thicker transparent bottom border for the "trail" */
}

.features-section .card.border-primary {
  border-bottom-color: #1f4dde; /* Primary color for bottom border */
}

.features-section .card.border-secondary {
  border-bottom-color: #00e9fd; /* Secondary color for bottom border */
}

.features-section .card.border-warning {
  border-bottom-color: #f7aa3d; /* Warning color for bottom border */
}

.features-section .card:hover {
  transform: translateY(-5px); /* Lift effect on hover */
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12); /* Enhanced shadow on hover */
  border-color: rgba(66, 81, 249, 0.2); /* This will apply to all sides on hover */
}

/* Dark mode adjustments for Feature Cards */
.dark-mode .features-section .card {
  background: #2a2a2a !important; /* Darker background for cards */
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important; /* General border in dark mode */
  border-bottom: 5px solid transparent; /* Thicker transparent bottom border for dark mode */
}

.dark-mode .features-section .card.border-primary {
  border-bottom-color: #4da3ff !important; /* Dark mode primary color */
}

.dark-mode .features-section .card.border-secondary {
  border-bottom-color: #00e9fd !important; /* Dark mode secondary color */
}

.dark-mode .features-section .card.border-warning {
  border-bottom-color: #f7aa3d !important; /* Dark mode warning color */
}

.dark-mode .features-section .card:hover {
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4) !important;
  border-color: rgba(0, 233, 253, 0.2) !important; /* Secondary color border on hover in dark mode */
}

/* Styles for feature card icons to match attack type cards */
.attack-icon {
  width: 70px;
  height: 70px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px;
  font-size: 1.8rem;
  color: white;
}

.attack-icon.blue {
  background: linear-gradient(135deg, #5c7cfa, #70a1ff);
}

.attack-icon.cyan {
  background: linear-gradient(135deg, #1dd1a1, #48dbfb);
}

.attack-icon.orange {
  background: linear-gradient(135deg, #ff6b81, #ff9f43);
}

/* Attack Type Card Styling */
.attack-type-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 40px 30px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
  height: 100%;
}

.attack-type-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Hardware cards should use full container width */
.hardware-overview .container {
  max-width: none !important; /* Remove any container width restrictions */
  width: 100% !important; /* Use full viewport width */
  padding-left: 20px;
  padding-right: 20px;
}

/* Alternative: Use container-fluid for this section */
.hardware-overview {
  width: 100%;
}

/* ===== NEW TESTIMONIALS SECTION ===== */

.testimonials-section {
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

.dark-mode .testimonials-section {
  background: linear-gradient(135deg, #1a1a1d 0%, #252529 100%) !important;
}

.testimonials-slider-wrapper {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}

.testimonials-slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
  gap: 0;
}

.testimonials-slide {
  min-width: 70%;
  display: flex;
  justify-content: center;
  padding: 0 15px;
}

.testimonial-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 35px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 360px;
  position: relative;
  min-height: 280px;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.dark-mode .testimonial-card {
  background: #2a2a2a !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .testimonial-card:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
}

.testimonial-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.testimonial-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 15px;
  object-fit: cover;
  border: 3px solid #f0f0f0;
}

.dark-mode .testimonial-avatar {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.testimonial-author-info h4 {
  margin: 0 0 5px 0;
  font-size: 18px;
  font-weight: 600;
  color: #192b41;
}

.dark-mode .testimonial-author-info h4 {
  color: #ffffff !important;
}

.testimonial-category {
  font-size: 14px;
  color: #666666;
  margin: 0;
}

.dark-mode .testimonial-category {
  color: rgba(255, 255, 255, 0.7) !important;
}

.testimonial-stars {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
}

.testimonial-stars i {
  color: #00b67a;
  font-size: 18px;
}

.testimonial-text {
  flex-grow: 1;
  margin-bottom: 25px;
}

.testimonial-text p {
  color: #444444;
  line-height: 1.7;
  margin: 0;
  font-size: 16px;
}

.dark-mode .testimonial-text p {
  color: rgba(255, 255, 255, 0.8) !important;
}

.testimonial-footer {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.dark-mode .testimonial-footer {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

.trustpilot-link {
  display: inline-flex;
  align-items: center;
  color: #00b67a;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.3s ease;
}

.trustpilot-link:hover {
  color: #008a5a;
  text-decoration: none;
}

.trustpilot-link i {
  margin-left: 5px;
  font-size: 12px;
}

/* Slider Navigation */
.testimonials-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 10;
}

.testimonials-prev,
.testimonials-next {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #192b41;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  pointer-events: all;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonials-prev:hover,
.testimonials-next:hover {
  background: #1f4dde;
  color: #ffffff;
  border-color: #1f4dde;
  transform: scale(1.1);
}

.dark-mode .testimonials-prev,
.dark-mode .testimonials-next {
  background: #2a2a2a !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .testimonials-prev:hover,
.dark-mode .testimonials-next:hover {
  background: #00e9fd !important;
  border-color: #00e9fd !important;
  color: #000000 !important;
}

.testimonials-prev {
  left: -25px;
}

.testimonials-next {
  right: -25px;
}

/* Slider Dots */
.testimonials-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.testimonials-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.testimonials-dot.active {
  background: #1f4dde;
  transform: scale(1.3);
}

.dark-mode .testimonials-dot {
  background: rgba(255, 255, 255, 0.3) !important;
}

.dark-mode .testimonials-dot.active {
  background: #00e9fd !important;
}

/* Trustpilot Info */
.trustpilot-info {
  margin-top: 50px;
}

.trustpilot-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 15px;
}

.trustpilot-stars {
  display: flex;
  gap: 3px;
}

.trustpilot-stars i {
  color: #00b67a;
  font-size: 20px;
}

.trustpilot-score {
  color: #666666;
  font-weight: 500;
}

.dark-mode .trustpilot-score {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
  .testimonials-slider-wrapper {
    max-width: 100%;
    padding: 0 10px;
  }

  .testimonial-card {
    padding: 25px;
    min-height: 250px;
  }

  .testimonials-prev,
  .testimonials-next {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .testimonials-prev {
    left: -15px;
  }

  .testimonials-next {
    right: -15px;
  }

  .trustpilot-rating {
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 576px) {
  .testimonials-nav {
    display: none;
  }

  .testimonials-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .testimonials-slider-wrapper {
    padding: 0 5px;
  }

  .testimonial-card {
    padding: 20px;
  }
}

/* Testimonials Slider Dragging Styles */
#new-testimonials-slider {
  cursor: grab; /* Default cursor for draggable element */
  user-select: none; /* Prevent text selection during drag */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

#new-testimonials-slider.is-dragging {
  cursor: grabbing; /* Cursor when actively dragging */
  transition: none !important; /* Override any default transition while dragging */
}

/* Custom CSS for modern dropdown menus */

/* Apply modern styling to the submenu */
.horizontal-menu .nav .submenu.modern-dropdown-menu {
  width: 300px; /* Adjust width as needed */
  padding: 10px;
  border-radius: 8px;
  background-color: #ffffff; /* White background */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Softer shadow */
  border: 1px solid rgba(0, 0, 0, 0.05);
  /* Override existing transition for a smoother slide-down */
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  transform: translate3d(0, -20px, 0); /* Start slightly above */
  top: 120%; /* Position below the parent link */
}

/* Ensure visibility and final position on hover */
.horizontal-menu .nav > li:hover > ul.modern-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0); /* Slide to final position */
  top: 100%; /* Ensure it aligns correctly */
}

/* Style individual dropdown items */
.horizontal-menu .nav .submenu.modern-dropdown-menu li {
  border-bottom: none; /* Remove default border */
}

.horizontal-menu .nav .submenu.modern-dropdown-menu li a.dropdown-item-modern {
  display: block; /* Changed to block to allow absolute positioning of icon */
  padding: 12px 15px 12px calc(15px + 40px + 12px); /* Adjust left padding for icon space */
  border-radius: 6px;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  color: #333333; /* Darker text for better contrast */
  line-height: normal; /* Reset line height */
  position: relative; /* For positioning the icon */
  min-height: 64px; /* Ensure enough height for icon (40px icon + padding) */
}

.horizontal-menu .nav .submenu.modern-dropdown-menu li a.dropdown-item-modern:hover {
  background-color: rgba(66, 81, 249, 0.08); /* Light primary color background on hover */
  color: #4251f9; /* Primary color text on hover */
}

/* Style the icon container */
.horizontal-menu .nav .submenu.modern-dropdown-menu .item-icon {
  position: absolute; /* Position icon absolutely */
  left: 15px; /* Align with padding */
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
  width: 40px; /* Enlarge the box */
  height: 40px; /* Enlarge the box */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px; /* This margin is now effectively handled by padding-left on the parent 'a' */
  border-radius: 8px; /* Round the box more */
  /* Default gradient, will be overridden by specific icon styles */
  background: linear-gradient(135deg, rgba(66, 81, 249, 0.2) 0%, rgba(66, 81, 249, 0.05) 100%);
}

.horizontal-menu .nav .submenu.modern-dropdown-menu .item-icon i {
  font-size: 18px; /* Enlarge the icon */
  color: #4251f9; /* Default icon color (primary blue) */
}

/* Style the text content */
.horizontal-menu .nav .submenu.modern-dropdown-menu .item-content {
  display: flex;
  flex-direction: column;
  /* flex-grow: 1; */ /* Not needed with block display on parent and padding */
  /* width: calc(100% - 52px); */ /* Not needed with block display on parent and padding */
  white-space: normal; /* Allow text to wrap naturally */
  word-wrap: break-word; /* Allow long words to break */
}

.horizontal-menu .nav .submenu.modern-dropdown-menu .item-title {
  font-weight: 600; /* Semi-bold for title */
  font-size: 16px;
  line-height: 1.2;
  margin-bottom: 2px;
  white-space: normal; /* Ensure text wraps */
  word-wrap: break-word; /* Break long words */
}

.horizontal-menu .nav .submenu.modern-dropdown-menu .item-description {
  font-size: 12px;
  color: #666666; /* Lighter color for description */
  line-height: 1.2;
  white-space: normal; /* Ensure text wraps */
  word-wrap: break-word; /* Break long words */
}

/* Specific gradients and colors for each icon type */
.horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(1) .item-icon {
  /* Standard Root Servers */
  background: linear-gradient(135deg, rgba(66, 81, 249, 0.2) 0%, rgba(66, 81, 249, 0.05) 100%);
}
.horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(1) .item-icon i {
  color: #4251f9;
}

.horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(2) .item-icon {
  /* Premium Root Servers */
  background: linear-gradient(135deg, rgba(0, 233, 253, 0.2) 0%, rgba(0, 233, 253, 0.05) 100%);
}
.horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(2) .item-icon i {
  color: #00e9fd;
}

.horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(3) .item-icon {
  /* High-End Root Servers */
  background: linear-gradient(135deg, rgba(247, 170, 61, 0.2) 0%, rgba(247, 170, 61, 0.05) 100%);
}
.horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(3) .item-icon i {
  color: #f7aa3d;
}

/* More Hosting submenu icons */
.horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(4) .item-icon {
  /* Storage-Cloud Hosting */
  background: linear-gradient(135deg, rgba(66, 81, 249, 0.2) 0%, rgba(66, 81, 249, 0.05) 100%);
}
.horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(4) .item-icon i {
  color: #4251f9;
}

.horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(5) .item-icon {
  /* Discord Bot Hosting */
  background: linear-gradient(135deg, rgba(0, 233, 253, 0.2) 0%, rgba(0, 233, 253, 0.05) 100%);
}
.horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(5) .item-icon i {
  color: #00e9fd;
}

.horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(6) .item-icon {
  /* Palworld Hosting */
  background: linear-gradient(135deg, rgba(247, 170, 61, 0.2) 0%, rgba(247, 170, 61, 0.05) 100%);
}
.horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(6) .item-icon i {
  color: #f7aa3d;
}

.horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(7) .item-icon {
  /* Roleplay Server Hosting */
  background: linear-gradient(135deg, rgba(66, 81, 249, 0.2) 0%, rgba(66, 81, 249, 0.05) 100%);
}
.horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(7) .item-icon i {
  color: #4251f9;
}

.horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(8) .item-icon {
  /* ARK Hosting */
  background: linear-gradient(135deg, rgba(0, 233, 253, 0.2) 0%, rgba(0, 233, 253, 0.05) 100%);
}
.horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(8) .item-icon i {
  color: #00e9fd;
}

/* Dark mode adjustments for icons and their backgrounds */
.dark-mode .horizontal-menu .nav .submenu.modern-dropdown-menu .item-icon {
  background: linear-gradient(135deg, rgba(77, 163, 255, 0.2) 0%, rgba(77, 163, 255, 0.05) 100%) !important;
}

.dark-mode .horizontal-menu .nav .submenu.modern-dropdown-menu .item-icon i {
  color: #4da3ff !important;
}

.dark-mode .horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(2) .item-icon {
  background: linear-gradient(135deg, rgba(0, 233, 253, 0.2) 0%, rgba(0, 233, 253, 0.05) 100%) !important;
}
.dark-mode .horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(2) .item-icon i {
  color: #00e9fd !important;
}

.dark-mode .horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(3) .item-icon {
  background: linear-gradient(135deg, rgba(247, 170, 61, 0.2) 0%, rgba(247, 170, 61, 0.05) 100%) !important;
}
.dark-mode .horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(3) .item-icon i {
  color: #f7aa3d !important;
}

.dark-mode .horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(4) .item-icon {
  background: linear-gradient(135deg, rgba(77, 163, 255, 0.2) 0%, rgba(77, 163, 255, 0.05) 100%) !important;
}
.dark-mode .horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(4) .item-icon i {
  color: #4da3ff !important;
}

.dark-mode .horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(5) .item-icon {
  background: linear-gradient(135deg, rgba(0, 233, 253, 0.2) 0%, rgba(0, 233, 253, 0.05) 100%) !important;
}
.dark-mode .horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(5) .item-icon i {
  color: #00e9fd !important;
}

.dark-mode .horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(6) .item-icon {
  background: linear-gradient(135deg, rgba(247, 170, 61, 0.2) 0%, rgba(247, 170, 61, 0.05) 100%) !important;
}
.dark-mode .horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(6) .item-icon i {
  color: #f7aa3d !important;
}

.dark-mode .horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(7) .item-icon {
  background: linear-gradient(135deg, rgba(77, 163, 255, 0.2) 0%, rgba(77, 163, 255, 0.05) 100%) !important;
}
.dark-mode .horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(7) .item-icon i {
  color: #4da3ff !important;
}

.dark-mode .horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(8) .item-icon {
  background: linear-gradient(135deg, rgba(0, 233, 253, 0.2) 0%, rgba(0, 233, 253, 0.05) 100%) !important;
}
.dark-mode .horizontal-menu .nav .submenu.modern-dropdown-menu li:nth-child(8) .item-icon i {
  color: #00e9fd !important;
}

/* Ensure the default nav-tag is hidden for modern dropdowns */
.horizontal-menu .nav .submenu.modern-dropdown-menu .nav-tag {
  display: none;
}

/* Dark mode styles for comparison table */
.dark-mode .comparison-table {
  background: #2a2a2a !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .comparison-header {
  background: linear-gradient(135deg, #4251f9, #00e9fd) !important;
  color: white !important;
}

.dark-mode .comparison-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .comparison-cell {
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.dark-mode .comparison-cell.header {
  background: #1e1e1e !important;
  color: #ffffff !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .comparison-cell:last-child {
  border-right: none !important;
}

@media (max-width: 768px) {
  .dark-mode .comparison-cell {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
}

/* Custom container for hardware section - wider than default but not full width */
.hardware-container {
  max-width: 1400px !important; /* Breiter als der Standard-Container (1140px) */
}

/* Ensure hardware cards are properly centered and spaced */
.hardware-overview {
  justify-content: center;
}

.hardware-overview .col-lg-4,
.hardware-overview .col-md-6 {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.hardware-overview .hardware-card {
  width: 100%;
  max-width: 400px; /* Maximale Breite für die Karten */
}

/* Stats counter styling */
.stats-counter {
  font-size: 3rem;
  font-weight: 700;
  color: #4251f9;
  margin-bottom: 10px;
}

.stats-label {
  font-size: 1rem;
  color: #666666;
  font-weight: 500;
}

.dark-mode .stats-counter {
  color: #00e9fd !important;
}

.dark-mode .stats-label {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Responsive adjustments for hardware container */
@media (max-width: 1199px) {
  .hardware-container {
    max-width: 960px !important;
  }
}

@media (max-width: 991px) {
  .hardware-container {
    max-width: 720px !important;
  }

  .hardware-overview .col-md-6 {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .hardware-container {
    max-width: 540px !important;
  }

  .hardware-overview .col-md-6 {
    max-width: 100%;
  }
}

@media (max-width: 575px) {
  .hardware-container {
    max-width: 100% !important;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ===== MODERN PRODUCT CARDS REDESIGN ===== */

/* Modern Pricing Table Items */
.pricing-table-item {
  background: #ffffff;
  border-radius: 20px !important;
  padding: 40px 30px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 20px 0 !important; /* Oben und unten 20px Abstand */
}

/* Zusätzliche Spacing-Fixes für Pricing Cards */
.pricing-table-group .col-lg-3,
.pricing-table-group .col-md-6,
.pricing-table-group .col-sm-6 {
  margin-bottom: 40px !important; /* Abstand zwischen den Reihen */
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Spezielle Behandlung für die letzte Reihe */
.pricing-table-group .row:last-child .col-lg-3,
.pricing-table-group .row:last-child .col-md-6,
.pricing-table-group .row:last-child .col-sm-6 {
  margin-bottom: 0 !important;
}

/* Für alle Pricing Sections */
section:has(.pricing-table-item) .col-lg-3,
section:has(.pricing-table-item) .col-md-6,
section:has(.pricing-table-item) .col-sm-6 {
  margin-bottom: 40px !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Override für no-gutters in Pricing Sections */
.row.no-gutters:has(.pricing-table-item) {
  margin-left: -15px !important;
  margin-right: -15px !important;
}

.row.no-gutters:has(.pricing-table-item) > [class*="col-"] {
  padding-left: 15px !important;
  padding-right: 15px !important;
  margin-bottom: 40px !important;
}

/* Hover-Effekt für Product Cards */
.pricing-table-item:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
  border-color: rgba(66, 81, 249, 0.2) !important;
}

/* Gradient Overlay für Premium Cards */
.pricing-table-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #4251f9 0%, #00e9fd 100%);
  border-radius: 20px 20px 0 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pricing-table-item:hover::before {
  opacity: 1;
}

/* Spezielle Styling für Badge Cards */
.pricing-table-item .badge-container {
  position: absolute;
  top: -1px;
  right: -1px;
  z-index: 10;
}

.pricing-table-item .badge {
  background: linear-gradient(135deg, #00e9fd 0%, #01c1fc 100%) !important;
  color: #ffffff !important;
  padding: 8px 20px !important;
  border-radius: 0 20px 0 15px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(0, 233, 253, 0.3);
}

/* Modernisierte Preisanzeige */
.pricing-table-item .table-price {
  font-size: 48px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #4251f9 0%, #00e9fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 15px !important;
  line-height: 1.2 !important;
}

.pricing-table-item .table-price small {
  font-size: 16px !important;
  color: #666666 !important;
  font-weight: 500 !important;
  -webkit-text-fill-color: #666666 !important;
}

.pricing-table-item .table-price sup {
  font-size: 24px !important;
  -webkit-text-fill-color: transparent !important;
}

/* Modernisierte Titel */
.pricing-table-item .table-title {
  margin-bottom: 30px !important;
  position: relative;
}

.pricing-table-item .table-title p {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #192b41 !important;
  margin-bottom: 8px !important;
}

.pricing-table-item .table-title::before,
.pricing-table-item .table-title::after {
  display: none !important; /* Entferne die alten Linien */
}

/* Modernisierte Feature Liste */
.pricing-table-item .feature-list {
  flex-grow: 1;
  margin-bottom: 0px !important;
  padding: 0 !important;
}

.pricing-table-item .feature-list li {
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  color: #555555 !important;
  position: relative;
  padding-left: 25px !important;
}

.pricing-table-item .feature-list li:last-child {
  border-bottom: none !important;
}

/* Checkmark Icons für Features */
.pricing-table-item .feature-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 12px;
  color: #00e9fd;
  font-weight: bold;
  font-size: 14px;
}

/* Hervorhebung für wichtige Features */
.pricing-table-item .feature-list li.fw-medium {
  font-weight: 600 !important;
  color: #192b41 !important;
  border-bottom: 2px solid rgba(66, 81, 249, 0.1) !important;
  padding-bottom: 15px !important;
  margin-bottom: 15px !important;
}

.pricing-table-item .feature-list li.fw-medium::before {
  content: "⚡";
  color: #4251f9;
}

/* Modernisierte Buttons */
.pricing-table-item .pt-button {
  background: linear-gradient(135deg, #4251f9 0%, #00e9fd 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 15px 30px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  text-transform: none !important;
  letter-spacing: 0.3px;
  box-shadow: 0 8px 25px rgba(66, 81, 249, 0.3) !important;
  transition: all 0.3s ease !important;
  margin-top: auto; /* Push button to bottom */
}

.pricing-table-item .pt-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 35px rgba(66, 81, 249, 0.4) !important;
  background: linear-gradient(135deg, #00e9fd 0%, #4251f9 100%) !important;
}

/* Spezielle Styling für "Brand New" und "Bestseller" Cards */
.pricing-table-item:has(.badge) {
  border: 2px solid rgba(0, 233, 253, 0.2) !important;
}

.pricing-table-item:has(.badge):hover {
  border-color: rgba(0, 233, 253, 0.4) !important;
  box-shadow: 0 20px 60px rgba(0, 233, 253, 0.2) !important;
}

/* ===== WICHTIGE FIXES FÜR PRICING CARD SPACING ===== */

/* Stelle sicher, dass alle Pricing Cards ordentliche Abstände haben */
.row.no-gutters .col-lg-3,
.row.no-gutters .col-md-6 {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Spezielle Behandlung für no-gutters Rows mit Pricing Cards */
.row.no-gutters:has(.pricing-table-item) {
  margin-left: -15px !important;
  margin-right: -15px !important;
}

.row.no-gutters:has(.pricing-table-item) > [class*="col-"] {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Dark Mode Anpassungen für moderne Product Cards */
.dark-mode .pricing-table-item {
  background: #2a2a2a !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .pricing-table-item:hover {
  border-color: rgba(0, 233, 253, 0.3) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
}

.dark-mode .pricing-table-item .table-price {
  background: linear-gradient(135deg, #00e9fd 0%, #4da3ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark-mode .pricing-table-item .table-price small {
  color: rgba(255, 255, 255, 0.7) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
}

.dark-mode .pricing-table-item .table-title p {
  color: #ffffff !important;
}

.dark-mode .pricing-table-item .feature-list li {
  color: rgba(255, 255, 255, 0.8) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .pricing-table-item .feature-list li.fw-medium {
  color: #ffffff !important;
  border-bottom-color: rgba(0, 233, 253, 0.2) !important;
}

.dark-mode .pricing-table-item .feature-list li::before {
  color: #00e9fd !important;
}

.dark-mode .pricing-table-item .feature-list li.fw-medium::before {
  color: #00e9fd !important;
}

.dark-mode .pricing-table-item .pt-button {
  background: linear-gradient(135deg, #00e9fd 0%, #4da3ff 100%) !important;
  box-shadow: 0 8px 25px rgba(0, 233, 253, 0.3) !important;
}

.dark-mode .pricing-table-item .pt-button:hover {
  background: linear-gradient(135deg, #4da3ff 0%, #00e9fd 100%) !important;
  box-shadow: 0 12px 35px rgba(0, 233, 253, 0.4) !important;
}

.pricing-table-item:has(.badge) {
  border: 2px solid rgba(0, 233, 253, 0.3) !important;
}

.pricing-table-item:has(.badge):hover {
  border-color: rgba(0, 233, 253, 0.5) !important;
  box-shadow: 0 20px 60px rgba(0, 233, 253, 0.2) !important;
}

/* Pricing Container - Breitere Container für Pricing Cards */
.pricing-container {
  max-width: 1600px;
  width: 95%;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Responsive Anpassungen für Pricing Container */
@media (max-width: 1400px) {
  .pricing-container {
    max-width: 1200px;
  }
}

@media (max-width: 1200px) {
  .pricing-container {
    max-width: 960px;
  }
}

@media (max-width: 768px) {
  .pricing-container {
    width: 100%;
    max-width: none;
    padding-left: 15px;
    padding-right: 15px;
  }

  .pricing-table-item {
    padding: 30px 20px !important;
    margin-bottom: 30px !important;
  }

  .pricing-table-item .table-price {
    font-size: 40px !important;
  }

  .pricing-table-item .table-title p {
    font-size: 20px !important;
  }

  .pricing-table-item .pt-button {
    padding: 12px 25px !important;
    font-size: 15px !important;
  }

  /* Mobile Spacing für no-gutters Rows */
  .row.no-gutters:has(.pricing-table-item) > [class*="col-"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* Spezielle Animationen für Card Entrance */
@keyframes cardFadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pricing-table-item {
  animation: cardFadeInUp 0.6s ease-out;
}

/* Staggered Animation für mehrere Cards */
.pricing-table-item:nth-child(1) {
  animation-delay: 0.1s;
}
.pricing-table-item:nth-child(2) {
  animation-delay: 0.2s;
}
.pricing-table-item:nth-child(3) {
  animation-delay: 0.3s;
}
.pricing-table-item:nth-child(4) {
  animation-delay: 0.4s;
}
.pricing-table-item:nth-child(5) {
  animation-delay: 0.5s;
}
.pricing-table-item:nth-child(6) {
  animation-delay: 0.6s;
}
.pricing-table-item:nth-child(7) {
  animation-delay: 0.7s;
}
.pricing-table-item:nth-child(8) {
  animation-delay: 0.8s;
}

/* Micro-Interaktionen für bessere UX */
.pricing-table-item .pt-button {
  position: relative;
  overflow: hidden;
}

.pricing-table-item .pt-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.pricing-table-item .pt-button:hover::before {
  left: 100%;
}

/* Verbesserte Badge Styles */
.pricing-table-item .badge {
  position: relative;
  overflow: hidden;
}

.pricing-table-item .badge::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 2s;
}

.pricing-table-item:hover .badge::before {
  left: 100%;
}

/* ===== HOSTSYSTEM SPECIFICATIONS CARD STYLING ===== */

.hostsystem-card {
  background: #ffffff;
  border-radius: 20px;
  /* Enhanced shadow and border with gradient effect */
  box-shadow: 0 10px 40px rgba(66, 81, 249, 0.08), 0 4px 20px rgba(0, 233, 253, 0.05);
  border: 2px solid transparent;
  background-clip: padding-box;
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 60px;
  overflow: hidden;
  /* Reduced bottom padding from 40px to 25px to decrease margin to bottom of card */
  padding: 40px 30px 25px 30px;
}

.hostsystem-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Increased icon size to maintain proper proportions when positioned next to spec cards */
  width: 120px;
  height: 120px;
  /* Enhanced gradient background with animation */
  background: linear-gradient(135deg, rgba(66, 81, 249, 0.15) 0%, rgba(0, 233, 253, 0.15) 100%);
  border-radius: 25px;
  margin: 0 auto;
  position: relative;
  transition: all 0.3s ease;
  /* Added flex-shrink to prevent icon from shrinking in flex layout */
  flex-shrink: 0;
}

/* Added pulsing animation for icon */
.hostsystem-icon::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, #4251f9 0%, #00e9fd 100%);
  border-radius: 27px;
  z-index: -1;
  opacity: 0;
  animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
  0%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(1.05);
  }
}

.hostsystem-card:hover .hostsystem-icon {
  transform: scale(1.1);
  background: linear-gradient(135deg, rgba(66, 81, 249, 0.2) 0%, rgba(0, 233, 253, 0.2) 100%);
}

.hostsystem-content h4 {
  color: #192b41;
  font-size: 28px;
  margin-bottom: 25px;
  /* Added text-align center to override any inherited alignment */
  text-align: center;
  /* Added gradient text effect */
  background: linear-gradient(135deg, #192b41 0%, #4251f9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

.spec-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px 15px;
  border-radius: 12px;
  transition: all 0.3s ease;
  position: relative;
  /* Removed margin-bottom to eliminate extra spacing between rows */
  margin-bottom: 0;
}

.spec-item:hover {
  background: rgba(66, 81, 249, 0.03);
  transform: translateX(5px);
}

.spec-item i {
  margin-top: 0; /* Removed margin-top since we're using center alignment */
  flex-shrink: 0;
  /* Enhanced icon styling with glow effect */
  font-size: 20px; /* Increased icon size from 18px to 20px */
  padding: 10px; /* Increased padding from 8px to 10px */
  background: rgba(0, 233, 253, 0.1);
  border-radius: 10px; /* Increased border-radius from 8px to 10px */
  transition: all 0.3s ease;
  width: 40px; /* Added fixed width for consistent icon container size */
  height: 40px; /* Added fixed height for consistent icon container size */
  display: flex; /* Added flex display for perfect icon centering */
  align-items: center; /* Center icon vertically */
  justify-content: center; /* Center icon horizontally */
}

.spec-item:hover i {
  background: rgba(0, 233, 253, 0.2);
  box-shadow: 0 4px 15px rgba(0, 233, 253, 0.3);
}

.spec-item span {
  font-size: 16px; /* Increased font size from 15px to 16px for better readability */
  line-height: 1.4; /* Adjusted line-height from 1.5 to 1.4 for tighter text */
  color: #555555;
  flex: 1; /* Added flex: 1 to ensure text takes remaining space */
  display: flex; /* Added flex display for better text alignment */
  flex-direction: column; /* Stack text vertically if needed */
  justify-content: center; /* Center text vertically within its container */
}

.spec-item strong {
  color: #192b41;
  font-weight: 700;
  /* Added subtle gradient to strong text */
  background: linear-gradient(135deg, #192b41 0%, #4251f9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Dark Mode für Hostsystem Card */
.dark-mode .hostsystem-card {
  background: #2a2a2a !important;
  border: 2px solid transparent !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 4px 20px rgba(77, 163, 255, 0.1) !important;
}

.dark-mode .hostsystem-card::before {
  background: linear-gradient(
    135deg,
    rgba(77, 163, 255, 0.2) 0%,
    rgba(0, 233, 253, 0.2) 50%,
    rgba(77, 163, 255, 0.2) 100%
  ) !important;
}

.dark-mode .hostsystem-card:hover {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 8px 30px rgba(77, 163, 255, 0.2) !important;
}

.dark-mode .hostsystem-icon {
  background: linear-gradient(135deg, rgba(77, 163, 255, 0.2) 0%, rgba(0, 233, 253, 0.2) 100%) !important;
}

.dark-mode .hostsystem-card:hover .hostsystem-icon {
  background: linear-gradient(135deg, rgba(77, 163, 255, 0.3) 0%, rgba(0, 233, 253, 0.3) 100%) !important;
}

.dark-mode .hostsystem-content h4 {
  background: linear-gradient(135deg, #ffffff 0%, #4da3ff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.dark-mode .spec-item:hover {
  background: rgba(77, 163, 255, 0.1) !important;
}

.dark-mode .spec-item i {
  background: rgba(0, 233, 253, 0.15) !important;
}

.dark-mode .spec-item:hover i {
  background: rgba(0, 233, 253, 0.25) !important;
}

.dark-mode .spec-item span {
  color: rgba(255, 255, 255, 0.85) !important;
}

.dark-mode .spec-item strong {
  background: linear-gradient(135deg, #ffffff 0%, #4da3ff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Responsive für Hostsystem Card */
@media (max-width: 768px) {
  .hostsystem-card {
    /* Updated mobile padding to maintain proper spacing */
    padding: 30px 20px !important;
    text-align: center !important;
  }

  .hostsystem-content {
    text-align: center !important;
  }

  .hostsystem-content h4 {
    font-size: 24px !important;
  }

  /* Updated mobile layout for 2x2 grid - stack items vertically on mobile */
  .spec-item {
    justify-content: flex-start;
    text-align: left;
    flex-direction: row;
    gap: 15px;
    padding: 20px 15px;
    /* Removed min-height: auto override to allow natural sizing */
  }

  .spec-item i {
    margin-top: 0;
    align-self: flex-start;
    width: 36px;
    height: 36px;
    font-size: 18px;
    padding: 8px;
  }

  .spec-item span {
    justify-content: flex-start;
    text-align: left;
  }
}

@media (max-width: 576px) {
  .hostsystem-card {
    margin-top: 40px;
    /* Reduced padding for very small screens */
    padding: 25px 15px !important;
  }

  .hostsystem-content h4 {
    font-size: 22px !important;
  }

  .spec-item span {
    font-size: 14px !important;
  }

  .hostsystem-icon {
    /* Increased mobile icon size to maintain visibility */
    width: 90px !important;
    height: 90px !important;
  }
}

/* ===== MODERN HOSTSYSTEM SPECIFICATIONS DISPLAY ===== */

.hostsystem-specs-section {
  padding: 60px 0;
  background: transparent;
  position: relative;
  overflow: hidden;
}

.dark-mode .hostsystem-specs-section {
  background: transparent !important;
}

.hostsystem-specs-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 50px 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
}

.hostsystem-specs-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #8b5cf6 0%, #3b82f6 100%);
  border-radius: 24px 24px 0 0;
}

.dark-mode .hostsystem-specs-card {
  background: #2a2a2a !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
}

.specs-header {
  text-align: center;
  margin-bottom: 50px;
}

.specs-title {
  font-size: 32px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.specs-subtitle {
  font-size: 16px;
  color: #6b7280;
  margin: 0;
  font-weight: 400;
}

.dark-mode .specs-subtitle {
  color: rgba(255, 255, 255, 0.7) !important;
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 900px;
  margin: 0 auto;
}

.spec-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 25px;
  background: #f1f5f9;
  border-radius: 16px;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.spec-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(139, 92, 246, 0.15);
  background: #ffffff;
  border-color: rgba(139, 92, 246, 0.2);
}

.dark-mode .spec-card {
  background: #1e1e1e !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .spec-card:hover {
  background: #2a2a2a !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
}

.spec-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
  color: #ffffff;
  font-size: 24px;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3);
}

.spec-content {
  flex: 1;
}

.spec-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.spec-detail {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
  font-weight: 400;
}

.dark-mode .spec-title {
  color: #ffffff !important;
}

.dark-mode .spec-detail {
  color: rgba(255, 255, 255, 0.7) !important;
}

.specs-footer {
  text-align: center;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.dark-mode .specs-footer {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

.specs-note {
  font-size: 14px;
  color: #6b7280;
  font-style: italic;
  margin: 0;
}

.dark-mode .specs-note {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
  .hostsystem-specs-section {
    padding: 40px 0;
  }

  .hostsystem-specs-card {
    padding: 30px 20px;
    border-radius: 16px;
  }

  .specs-title {
    font-size: 24px;
  }

  .specs-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .spec-card {
    padding: 20px;
  }

  .spec-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }

  .spec-title {
    font-size: 16px;
  }

  .spec-detail {
    font-size: 13px;
  }
}

@media (max-width: 576px) {
  .specs-header {
    margin-bottom: 30px;
  }

  .specs-title {
    font-size: 22px;
  }

  .spec-card {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .spec-content {
    text-align: center;
  }
}

/* ===== INFRASTRUCTURE SPECIFICATIONS CARD STYLING ===== */

.infrastructure-specs-section {
  padding: 60px 0;
  background: transparent;
  position: relative;
  overflow: hidden;
}

.dark-mode .infrastructure-specs-section {
  background: transparent !important;
}

.infrastructure-specs-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 50px 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
}

.infrastructure-specs-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #8b5cf6 0%, #3b82f6 100%);
  border-radius: 24px 24px 0 0;
}

.dark-mode .infrastructure-specs-card {
  background: #2a2a2a !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
}

.infrastructure-title-section {
  text-align: center;
  margin-bottom: 50px;
}

.infrastructure-title {
  font-size: 32px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.infrastructure-subtitle {
  font-size: 16px;
  color: #6b7280;
  margin: 0;
  font-weight: 400;
}

.dark-mode .infrastructure-subtitle {
  color: rgba(255, 255, 255, 0.7) !important;
}

.infrastructure-spec-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 25px;
  background: #f1f5f9;
  border-radius: 16px;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.infrastructure-spec-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(139, 92, 246, 0.15);
  background: #ffffff;
  border-color: rgba(139, 92, 246, 0.2);
}

.dark-mode .infrastructure-spec-item {
  background: #1e1e1e !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .infrastructure-spec-item:hover {
  background: #2a2a2a !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
}

.infrastructure-spec-item .spec-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
  color: #ffffff;
  font-size: 24px;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3);
}

.infrastructure-spec-item .spec-content {
  flex: 1;
}

.infrastructure-spec-item .spec-content h4 {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.infrastructure-spec-item .spec-content p {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
  font-weight: 400;
}

.dark-mode .infrastructure-spec-item .spec-content h4 {
  color: #ffffff !important;
}

.dark-mode .infrastructure-spec-item .spec-content p {
  color: rgba(255, 255, 255, 0.7) !important;
}

.infrastructure-note {
  font-size: 14px;
  color: #6b7280;
  font-style: italic;
  margin: 0;
}

.dark-mode .infrastructure-note {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Responsive Design for Infrastructure Specs */
@media (max-width: 768px) {
  .infrastructure-specs-section {
    padding: 40px 0;
  }

  .infrastructure-specs-card {
    padding: 30px 20px;
    border-radius: 16px;
  }

  .infrastructure-title {
    font-size: 24px;
  }

  .infrastructure-spec-item {
    padding: 20px;
  }

  .infrastructure-spec-item .spec-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }

  .infrastructure-spec-item .spec-content h4 {
    font-size: 16px;
  }

  .infrastructure-spec-item .spec-content p {
    font-size: 13px;
  }
}

@media (max-width: 576px) {
  .infrastructure-title-section {
    margin-bottom: 30px;
  }

  .infrastructure-title {
    font-size: 22px;
  }

  .infrastructure-spec-item {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
}