@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;600;700;800&display=swap');

:root {
  --premium-bg: #f6f8ff;
  --premium-text: #16213e;
  --premium-muted: #5f6b84;
  --premium-white: #ffffff;
  --premium-accent: #ff4d6d;
  --premium-accent-2: #ff9f1c;
  --premium-accent-3: #00b4d8;
  --premium-accent-4: #5a3dff;
  --premium-border: rgba(90, 61, 255, 0.16);
  --premium-shadow: 0 18px 45px rgba(11, 23, 74, 0.12);
  --premium-gradient: linear-gradient(122deg, #ff4d6d 0%, #ff9f1c 36%, #00b4d8 72%, #5a3dff 100%);
  --premium-gradient-soft: linear-gradient(120deg, rgba(255, 77, 109, 0.08) 0%, rgba(0, 180, 216, 0.08) 58%, rgba(90, 61, 255, 0.1) 100%);
}

body {
  font-family: 'Manrope', sans-serif;
  color: var(--premium-text);
  background: radial-gradient(circle at 8% 4%, rgba(255, 77, 109, 0.1), transparent 24%),
              radial-gradient(circle at 92% 20%, rgba(0, 180, 216, 0.14), transparent 32%),
              radial-gradient(circle at 50% 100%, rgba(90, 61, 255, 0.1), transparent 32%),
              var(--premium-bg);
}

h1,
h2,
h3,
h4,
h5,
h6,
.menu-nav .navigation li a,
.sub-title,
.btn,
.fw-title {
  font-family: 'Sora', sans-serif;
  letter-spacing: 0.2px;
}

.menu-area {
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.84);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

.transparent-header {
  background: rgba(255, 255, 255, 0.78) !important;
}

.menu-wrap {
  border-radius: 16px;
  margin-top: 12px;
  padding: 0 14px;
  box-shadow: 0 10px 28px rgba(20, 28, 64, 0.1);
  background: rgba(255, 255, 255, 0.9);
}

.menu-nav .navigation li a {
  color: #1a2a4f;
  font-weight: 600;
}

.menu-nav .navigation li a:hover,
.menu-nav .navigation li.active > a,
.menu-nav .navigation li > a.active {
  color: var(--premium-accent);
}

.btn {
  border-radius: 999px;
  border: 0;
  color: #fff !important;
  font-weight: 700;
  background-image: var(--premium-gradient);
  background-size: 200% auto;
  box-shadow: 0 10px 30px rgba(90, 61, 255, 0.28);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-position 0.25s ease;
}

.btn:hover {
  transform: translateY(-2px);
  background-position: right center;
  box-shadow: 0 14px 36px rgba(90, 61, 255, 0.35);
}

.banner-area,
.pt-100,
.pt-90,
.pb-70,
.pb-100 {
  position: relative;
  z-index: 1;
}

.banner-content .title,
.section-title .title {
  color: #101936;
}

.banner-content .title span,
.section-title .title span {
  background-image: var(--premium-gradient) !important;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.service-card,
.benefit-card,
.page-wrap,
.contact-form,
.card,
.single-pricing,
.price-card,
[class*='feature'] {
  border-radius: 20px;
  border: 1px solid var(--premium-border);
  box-shadow: var(--premium-shadow);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 255, 0.98) 100%);
}

input,
textarea,
select,
.form-control,
.form-select {
  border-radius: 12px !important;
  border: 1px solid rgba(31, 54, 108, 0.16) !important;
  background: #ffffff !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
  border-color: rgba(90, 61, 255, 0.48) !important;
  box-shadow: 0 0 0 4px rgba(90, 61, 255, 0.14) !important;
}

.footer-area {
  background: linear-gradient(180deg, rgba(7, 14, 40, 0.96) 0%, rgba(11, 22, 59, 0.98) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-widget .fw-title,
.footer-widget,
.footer-about,
.footer-contact .title a,
.copyright-text p,
.footer-area a {
  color: #f6f8ff !important;
}

.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.footer-social a:hover {
  background-image: var(--premium-gradient);
}

.scroll-top {
  border-radius: 14px;
  background-image: var(--premium-gradient);
  box-shadow: 0 16px 30px rgba(90, 61, 255, 0.4);
}

@media (max-width: 991px) {
  .menu-wrap {
    margin-top: 8px;
    border-radius: 12px;
    padding: 0 8px;
  }

  .footer-area {
    margin-top: 28px;
  }
}