/* FanawarTech shared visual system */
:root {
  --ft-ink: #14233b;
  --ft-muted: #64748b;
  --ft-primary: #1769d2;
  --ft-primary-dark: #1059b6;
  --ft-line: #e5ebf3;
  --ft-surface: #f6f8fc;
  --ft-shadow: 0 14px 38px rgba(19, 43, 75, .08);
}

html { scroll-behavior: smooth; }
body {
  color: var(--ft-ink);
  background: #fff;
  font-family: Inter, "Open Sans", sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ft-ink);
  font-family: Inter, "Raleway", sans-serif;
  font-weight: 700;
  letter-spacing: -.025em;
}

a { color: var(--ft-primary); transition: color .2s ease; }
a:hover { color: var(--ft-primary-dark); }

/* Shared navigation */
#header,
#header.header-transparent,
#header.header-scrolled {
  height: 76px;
  background: rgba(15, 31, 54, .94);
  box-shadow: 0 4px 24px rgba(8, 20, 39, .12);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
#header .logo img { max-height: 46px; }
#header .navbar a,
#header .navbar a:focus {
  padding: 9px 13px;
  margin-left: 3px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
}
#header .navbar a:hover,
#header .navbar .active,
#header .navbar .active:focus,
#header .navbar li:hover > a {
  background: rgba(103, 174, 255, .18);
  color: #fff;
}
#header .navbar .dropdown ul {
  top: calc(100% + 12px);
  padding: 8px;
  border: 1px solid rgba(226, 234, 245, .9);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(8, 20, 39, .18);
}
#header .navbar .dropdown ul a {
  min-height: 40px;
  margin: 1px 0;
  border-radius: 8px;
  color: var(--ft-ink);
}
#header .navbar .dropdown ul a:hover,
#header .navbar .dropdown ul .active,
#header .navbar .dropdown ul li:hover > a {
  background: #edf5ff;
  color: var(--ft-primary-dark);
}
#header .language-switcher-mobile .lang-link { font-weight: 700; }

/* Shared page headers, including service, portfolio and contact pages */
#main > .hero,
#main > header.hero {
  position: relative;
  overflow: hidden;
  padding: 122px 0 68px;
  background:
    radial-gradient(circle at 82% 10%, rgba(93, 168, 255, .24), transparent 27%),
    radial-gradient(circle at 8% 100%, rgba(43, 117, 218, .22), transparent 34%),
    linear-gradient(120deg, #102542 0%, #153c70 58%, #1764b4 100%);
  color: #fff;
  text-align: left;
}
#main > .hero::after,
#main > header.hero::after {
  position: absolute;
  right: -190px;
  bottom: -360px;
  width: 600px;
  height: 600px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  box-shadow: 0 0 0 48px rgba(255, 255, 255, .03), 0 0 0 96px rgba(255, 255, 255, .02);
  content: "";
  pointer-events: none;
}
#main > .hero > *,
#main > header.hero > * { position: relative; z-index: 1; }
#main > .hero h1,
#main > header.hero h1,
#main > .hero h2,
#main > header.hero h2 { color: #fff; }
#main > .hero p,
#main > header.hero p { color: rgba(255, 255, 255, .8); }
#main > .hero .breadcrumb,
#main > .hero .breadcrumb a,
#main > header.hero .breadcrumb,
#main > header.hero .breadcrumb a { color: rgba(255, 255, 255, .73); }
#main > .hero .breadcrumb-item.active,
#main > header.hero .breadcrumb-item.active { color: #fff; }

/* Landing page hero and content */
#hero {
  min-height: 700px;
  background:
    radial-gradient(circle at 78% 18%, rgba(84, 165, 255, .24), transparent 28%),
    radial-gradient(circle at 12% 78%, rgba(39, 115, 215, .24), transparent 35%),
    linear-gradient(125deg, #0e2039 0%, #153c70 58%, #1764b4 100%);
}
#hero .carousel-container { min-height: 700px; height: 78vh; padding: 92px 24px 80px; }
#hero h2 {
  max-width: 950px;
  margin-bottom: 22px;
  color: #fff;
  font-size: clamp(2.35rem, 5.1vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.12;
}
#hero h2 .text-brand { color: #8dc7ff; }
#hero p { max-width: 760px; color: rgba(255, 255, 255, .78); font-size: 1.08rem; line-height: 1.8; }
#hero .btn-get-started {
  padding: 14px 26px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 9px;
  background: rgba(255, 255, 255, .08);
  font-weight: 650;
  letter-spacing: 0;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
#hero .btn-get-started:hover { border-color: var(--ft-primary); background: var(--ft-primary); }
.about > .container > .text-center h1 { color: var(--ft-ink); line-height: 1.45; }
.about .content img { border-radius: 18px; }
.about .content ul li { color: #475569; line-height: 1.7; }
#features .nav-tabs .nav-link {
  min-height: 100%;
  border: 1px solid var(--ft-line);
  border-radius: 12px;
  background: #fff;
  color: var(--ft-ink);
  transition: border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
#features .nav-tabs .nav-link:hover,
#features .nav-tabs .nav-link.active,
#features .nav-tabs .nav-link.show {
  border-color: #cfe2fb;
  box-shadow: 0 8px 24px rgba(19, 43, 75, .07);
  color: var(--ft-primary);
}
#cta {
  padding: 68px 0;
  background: linear-gradient(115deg, #edf5ff, #f8fbff 66%, #edf5ff);
}
#cta h3 { color: var(--ft-ink); font-size: 1.9rem; font-weight: 750; }
#cta p { color: var(--ft-muted); font-size: 1rem; line-height: 1.8; }
#cta .cta-btn {
  padding: 14px 24px;
  border-radius: 9px;
  background: var(--ft-primary);
  box-shadow: 0 8px 18px rgba(23, 105, 210, .2);
  font-weight: 700;
}
#cta .cta-btn:hover { background: var(--ft-primary-dark); }

/* Shared headings, surfaces, cards and portfolio tiles */
.section-title h2,
.section-title .h2 {
  color: var(--ft-ink);
  font-weight: 750;
  letter-spacing: -.035em;
}
.section-title h2::after { background: var(--ft-primary); }
.services,
.portfolio,
.about,
.hosting-home,
.team { padding-top: 76px; padding-bottom: 76px; }
.services .icon-box,
.service-card,
.hero-card,
.portfolio .portfolio-item,
.portfolio-details .portfolio-info,
.faq .faq-list li,
.features .card,
.hosting .card {
  border: 1px solid var(--ft-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(19, 43, 75, .045);
}
.hero-card { color: var(--ft-ink); }
.hero-card h1,
.hero-card h2,
.hero-card h3,
.hero-card h4 { color: var(--ft-ink); }
.hero-card p,
.hero-card small { color: var(--ft-muted); }
.services .icon-box {
  padding: 30px 26px;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.services .icon-box:hover,
.service-card:hover,
.features .card:hover {
  transform: translateY(-5px);
  border-color: #d6e5f8;
  box-shadow: var(--ft-shadow);
}
.services .icon { border-radius: 15px; }
.services .title a { color: var(--ft-ink); }
.services .title a:hover { color: var(--ft-primary); }
.portfolio .portfolio-item { overflow: hidden; }
.portfolio .portfolio-item .portfolio-info { background: rgba(16, 37, 66, .92); }
.portfolio #portfolio-flters li {
  border-radius: 999px;
  color: var(--ft-muted);
  font-weight: 600;
}
.portfolio #portfolio-flters li.filter-active,
.portfolio #portfolio-flters li:hover { color: var(--ft-primary); }
.faq .faq-list li { padding: 22px 24px; }

/* Buttons and forms */
.btn,
button,
input,
textarea,
select { font-family: inherit; }
.btn {
  border-radius: 9px;
  font-weight: 650;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn-primary,
.btn-primary:focus {
  border-color: var(--ft-primary);
  background: var(--ft-primary);
  box-shadow: 0 5px 14px rgba(23, 105, 210, .16);
}
.btn-primary:hover {
  transform: translateY(-1px);
  border-color: var(--ft-primary-dark);
  background: var(--ft-primary-dark);
  box-shadow: 0 8px 18px rgba(23, 105, 210, .22);
}
.btn-outline-primary,
.btn-outline-primary:focus {
  border-color: #c9dcf5;
  color: var(--ft-primary);
}
.btn-outline-primary:hover {
  border-color: var(--ft-primary);
  background: var(--ft-primary);
  color: #fff;
}
.form-control,
.form-select {
  min-height: 48px;
  border: 1px solid #dce4ef;
  border-radius: 9px;
  color: var(--ft-ink);
  box-shadow: none;
}
textarea.form-control { min-height: auto; }
.form-control:focus,
.form-select:focus {
  border-color: #7eb4f1;
  box-shadow: 0 0 0 4px rgba(23, 105, 210, .1);
}
#rateSelect {
  min-height: 46px;
  padding: 8px 38px 8px 14px;
  border: 1px solid #dce4ef;
  border-radius: 9px;
  background-color: #fff;
  color: var(--ft-ink);
}
.table {
  --bs-table-color: var(--ft-ink);
  --bs-table-border-color: var(--ft-line);
  vertical-align: middle;
}
.table thead th {
  background: #f3f7fc;
  color: #52627a;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
}

/* Contact page */
.contact ~ section .info,
#contact-form {
  border: 1px solid var(--ft-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 32px rgba(19, 43, 75, .055);
}
#contact-form { width: 100%; }
.contact ~ section .info { padding: 28px; }
.contact ~ section .info > div { padding-bottom: 22px; }
.contact ~ section .info > div:last-child { padding-bottom: 0; }
.contact ~ section .info i { color: var(--ft-primary); }
.contact ~ section .info h4 { color: var(--ft-ink); }
#contact-form { padding: 30px; }
.contact ~ section iframe { display: block; width: 100%; border: 0; }

/* Shared footer */
#footer {
  padding: 62px 0 28px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: #0e1c30;
  color: rgba(255, 255, 255, .75);
}
#footer .logo img { max-height: 72px; }
#footer p { max-width: 760px; margin: 0 auto 22px; color: rgba(255, 255, 255, .68); font-style: normal; line-height: 1.8; }
#footer a { color: #c8ddf8; }
#footer a:hover { color: #fff; }
#footer .social-links { margin-bottom: 28px; }
#footer .social-links a {
  width: 40px;
  height: 40px;
  margin: 0 4px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .08);
}
#footer .social-links a:hover { background: var(--ft-primary); }
#footer .copyright { padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .6); }
.back-to-top { background: var(--ft-primary); box-shadow: 0 6px 18px rgba(23, 105, 210, .28); }
.back-to-top:hover { background: var(--ft-primary-dark); }

@media (max-width: 991.98px) {
  #header,
  #header.header-transparent,
  #header.header-scrolled { height: 70px; }
  #header .navbar-mobile ul {
    background: #102542;
    box-shadow: 18px 0 50px rgba(0, 0, 0, .2);
  }
  #header .navbar-mobile a,
  #header .navbar-mobile a:focus { border-radius: 9px; }
  #main > .hero,
  #main > header.hero { padding: 104px 0 55px; }
  #hero { min-height: 620px; }
  #hero .carousel-container { min-height: 620px; height: 82vh; }
  #hero p { width: 100%; }
  #contact-form { margin-top: 0; }
}

@media (max-width: 575.98px) {
  .services,
  .portfolio,
  .about,
  .hosting-home,
  .team { padding-top: 56px; padding-bottom: 56px; }
  #contact-form { padding: 22px; }
  #footer { padding-top: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}