/* KC Metalsheet glassmorphism theme */
:root {
  --kc-bg-top: #eef0f8;
  --kc-bg-bottom: #dfe4f3;
  --kc-surface: rgba(255, 255, 255, 0.72);
  --kc-surface-strong: rgba(255, 255, 255, 0.84);
  --kc-border: rgba(255, 255, 255, 0.6);
  --kc-ink: #1c255a;
  --kc-muted: #5d6694;
  --kc-brand: #1a1f6b;
  --kc-brand-strong: #12174d;
  --kc-accent: #cf304d;
  --kc-shadow: 0 16px 36px rgba(18, 23, 77, 0.16);
}

html,
body {
  background:
    radial-gradient(1200px 480px at 10% -10%, rgba(26, 31, 107, 0.18), transparent 70%),
    radial-gradient(920px 420px at 95% 0%, rgba(207, 48, 77, 0.12), transparent 65%),
    linear-gradient(180deg, var(--kc-bg-top), var(--kc-bg-bottom));
  color: var(--kc-ink);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.22) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.35;
  z-index: -1;
}

.section-heading h4,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--kc-ink);
}

p,
.info-label,
.date {
  color: var(--kc-muted);
}

.header-area {
  background: rgba(244, 249, 255, 0.55) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 24px rgba(19, 52, 80, 0.08);
}

.main-nav .logo img {
  filter: drop-shadow(0 5px 12px rgba(26, 31, 107, 0.24));
}

.main-nav .nav li a {
  color: #1f3348 !important;
  font-weight: 500;
}

.main-nav .nav li a:hover,
.main-nav .nav li a.active {
  color: var(--kc-brand) !important;
}

.main-nav .nav li.has-dropdown ul.dropdown {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(15, 76, 129, 0.12);
  box-shadow: 0 16px 34px rgba(9, 36, 64, 0.18);
  border-radius: 14px;
  overflow: hidden;
}

.main-banner,
.page-banner,
.page-heading-new {
  position: relative;
  background:
    linear-gradient(135deg, rgba(18, 23, 77, 0.94), rgba(26, 31, 107, 0.92)),
    linear-gradient(180deg, #171c57, #1f266f) !important;
  color: #f3f9ff;
  border-bottom-left-radius: 42px;
  border-bottom-right-radius: 42px;
  box-shadow: 0 18px 42px rgba(18, 23, 77, 0.3);
}

.main-banner::before,
.page-banner::before,
.page-heading-new::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(500px 180px at 70% 20%, rgba(255, 255, 255, 0.22), transparent 70%);
  pointer-events: none;
}

.main-banner .header-text h4,
.main-banner .header-text h2,
.main-banner .header-text p,
.page-banner h2,
.page-banner p,
.page-heading-new h2,
.page-heading-new p {
  color: #f4f9ff !important;
}

.main-banner .white-button a,
.white-button a,
.read-more-btn,
.set-link-btn,
.download-btn,
.fb-btn {
  background: linear-gradient(135deg, var(--kc-brand), #2b3492 70%, var(--kc-accent)) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px !important;
  box-shadow: 0 10px 22px rgba(18, 23, 77, 0.34);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.main-banner .white-button a:hover,
.white-button a:hover,
.read-more-btn:hover,
.set-link-btn:hover,
.download-btn:hover,
.fb-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(18, 23, 77, 0.4);
  filter: saturate(1.08);
}

.services .service-item,
.stock-card,
.price-card,
.news-item-card,
.document-card,
.branch-wrapper,
.summary-box,
.box-item,
.the-clients .menu .thumb,
.ceo-content-wrapper,
.ceo-text-box,
.fb-follow-box {
  background: var(--kc-surface) !important;
  border: 1px solid var(--kc-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--kc-shadow) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.services .service-item:hover,
.stock-card:hover,
.news-item-card:hover,
.document-card:hover,
.summary-box:hover,
.box-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(10, 42, 73, 0.18) !important;
}

.stock-value,
.info-value,
.news-item-card .down-content h4,
.doc-info h4,
.branch-card.active h6,
.ceo-details h4 {
  color: var(--kc-brand) !important;
}

.branch-card.active {
  background: rgba(217, 234, 250, 0.75) !important;
  border-left-color: var(--kc-brand) !important;
}

.lang-switch .lang-btn {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(12, 63, 106, 0.2);
  color: var(--kc-brand);
  border-radius: 10px;
  font-weight: 600;
}

.lang-switch .lang-btn.active {
  background: var(--kc-brand);
  border-color: var(--kc-brand);
  color: #ffffff;
}

.layered-image-container img {
  border: 5px solid rgba(255, 255, 255, 0.65) !important;
  box-shadow: 0 18px 35px rgba(7, 30, 53, 0.28) !important;
  border-radius: 26px !important;
}

.ceo-highlight-section .ceo-text-box {
  background: var(--kc-surface-strong) !important;
  color: var(--kc-ink) !important;
}

.ceo-highlight-section .highlight-quote {
  color: #32475d !important;
  font-weight: 400;
}

.ceo-highlight-section .ceo-details span {
  color: #4d627a !important;
}

.ceo-highlight-section .white-quote-icon {
  filter: none;
  opacity: 0.22;
}

footer#newsletter {
  background: linear-gradient(160deg, rgba(18, 23, 77, 0.97), rgba(26, 31, 107, 0.95)) !important;
  border-top: 1px solid rgba(207, 48, 77, 0.45);
}

footer#newsletter .footer-widget h4,
footer#newsletter p,
footer#newsletter a,
footer#newsletter .copyright-text p {
  color: #edf6ff !important;
}

footer#newsletter .footer-widget h4::after {
  background-color: var(--kc-accent) !important;
}

footer#newsletter .footer-widget p a:hover,
footer#newsletter .footer-widget ul li a:hover {
  color: #ff6b85 !important;
}

footer#newsletter .copyright-text {
  border-top: 1px solid rgba(207, 48, 77, 0.28) !important;
}

@media (max-width: 991px) {
  .main-banner,
  .page-banner,
  .page-heading-new {
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
  }

  .stock-value {
    font-size: 54px !important;
  }

  .price-card {
    margin-top: -36px;
    padding: 24px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}