/* ========================================
   CENTURION GMBH - PROFESSIONAL DESIGN
   Clean, Consistent, Complete
   ======================================== */

/* =========================
   GLOBAL SETTINGS
   ========================= */

* {
  --primary-color: #C0C0C0;
  --primary-color-rgb: 192, 192, 192;
  --secondary-color: #A0A0A0;
  --accent-color: #E0E0E0;
  --bg-dark-1: #000000;
  --bg-dark-2: #0A0A0A;
  --bg-dark-3: #1A1A1A;
  --bg-dark-1-rgb: 0, 0, 0;
  --text-primary: #FFFFFF;
  --text-secondary: #C0C0C0;
  --text-tertiary: #808080;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  animation-duration: 0s !important;
  transition-duration: 0.2s !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* =========================
   HEADER
   ========================= */

header {
  background: rgba(0, 0, 0, 0.95) !important;
  backdrop-filter: blur(20px) !important;
}

#topbar {
  background: rgba(0, 0, 0, 0.5) !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

@media (max-width: 991px) {
  #topbar {
    display: none !important;
  }

  header.header-mobile {
    min-height: 80px !important;
    padding: 20px 0 !important;
  }

  #logo img {
    height: 40px !important;
  }

  #menu-btn {
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
  }

  /* Mobile Navigation - KRASSER WOW EFFEKT - Größere Fonts */
  #extra-content {
    padding: 50px 30px 80px 30px !important;
    max-width: 100% !important;
  }

  #extra-content img {
    width: 160px !important;
  }

  #extra-content h5 {
    font-size: 17px !important;
    margin-top: 35px !important;
    margin-bottom: 22px !important;
  }

  #extra-content ul.ul-check li {
    font-size: 20px !important;
    margin-bottom: 18px !important;
  }

  #extra-content ul.ul-check li a {
    font-size: 20px !important;
    padding: 12px 0 !important;
    font-weight: 500 !important;
  }

  #extra-content > div {
    font-size: 17px !important;
    line-height: 2.2 !important;
    margin-bottom: 16px !important;
  }

  #extra-content > div i {
    font-size: 18px !important;
  }

  #extra-content p {
    font-size: 17px !important;
    line-height: 1.8 !important;
  }

  #extra-content .social-icons a {
    width: 52px !important;
    height: 52px !important;
    font-size: 20px !important;
  }

  #btn-close {
    width: 52px !important;
    height: 52px !important;
    top: 30px !important;
    right: 30px !important;
  }
}

/* =========================
   TYPOGRAPHY
   ========================= */

body {
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #FFFFFF !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

h1 {
  font-size: 56px !important;
}

h2 {
  font-size: 42px !important;
  margin-bottom: 20px !important;
}

h3 {
  font-size: 32px !important;
  margin-bottom: 16px !important;
}

h4 {
  font-size: 24px !important;
  margin-bottom: 12px !important;
}

p {
  margin-bottom: 20px !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.id-color {
  color: #C0C0C0 !important;
}

.id-color-2 {
  color: #A0A0A0 !important;
}

.subtitle {
  color: #C0C0C0 !important;
  font-weight: 500 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  margin-bottom: 12px !important;
  display: block !important;
}

@media (max-width: 991px) {
  h1 {
    font-size: 36px !important;
  }

  h2 {
    font-size: 32px !important;
  }

  h3 {
    font-size: 24px !important;
  }

  h4 {
    font-size: 20px !important;
  }
}

/* =========================
   BUTTONS
   ========================= */

.btn-main,
.btn-line {
  border-radius: 980px !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  min-height: 42px !important;
}

.btn-main {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
}

.btn-main:hover {
  background: #D8D8D8 !important;
  border-color: #D8D8D8 !important;
  color: #000000 !important;
}

.btn-main span {
  color: inherit !important;
}

.btn-main:hover span {
  color: #000000 !important;
}

.btn-line {
  background: transparent !important;
  border: 1px solid rgba(192, 192, 192, 0.3) !important;
  color: #C0C0C0 !important;
}

.btn-line:hover {
  background: #D8D8D8 !important;
  border-color: #D8D8D8 !important;
  color: #000000 !important;
}

.btn-line span {
  color: inherit !important;
}

.btn-line:hover span {
  color: #000000 !important;
}

.btn-main.fx-slide:hover::before,
.btn-line.fx-slide:hover::before {
  color: #000000 !important;
}

.btn-main.fx-slide::before,
.btn-line.fx-slide::before {
  color: inherit !important;
}

@media (max-width: 991px) {
  .btn-main,
  .btn-line {
    padding: 16px 32px !important;
    font-size: 16px !important;
    min-height: 48px !important;
  }
}

/* =========================
   HERO SECTION
   ========================= */

section.jarallax {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}

section.jarallax .container {
  padding-top: 140px !important;
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 991px) {
  section.jarallax {
    margin-bottom: 60px !important;
  }

  section.jarallax .container {
    padding-top: 120px !important;
  }
}

/* =========================
   ABOUT SECTION IMAGES
   ========================= */

@media (min-width: 992px) {
  .col-lg-6 .row.g-4 .col-sm-6 {
    display: block !important;
  }
}

@media (max-width: 991px) {
  .col-lg-6 .row.g-4 .col-sm-6:nth-child(2) {
    display: none !important;
  }

  .col-lg-6 .row.g-4 .col-sm-6:first-child {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* =========================
   SERVICE CARDS
   ========================= */

.hover.rounded-1.overflow-hidden {
  border-radius: 12px !important;
  border: 1px solid rgba(192, 192, 192, 0.1) !important;
  background: #000000;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
}

.hover.rounded-1.overflow-hidden:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(192, 192, 192, 0.25) !important;
  box-shadow: 0 8px 24px rgba(192, 192, 192, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.hover.rounded-1.overflow-hidden img {
  filter: brightness(0.8) !important;
}

/* Text unten immer sichtbar */
.hover.rounded-1.overflow-hidden .abs.bottom-0 {
  opacity: 1 !important;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.6), transparent) !important;
  padding: 24px 20px !important;
}

.hover.rounded-1.overflow-hidden .abs.bottom-0 h4 {
  color: #FFFFFF !important;
}

.hover.rounded-1.overflow-hidden .abs.bottom-0 p {
  color: #C0C0C0 !important;
}

/* Hide center hover content */
.hover.rounded-1.overflow-hidden .abs.abs-centered {
  display: none !important;
}

.hover.rounded-1.overflow-hidden .abs.bg-blur {
  display: none !important;
}

/* =========================
   PROJECT CARDS
   ========================= */

/* Erfolgreiche Projekte - Attraktive Cards mit Silver-Gray Overlay */
section.bg-dark .hover.rounded-1.overflow-hidden {
  border-radius: 16px !important;
  border: 1px solid rgba(192, 192, 192, 0.15) !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 1 !important;
  position: relative !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: #000000 !important;
}

section.bg-dark .hover.rounded-1.overflow-hidden:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 8px 35px rgba(192, 192, 192, 0.25) !important;
  border-color: rgba(192, 192, 192, 0.35) !important;
}

/* Image Styling */
section.bg-dark .hover.rounded-1.overflow-hidden img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 1 !important;
  filter: brightness(0.8) !important;
  transition: all 0.4s ease !important;
}

section.bg-dark .hover.rounded-1.overflow-hidden:hover img {
  transform: scale(1.08) !important;
  filter: brightness(0.55) !important;
}

/* Hide old overlays */
section.bg-dark .hover.rounded-1.overflow-hidden .abs.bg-dark {
  display: none !important;
}

section.bg-dark .hover.rounded-1.overflow-hidden .abs.abs-centered {
  display: none !important;
}

/* Bottom Silver-Gray Gradient - Always Visible */
section.bg-dark .hover.rounded-1.overflow-hidden::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 65% !important;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.98) 0%,
    rgba(15, 15, 15, 0.9) 25%,
    rgba(35, 35, 35, 0.65) 50%,
    rgba(55, 55, 55, 0.35) 75%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  transition: all 0.3s ease !important;
}

section.bg-dark .hover.rounded-1.overflow-hidden:hover::after {
  height: 70% !important;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(20, 20, 20, 0.95) 30%,
    rgba(50, 50, 50, 0.75) 60%,
    rgba(80, 80, 80, 0.4) 85%,
    transparent 100%
  ) !important;
}

/* Bottom Text Container - Always Visible */
section.bg-dark .hover.rounded-1.overflow-hidden .abs.bottom-0 {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 24px !important;
  z-index: 2 !important;
  background: none !important;
  opacity: 1 !important;
}

/* Title Styling - Always Visible */
section.bg-dark .hover.rounded-1.overflow-hidden h4 {
  position: relative !important;
  z-index: 2 !important;
  color: #FFFFFF !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
  transition: all 0.3s ease !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

section.bg-dark .hover.rounded-1.overflow-hidden:hover h4 {
  color: #E0E0E0 !important;
  transform: translateY(-4px) !important;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.7) !important;
}

/* Description Text - Always Visible */
section.bg-dark .hover.rounded-1.overflow-hidden p {
  position: relative !important;
  z-index: 2 !important;
  color: rgba(200, 200, 200, 0.95) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  transition: all 0.3s ease !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}

section.bg-dark .hover.rounded-1.overflow-hidden:hover p {
  color: rgba(230, 230, 230, 1) !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7) !important;
}

/* =========================
   HOVER EFFECTS
   ========================= */

.hover {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover:hover {
  transform: translateY(-4px);
}

/* =========================
   ICONS
   ========================= */

.icofont.id-color,
i.id-color {
  color: #C0C0C0 !important;
  transition: all 0.3s ease;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.icofont.id-color:hover,
i.id-color:hover {
  color: #E0E0E0 !important;
  transform: scale(1.1) !important;
  filter: drop-shadow(0 4px 8px rgba(192, 192, 192, 0.3)) !important;
  text-shadow: 0 4px 8px rgba(192, 192, 192, 0.4);
}

/* =========================
   BORDERS
   ========================= */

.border-color {
  border-color: rgba(192, 192, 192, 0.2) !important;
}

/* =========================
   BACKGROUNDS
   ========================= */

.bg-color,
.chrome-highlight {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.08) 0%, rgba(160, 160, 160, 0.05) 100%) !important;
  border: 1px solid rgba(192, 192, 192, 0.12) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.bg-color-2 {
  background: #0A0A0A !important;
}

/* Section Backgrounds - Alternating Colors */
.bg-dark {
  background: #000000 !important;
}

.bg-dark-2 {
  background: #0A0A0A !important;
}

.bg-dark-3 {
  background: #1A1A1A !important;
}

/* =========================
   FAQ / ACCORDION
   ========================= */

.accordion-section {
  max-width: 900px !important;
  margin: 0 auto !important;
}

.accordion-section-title {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.05) 0%, rgba(160, 160, 160, 0.03) 100%) !important;
  border: 1px solid rgba(192, 192, 192, 0.12) !important;
  border-radius: 10px !important;
  padding: 20px 24px !important;
  margin-bottom: 12px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

.accordion-section-title:hover {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.1) 0%, rgba(160, 160, 160, 0.06) 100%) !important;
  border-color: rgba(192, 192, 192, 0.2) !important;
  box-shadow: 0 4px 12px rgba(192, 192, 192, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transform: translateX(4px) !important;
}

.accordion-section-content {
  background: transparent !important;
  border: none !important;
  padding: 0 24px 20px 24px !important;
  transition: none !important;
}

/* =========================
   MENU & NAVIGATION
   ========================= */

#mainmenu li a:hover,
#mainmenu li a.active {
  color: #E0E0E0 !important;
}

/* =========================
   LINKS
   ========================= */

a.id-color:hover {
  color: #E0E0E0 !important;
}

/* =========================
   FORMS
   ========================= */

input:focus,
textarea:focus,
select:focus {
  border-color: #C0C0C0 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(192, 192, 192, 0.15), 0 2px 8px rgba(192, 192, 192, 0.2) !important;
}

/* =========================
   SOCIAL ICONS
   ========================= */

.social-icons {
  display: flex !important;
  gap: 12px !important;
  justify-content: flex-start;
}

.social-icons a {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.08) 0%, rgba(160, 160, 160, 0.05) 100%) !important;
  border: 1px solid rgba(192, 192, 192, 0.15) !important;
  border-radius: 50% !important;
  color: #C0C0C0 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  position: relative !important;
}

.social-icons a::before,
.social-icons a::after {
  display: none !important;
}

.social-icons a:hover {
  background: linear-gradient(135deg, #C0C0C0 0%, #A8A8A8 100%) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #000000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(192, 192, 192, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* =========================
   RATINGS
   ========================= */

.de-rating-ext .d-stars i.fa-star {
  color: #C0C0C0;
}

/* =========================
   COUNTERS
   ========================= */

.timer {
  color: #FFFFFF !important;
  font-weight: 600;
}

/* =========================
   GRADIENTS
   ========================= */

.gradient-edge-bottom.color::before {
  background: linear-gradient(to bottom, transparent 0%, rgba(192, 192, 192, 0.1) 100%);
}

/* =========================
   LOGO
   ========================= */

#logo:hover {
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

/* =========================
   FOOTER
   ========================= */

footer {
  text-align: left !important;
  padding: 80px 0 40px 0 !important;
}

footer .widget h5 {
  font-size: 22px !important;
  font-weight: 600 !important;
  margin-bottom: 28px !important;
  color: #FFFFFF !important;
  letter-spacing: -0.5px !important;
}

footer .widget ul li {
  margin-bottom: 16px !important;
}

footer .widget a {
  color: rgba(255, 255, 255, 0.75) !important;
  transition: color 0.2s ease !important;
  font-size: 17px !important;
}

footer .widget a:hover {
  color: #FFFFFF !important;
}

footer .widget {
  font-size: 17px !important;
  line-height: 1.9 !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

footer .widget .fw-bold {
  font-size: 16px !important;
  margin-bottom: 10px !important;
  font-weight: 600 !important;
}

footer .subfooter {
  text-align: center !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 28px 0 !important;
}

footer .subfooter .de-flex-col {
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 15px !important;
}

footer .subfooter a {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
}

footer .subfooter a:hover {
  color: #FFFFFF !important;
}

footer .subfooter .menu-simple li a {
  font-size: 15px !important;
}

@media (max-width: 991px) {
  footer {
    padding: 60px 0 40px 0 !important;
  }


  footer .widget h5 {
    font-size: 24px !important;
    margin-bottom: 24px !important;
    letter-spacing: -0.5px !important;
  }

  footer .widget a {
    font-size: 18px !important;
  }

  footer .widget {
    font-size: 18px !important;
  }

  footer .widget .fw-bold {
    font-size: 18px !important;
    margin-bottom: 12px !important;
    font-weight: 600 !important;
  }

  footer .widget ul li {
    margin-bottom: 18px !important;
  }

  footer .widget .row {
    display: block !important;
  }

  footer .widget .row .col-md-6 {
    width: 100% !important;
    margin-bottom: 40px !important;
  }

  footer .widget .row .col-md-6:last-child {
    margin-bottom: 0 !important;
  }

  footer .subfooter .de-flex {
    flex-direction: column !important;
    gap: 24px !important;
    align-items: center !important;
  }

  footer .subfooter .de-flex-col {
    font-size: 16px !important;
    line-height: 1.8 !important;
  }

  footer .subfooter .menu-simple {
    justify-content: center !important;
    display: flex !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  footer .subfooter .menu-simple li {
    font-size: 16px !important;
  }

  footer .subfooter .menu-simple li a {
    font-size: 16px !important;
  }
}

/* =========================
   TESTIMONIAL CARDS
   ========================= */

.bg-dark.rounded-1 {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.05) 0%, rgba(160, 160, 160, 0.03) 100%) !important;
  border: 1px solid rgba(192, 192, 192, 0.1) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

.bg-dark.rounded-1:hover {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.08) 0%, rgba(160, 160, 160, 0.05) 100%) !important;
  border-color: rgba(192, 192, 192, 0.15) !important;
  box-shadow: 0 4px 16px rgba(192, 192, 192, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transform: translateY(-2px) !important;
}

/* =========================
   SPACING
   ========================= */

section {
  padding: 100px 0 !important;
}

.spacer-double {
  height: 80px !important;
}

.spacer-single {
  height: 40px !important;
}

.spacer-20 {
  height: 20px !important;
}

@media (max-width: 991px) {
  section {
    padding: 60px 0 !important;
  }

  .spacer-double {
    height: 60px !important;
  }

  .spacer-single {
    height: 30px !important;
  }
}

/* ================================================== */
/* Active Navigation Link Highlight Override */
/* ================================================== */

#mainmenu li a.menu-item.active {
    color: #fff !important;
    text-shadow: 
        0 0 15px rgba(255, 255, 255, 0.9),
        0 0 25px rgba(255, 255, 255, 0.6),
        0 0 35px rgba(255, 255, 255, 0.4) !important;
    font-weight: 600 !important;
    position: relative;
}

#mainmenu li a.menu-item.active::after {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 2px;
    background: #fff;
    box-shadow:
        0 0 15px rgba(255, 255, 255, 1),
        0 0 25px rgba(255, 255, 255, 0.8);
    border-radius: 2px;
}

/* Mobile menu active state */
#mobile-side-menu ul li a.active {
    color: #c9a35d !important;
    font-weight: 600;
    text-shadow: 
        0 0 10px rgba(201, 163, 93, 0.9),
        0 0 20px rgba(201, 163, 93, 0.6) !important;
}