/* MSTEC Modern UI Layer
   Safe override file only. No old JS/CSS logic changed.
*/

:root {
  --mstec-primary: #0d74b7;
  --mstec-primary-2: #0a99f9;
  --mstec-accent: #f5a93f;
  --mstec-dark: #0f172a;
  --mstec-text: #243042;
  --mstec-muted: #64748b;
  --mstec-bg: #f5f9ff;
  --mstec-card: #ffffff;
  --mstec-border: rgba(13, 116, 183, 0.12);
  --mstec-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
  --mstec-shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.08);
  --mstec-radius: 22px;
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at top right, rgba(10, 153, 249, 0.16), transparent 35%),
    linear-gradient(180deg, #ffffff 0%, var(--mstec-bg) 42%, #ffffff 100%) !important;
  color: var(--mstec-text) !important;
  overflow-x: hidden;
}

a,
button,
.btn,
.nav-link,
.card,
.theme-btn,
.btn-more,
.pay,
.more {
  transition: all 0.25s ease !important;
}

/* Header / Navbar */
.bg-dark {
  background: linear-gradient(135deg, #064b86 0%, #0d74b7 45%, #10a6f5 100%) !important;
  min-height: auto !important;
  box-shadow: 0 12px 36px rgba(13, 116, 183, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.navbar {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.navbar-brand img,
.navbar-brand .img-fluid {
  max-height: 76px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.15));
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 0 !important;
  border-radius: 999px;
  padding: 10px 16px !important;
  margin: 3px 2px;
  font-size: 14px !important;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .active .nav-link {
  color: #0d74b7 !important;
  background: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}

.join .nav-link,
.login .nav-link {
  height: auto !important;
  min-height: 44px;
  padding: 10px 24px !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.join .nav-link {
  color: #0d74b7 !important;
  background: #fff !important;
}

.login .nav-link {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
}

/* Hero / Slider */
.slider,
.carousel-slide-b {
  overflow: hidden;
  border-radius: 0 0 42px 42px;
}

.carousel-slide-b {
  min-height: 520px;
  background-size: cover !important;
}

.carousel-slide-b::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.72) 42%, rgba(255,255,255,0.08) 100%),
    radial-gradient(circle at 15% 30%, rgba(245,169,63,0.22), transparent 28%);
  pointer-events: none;
}

.heading_class {
  position: relative;
  z-index: 2;
  color: var(--mstec-dark) !important;
  font-size: clamp(34px, 5vw, 64px) !important;
  line-height: 1.25 !important;
  margin-top: 110px !important;
  margin-left: 40px !important;
  max-width: 680px;
  text-shadow: none !important;
}

.theme-btn,
.btn-more {
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--mstec-primary), var(--mstec-primary-2)) !important;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(13, 116, 183, 0.25);
  letter-spacing: 0 !important;
}

.theme-btn:hover,
.btn-more:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 36px rgba(13, 116, 183, 0.32);
  text-decoration: none !important;
}

.theme-btn.style-two {
  background: linear-gradient(135deg, #f59e0b, var(--mstec-accent)) !important;
}

/* Sections */
.welcome,
.products,
.page-details,
.say {
  padding-top: 70px !important;
  padding-bottom: 70px !important;
}

.welcome {
  background: #fff;
}

.welcome .block-content {
  float: none !important;
  padding: 48px !important;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--mstec-border);
  border-radius: var(--mstec-radius);
  box-shadow: var(--mstec-shadow-soft);
}

.welcome h2,
.border-title {
  background: transparent !important;
  color: var(--mstec-dark) !important;
  font-size: clamp(24px, 3vw, 38px) !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  position: relative;
  padding-bottom: 14px !important;
}

.welcome h2::after,
.border-title::after {
  content: "";
  display: block;
  width: 72px;
  height: 5px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mstec-primary), var(--mstec-accent));
}

.shop-info {
  width: min(92%, 1040px) !important;
  border: 1px solid var(--mstec-border) !important;
  border-radius: var(--mstec-radius) !important;
  background: #fff !important;
  box-shadow: var(--mstec-shadow-soft);
  padding: 24px !important;
}

/* Product Cards */
.products {
  background:
    radial-gradient(circle at 10% 0%, rgba(10,153,249,0.13), transparent 32%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 100%) !important;
}

.card {
  border: 1px solid var(--mstec-border) !important;
  border-radius: var(--mstec-radius) !important;
  overflow: hidden;
  box-shadow: var(--mstec-shadow-soft);
  background: var(--mstec-card) !important;
  height: 100%;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--mstec-shadow);
  border-color: rgba(13, 116, 183, 0.25) !important;
}

.card-img-top {
  height: 245px;
  object-fit: contain;
  background: linear-gradient(180deg, #f7fbff, #ffffff);
  padding: 18px;
}

.card-body {
  padding: 22px !important;
}

.card-title {
  color: var(--mstec-dark) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  min-height: 52px;
  line-height: 1.6;
}

.pricex,
.price {
  color: var(--mstec-accent) !important;
  font-weight: 900 !important;
}

.pricex {
  font-size: 15px !important;
}

.price {
  font-size: clamp(24px, 3vw, 34px) !important;
}

.pricex del,
.price del {
  color: #94a3b8 !important;
  margin-inline-end: 8px;
}

.cart-btn {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
}

.cart-btn .pay,
.cart-btn .more {
  border: 0 !important;
  border-radius: 999px !important;
  padding: 10px 20px !important;
  min-width: 120px;
  font-size: 14px !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
}

.cart-btn .pay {
  color: #fff !important;
  background: linear-gradient(135deg, var(--mstec-primary), var(--mstec-primary-2)) !important;
}

.cart-btn .more {
  color: #0f5132 !important;
  background: #e7fff4 !important;
}

.cart-btn .pay:hover,
.cart-btn .more:hover {
  transform: translateY(-2px);
  text-decoration: none !important;
}

/* Forms */
.form-control {
  border-radius: 16px !important;
  border: 1px solid rgba(13, 116, 183, 0.18) !important;
  padding: 12px 15px !important;
  box-shadow: none !important;
}

.form-control:focus {
  border-color: var(--mstec-primary-2) !important;
  box-shadow: 0 0 0 4px rgba(10, 153, 249, 0.12) !important;
}

.conactus {
  background: #fff;
}

/* Footer */
footer {
  background:
    radial-gradient(circle at top right, rgba(255,255,255,0.14), transparent 28%),
    linear-gradient(135deg, #063b6d 0%, #0d74b7 100%) !important;
  padding: 54px 0 38px !important;
  margin-top: 40px;
}

footer nav ul {
  flex-wrap: wrap;
  gap: 10px 18px;
}

footer nav a {
  margin: 0 !important;
  padding: 9px 14px;
  border-radius: 999px;
  color: rgba(255,255,255,0.92) !important;
}

footer nav a:hover {
  background: rgba(255,255,255,0.14);
  text-decoration: none !important;
}

footer .copyrights {
  color: rgba(255,255,255,0.82) !important;
}

/* Floating contact */
.cox {
  bottom: 16px !important;
  right: 16px !important;
}

.cox-icon {
  width: 62px !important;
  height: 62px !important;
  background: linear-gradient(135deg, #ffffff, #f0f9ff) !important;
  box-shadow: 0 16px 38px rgba(13, 116, 183, 0.22) !important;
}

#toTop {
  background: linear-gradient(135deg, var(--mstec-primary), var(--mstec-primary-2)) !important;
  box-shadow: 0 12px 28px rgba(13,116,183,0.28);
}

/* Responsive */
@media (max-width: 991px) {
  .navbar-dark .navbar-nav .nav-link {
    text-align: center;
    margin: 5px 0;
  }

  .heading_class {
    margin: 80px 20px 30px !important;
    text-align: center;
  }

  .carousel-slide-b {
    min-height: 430px;
  }

  .welcome .block-content {
    padding: 30px 22px !important;
    margin-top: 20px;
  }

  .card-img-top {
    height: 215px;
  }
}

@media (max-width: 575px) {
  body {
    font-size: 13px !important;
  }

  .navbar-brand img,
  .navbar-brand .img-fluid {
    max-height: 58px;
  }

  .carousel-slide-b {
    min-height: 360px;
    border-radius: 0 0 26px 26px;
  }

  .heading_class {
    font-size: 30px !important;
    line-height: 1.45 !important;
  }

  .products,
  .welcome,
  .page-details,
  .say {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }

  .card {
    border-radius: 18px !important;
  }

  .cart-btn .pay,
  .cart-btn .more {
    width: 100%;
  }

  footer nav ul {
    display: grid !important;
    gap: 8px;
  }
}