:root{
  --brand:#0e1b4d;
  --accent:#2563eb;
}

body{
  font-family:Inter,system-ui,Arial,sans-serif;
  color:#243045;
  background:#fff;
}

/* ---------- Topbar ---------- */
/* ---------- Topbar transparency ---------- */
.topbar{
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: rgba(255, 255, 255, 0.6); /* more transparent */
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(2,6,23,.04);
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

/* ---------- Navbar transparency ---------- */
.navbar{
  background-color: rgba(255, 255, 255, 0.65); /* more transparent */
  backdrop-filter: blur(8px);
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Optional: on scroll, make navbar slightly more solid */
.navbar.scrolled{
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(0);
}

/* ---------- Brand ---------- */
.brand-badge{
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:8px;
  background:linear-gradient(135deg,var(--brand),#1e3faa);
  color:#fff;
  font-weight:700;
  margin-right:8px;
  padding:6px;
}
.brand-name{
  font-weight:700;
  color:var(--brand);
}

/* ---------- Hero ---------- */
.hero .carousel-caption{
  bottom:30%;
  text-align:left;
}
.hero img{
  height:520px;
  object-fit:cover;
}

/* ---------- Gradient CTA ---------- */
.gradient{
  background:linear-gradient(135deg,var(--brand),#0ea5e9);
  color:#fff;
  padding:30px;
  border-radius:10px;
}

/* ---------- Footer ---------- */
.footer{
  background:var(--brand);
  color:#fff;
  padding-top:30px;
}

/* ---------- Cards ---------- */
.card-img-top{
  height:200px;
  object-fit:cover;
}

/* ---------- Buttons ---------- */
.btn-primary{
  background:var(--accent);
  border-color:var(--accent);
}

.bg-light{
  background:#f8fafc;
}

a{
  color:inherit;
}

/* ---------- Flip card container ---------- */
.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner,
.flip-card-inner.is-flipped {
  transform: rotateY(180deg);
}

/* Front & Back sides */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

/* Front */
.flip-card-front {
  background: #fff;
}

/* Back */
.flip-card-back {
  background: #0d6efd;
  color: white;
  transform: rotateY(180deg);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ---------- Navbar Menu ---------- */
.navbar-nav .nav-link {
  font-weight: 600;
  color: #000 !important;
  transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: #0d6efd !important;
  transform: scale(1.05);
}

/* Dropdown Menu */
.navbar-nav .dropdown-menu {
  border-radius: 0.5rem;
  border: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

/* Search Input & Button */
.navbar .form-control {
  border-radius: 50px;
  transition: all 0.3s ease;
}
.navbar .form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(13,110,253,.25);
  border-color: #0d6efd;
}

.navbar .btn {
  border-radius: 50px;
  transition: all 0.3s ease;
}
.navbar .btn:hover {
  transform: scale(1.05);
}

/* ---------- Social Icons ---------- */
.social-icons a.social-link {
  font-weight: 600;
  transition: transform 0.3s ease;
}
.social-icons a.social-link.bi-linkedin { color: #0A66C2; }
.social-icons a.social-link.bi-instagram { color: #E4405F; }
.social-icons a.social-link.bi-facebook { color: #1877F2; }
.social-icons a.social-link.bi-twitter { color: #1DA1F2; }
.social-icons a.social-link:hover {
  transform: scale(1.2);
}

/* ---------- Modern single-line adjustments ---------- */
.topbar-navbar {
  padding: 0.5rem 0;
}
.topbar-navbar .navbar,
.topbar-navbar .social-icons,
.topbar-navbar .contact-sm {
  margin: 0;
}
.topbar-navbar .brand-logo {
  display: block;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 992px) {
  .navbar-nav {
    text-align: center;
  }
  .navbar .form-control {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}