/* Portfolio – works standalone with Bootstrap 5 CDN */

:root {
  --hero-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  --navbar-bg: rgba(0, 0, 0, 0.85);
  --text-muted: #6c757d;
  --footer-bg: #212529;
}

/* Preloader */
.preloader {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader-wrapper {
  width: 50px;
  height: 50px;
}
.spinner-layer { position: absolute; width: 100%; height: 100%; border-color: #0d6efd; }
.spinner-white-only .circle-clipper .circle,
.spinner-white-only .gap-patch .circle { border-color: #0d6efd; }
.circle-clipper { display: inline-block; position: relative; width: 50%; height: 100%; overflow: hidden; }
.circle-clipper .circle { width: 200%; height: 100%; border-width: 3px; border-style: solid; border-color: inherit; border-bottom-color: transparent !important; border-radius: 50%; animation: spinner-rotate 1s linear infinite; }
.gap-patch { position: absolute; top: 0; left: 45%; width: 10%; height: 100%; overflow: hidden; }
.gap-patch .circle { left: -450%; width: 1000%; }
@keyframes spinner-rotate { to { transform: rotate(360deg); } }

/* Navbar */
.navbar-slick {
  background: var(--navbar-bg) !important;
  backdrop-filter: blur(8px);
}
.navbar-slick .navbar-brand img { display: block; }
.navbar-slick .nav-link { color: rgba(255,255,255,0.9) !important; }
.navbar-slick .nav-link:hover { color: #fff !important; }
.container-wide-xl { max-width: 1320px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 576px) { .container-wide-xl { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 992px) { .container-wide-xl { padding-left: 2rem; padding-right: 2rem; } }

/* Hamburger (minimal fallback if no vendor CSS) */
.navbar-toggler { border: 1px solid rgba(255,255,255,0.3); padding: 0.35rem 0.65rem; }
.navbar-toggler .hamburger-box { width: 24px; height: 18px; display: inline-block; position: relative; }
.navbar-toggler .hamburger-inner { display: block; width: 24px; height: 2px; background: #fff; position: absolute; top: 50%; margin-top: -1px; }
.navbar-toggler .hamburger-inner::before,
.navbar-toggler .hamburger-inner::after { content: ''; display: block; width: 24px; height: 2px; background: #fff; position: absolute; left: 0; }
.navbar-toggler .hamburger-inner::before { top: -6px; }
.navbar-toggler .hamburger-inner::after { top: 6px; }

/* Lang buttons */
.lang-btn.active { background: rgba(255,255,255,0.25); color: #fff; }

/* Hero – match Slick theme so header_showcase.jpg looks the same */
.section-hero {
  position: relative;
  overflow: hidden;
}
.section-hero .bg-holder {
  background-size: cover;
  background-position: center top;
}
.pt-7 { padding-top: 4rem; }
.pt-md-9 { padding-top: 4rem; }
@media (min-width: 768px) { .pt-md-9 { padding-top: 5rem; } }
.pb-0 { padding-bottom: 0; }
.py-6 { padding-top: 4rem; padding-bottom: 4rem; }
.py-lg-8 { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 992px) { .py-lg-8 { padding-top: 5rem; padding-bottom: 5rem; } }

.bg-holder {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-size: cover;
  background-position: center;
}
.bg-holder.overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}
.showcase-banner-wrapper {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 576px) {
  .showcase-banner-wrapper { padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 992px) {
  .showcase-banner-wrapper { padding-left: 2.5rem; padding-right: 2.5rem; }
}
.showcase-banner {
  min-height: 320px;
  /*padding: 5rem 0 4rem;*/
  position: relative;
  z-index: 1;
}
.flex-center { display: flex; align-items: center; justify-content: center; }
.fs-4 { font-size: 1.5rem; }
.fs-sm-5 { font-size: 1.5rem; }
.fs-lg-7 { font-size: 1.5rem; }
@media (min-width: 576px) { .fs-sm-5 { font-size: 2rem; } }
@media (min-width: 992px) { .fs-lg-7 { font-size: 2.75rem; } }
.text-300 { color: rgba(255,255,255,0.85); }
.opacity-75 { opacity: 0.85; }
.lead { font-size: 1.1rem; font-weight: 300; }

.wave {
  position: relative;
  height: 60px;
  margin-top: -1px;
  overflow: hidden;
}
.wave svg { display: block; }

/* Projects section */
.text-700 { color: var(--text-muted); }
.bg-1100 { background: var(--footer-bg); }
.link-400 { color: rgba(255,255,255,0.7); text-decoration: none; }
.link-400:hover { color: #fff; }

/* Card image fallback when image fails to load */
.card-img-top {
  background: #e9ecef;
  object-fit: cover;
}