:root {
  --ink: #172235;
  --muted: #657287;
  --blue: #065989;
  --navy: #043c5d;
  --pale: #f5f7fb;
  --line: #e6ebf3;
  --green: #24a66a;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif
}
.site-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #fff;
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms ease, visibility 220ms ease;
}
.site-preloader-spinner {
  width: 42px;
  height: 42px;
  border: 3px solid #dce8ee;
  border-top-color: #20a1db;
  border-right-color: #065989;
  border-radius: 50%;
  animation: site-preloader-spin 800ms linear infinite;
}
.site-preloader-label {
  color: #065989;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.site-preloader.is-complete {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@keyframes site-preloader-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .site-preloader-spinner { animation-duration: 1.8s; }
}
* {
  box-sizing: border-box
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 86px
}
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased
}
h1, h2, h3, h4, h5, h6 {
  text-transform: capitalize
}
a {
  color: inherit;
  text-decoration: none
}
.nav-talk,
.btn-main,
.btn-outline,
.seo-promo-link {
  text-transform: capitalize
}
.icon {
  width: 17px;
  height: auto;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  font-style: normal;
  line-height: 1
}
.topbar {
  background: var(--navy);
  color: #dce4f0;
  font-size: 14px
}
.topbar-inner {
  min-height: 38px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px
}
.topbar a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 500
}
.topbar a:hover {
  color: #fff
}
.topbar .whatsapp-icon {
  color: #55d58a;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #091726;
  border-bottom: 1px solid #ffffff24
}
.container {
  width: min(1160px,calc(100% - 48px));
  margin-inline: auto
}
.nav-wrap {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between
}
.brand img {
  display: block;
  width: 190px;
  height: auto
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 30px
}
.site-nav>a:not(.nav-talk), .nav-dropdown-toggle {
  color: #dce4f0;
  font-size: 15px;
  font-weight: 650;
  font-family: inherit
}
.site-nav>a:not(.nav-talk):hover, .nav-dropdown-toggle:hover {
  color: #20a1db
}
.nav-dropdown {
  position: relative
}
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  color: #dce4f0;
  background: transparent;
  cursor: pointer
}
.nav-dropdown-toggle .fa-chevron-down {
  font-size: 11px;
  transition: transform .2s
}
.nav-dropdown.is-open .nav-dropdown-toggle .fa-chevron-down {
  transform: rotate(180deg)
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 18px);
  left: -18px;
  z-index: 15;
  display: none;
  min-width: 255px;
  padding: 8px;
  border: 1px solid #ffffff20;
  border-radius: 9px;
  background: #0d2234;
  box-shadow: 0 18px 40px #0005
}
.nav-dropdown.is-open .nav-dropdown-menu {
  display: grid
}
.nav-dropdown-menu a {
  padding: 9px 11px;
  border-radius: 5px;
  color: #dce4f0;
  font-size: 14px;
  font-weight: 500 
}
.nav-dropdown-menu a:hover, .nav-dropdown-menu a:focus-visible {
  color: #20a1db;
  background: #ffffff0d
}
.nav-talk {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 16px;
  border-radius: 7px;
  color: #fff;
  background: var(--blue);
  font-size: 15px;
  font-weight: 750;
  transition: background-color .2s ease, color .2s ease, transform .2s ease
}
.nav-talk:hover, .btn-main:hover {
  color: #fff;
  background: #043f62;
  transform: translateY(-1px)
}
.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 10px;
  border: 1px solid #ffffff38;
  border-radius: 8px;
  background: transparent
}
.menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px auto;
  border-radius: 2px;
  background: #fff;
  transition: transform .2s
}
.menu-toggle[aria-expanded=true] span:first-child {
  transform: translateY(3px) rotate(45deg)
}
.menu-toggle[aria-expanded=true] span:last-child {
  transform: translateY(-3px) rotate(-45deg)
}
.skip-link {
  position: absolute;
  top: -60px;
  left: 15px;
  z-index: 30;
  padding: 9px 14px;
  background: #fff
}
.skip-link:focus {
  top: 10px
}
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: #091726
}
.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: radial-gradient(#8bd7f538 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .45;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent)
}
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -30%;
  background-image:
    radial-gradient(#8bd7f540 1.5px, transparent 1.7px),
    linear-gradient(90deg, #8bd7f512 1px, transparent 1px),
    linear-gradient(#8bd7f512 1px, transparent 1px);
  background-size: 120px 120px;
  opacity: .45;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at 68% 50%, #000 0, transparent 72%)
}
.hero-inner {
  position: relative;
  z-index: 1;
  min-height: 440px;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  align-items: center;
  padding-block: 52px
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #20a1db;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase
}
.eyebrow:before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #42c99a
}
.eyebrow.no-prefix:before {
  display: none
}
.hero .eyebrow {
  color: #20a1db
}
.hero .eyebrow:before {
  display: none
}
h1 {
  max-width: 700px;
  margin: 15px 0 19px;
  font-size: clamp(42px,5.5vw,68px);
  font-weight: 800;
  letter-spacing: -.075em;
  line-height: 1.02
}
h1 span, .section-title span {
  color: #065989
}
.hero h1 span {
  color: #20a1db
}
.hero-copy>p {
  color: #c4d2df;
  font-size: 18px
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px
}
.btn-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 41px;
  padding: 10px 16px;
  border-radius: 7px;
  font-size: 15px;
  font-weight: 750;
  transition: background-color .2s ease, color .2s ease, transform .2s ease
}
.btn-main {
  color: #fff;
  background: var(--blue)
}
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 15px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  transition: color .2s ease, transform .2s ease
}
.btn-outline:hover {
  color: #20a1db
}
.hero-proof {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  color: #aab9c8;
  font-size: 13px
}
.proof-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #29b277;
  box-shadow: 0 0 0 5px #29b27720
}
.hero-art {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  justify-self: end
}
.hero-art img {
  display: block;
  width: 100%;
  height: auto
}
.seo-promo-section {
  padding: 30px 0;
  background: var(--pale);
  border-bottom: 1px solid var(--line)
}
.seo-promo-section > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px
}
.seo-promo-art {
  flex: 0 0 190px
}
.seo-promo-art img {
  display: block;
  width: 100%;
  height: auto
}
.seo-promo-copy {
  flex: 1;
  min-width: 0
}
.seo-promo-section h2 {
  margin: 0 0 5px;
  color: var(--ink);
  font-weight: 750;
  letter-spacing: -.04em;
  line-height: 1.25
}
.seo-promo-section p {
  max-width: 850px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7
}
.seo-promo-link {
  flex: 0 0 auto;
  white-space: nowrap
}

.section-pad {
  padding-block: 68px
}
#services {
  background:
    radial-gradient(circle, #65728720 1px, transparent 1.2px) 0 0 / 24px 24px,
    #f5f6f7
}
.section-heading-row {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 35px;
  margin-bottom: 30px
}
.section-title {
  margin: 13px 0 0;
  font-size: 42px;
  font-weight: 650;
  letter-spacing: -.065em;
  line-height: 1.08
}
.section-intro {
  max-width: 410px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 15px
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px
}
.service-card {
  min-height: 225px;
  padding: 23px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  transition: transform .2s, box-shadow .2s, border-color .2s
}
#services .section-title span,
#services .service-link {
  color: #065989
}
.service-card:hover {
  transform: translateY(-3px);
  border-color: #cbd7ff;
  box-shadow: 0 14px 35px #1b31520c
}
.service-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 10px
}
.service-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain
}
.service-card h3 {
  margin: 19px 0 7px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.03em
}
.service-card p {
  min-height: 58px;
  margin: 0 0 13px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75
}
.service-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #20a1db;
  font-size: 14px;
  font-weight: 800
}
.service-link .icon {
  width: 14px;
  height: 12px;
  font-size: 12px;
  position: relative;
  transition: transform .2s
}
.service-card:hover .service-link .icon {
  transform: translateX(3px)
}
.feature-section {
  color: #fff;
  background:
    radial-gradient(circle, #20a1db24 1px, transparent 1.5px) 0 0 / 26px 26px,
    linear-gradient(#ffffff08 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(90deg, #ffffff08 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(135deg, #091726 0%, #043c5d 52%, #091726 100%)
}
.feature-section .section-title {
  color: #fff
}
.feature-section .section-title span {
  color: #20a1db
}
.feature-section .eyebrow {
  color: #20a1db
}
.feature-section .section-intro {
  color: #b3bfd0
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 30px 22px;
  margin-top: 38px
}
.feature {
  display: flex;
  align-items: flex-start;
  gap: 13px
}
.feature-icon {
  flex: 0 0 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 9px
}
.feature-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain
}
.feature h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800
}
.feature p {
  margin: 0;
  color: #aeb9c9;
  font-size: 15px;
  line-height: 1.7
}
.about-panel {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  align-items: center;
  gap: 48px;
  padding: 35px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 45px #1722350b
}
#about {
  background:
    radial-gradient(circle, #65728718 1px, transparent 1.2px) 0 0 / 26px 26px,
    linear-gradient(135deg, #f8f9fa, #eef1f4)
}
.about-image-wrap {
  overflow: hidden;
  border-radius: 10px;
  background: #e9edf1
}
.about-team {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover
}
.about-copy .eyebrow,
.about-copy .section-title span,
.about-list .icon {
  color: #065989
}
.about-copy p {
  margin: 17px 0 0;
  color: var(--muted);
  font-size: 16px
}
.about-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 22px 0;
  padding: 0;
  list-style: none
}
.about-list li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #45536a;
  font-size: 15px;
  font-weight: 700
}
.about-list .icon {
  width: 15px;
  height: 15px;
  font-size: 13px;
  color: var(--green)
}
.testimonial-section {
  border-top: 1px solid #d6d9dc;
  background: linear-gradient(135deg, #f8f9fa, #eef1f4);
  position: relative;
  overflow: hidden
}
.testimonial-section::before {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27240%27 height=%27200%27 viewBox=%270 0 240 200%27 fill=%27none%27%3E%3Cg stroke=%27%236b737b%27 stroke-width=%271%27 stroke-opacity=%27.07%27%3E%3Cpath d=%27M0 28H42Q54 28 54 40V58Q54 70 66 70H82M240 35H198Q186 35 186 47V59Q186 71 174 71H158M0 144H40Q52 144 52 132V120Q52 108 64 108H82M240 151H198Q186 151 186 139V127Q186 115 174 115H158M28 0V31Q28 43 40 43H70M76 0V22Q76 34 88 34H98M164 0V28Q164 40 152 40H142M212 0V35Q212 47 200 47M28 200V169Q28 157 40 157H70M76 200V178Q76 166 88 166H98M164 200V172Q164 160 152 160H142M212 200V165Q212 153 200 153M0 92H54Q66 92 66 104M240 94H186Q174 94 174 106M110 0V30M130 200V170M0 176H17V188H41M240 20H223V8H199%27/%3E%3Crect x=%2782%27 y=%2760%27 width=%2776%27 height=%2780%27 rx=%276%27/%3E%3Cpath d=%27M98 78H142V122H98zM106 86H134V114H106zM90 51V60M106 51V60M122 51V60M138 51V60M150 51V60M90 140V149M106 140V149M122 140V149M138 140V149M150 140V149M73 76H82M73 92H82M73 108H82M73 124H82M158 76H167M158 92H167M158 108H167M158 124H167M54 40h12m108 31h12M52 132h12m110 7h12M17 176h18m188-156h-18%27/%3E%3C/g%3E%3Cg fill=%27%236b737b%27 fill-opacity=%27.1%27%3E%3Ccircle cx=%2754%27 cy=%2728%27 r=%271.5%27/%3E%3Ccircle cx=%2766%27 cy=%2770%27 r=%271.5%27/%3E%3Ccircle cx=%27186%27 cy=%2747%27 r=%271.5%27/%3E%3Ccircle cx=%27174%27 cy=%2771%27 r=%271.5%27/%3E%3Ccircle cx=%2752%27 cy=%27132%27 r=%271.5%27/%3E%3Ccircle cx=%2764%27 cy=%27108%27 r=%271.5%27/%3E%3Ccircle cx=%27186%27 cy=%27139%27 r=%271.5%27/%3E%3Ccircle cx=%27174%27 cy=%27115%27 r=%271.5%27/%3E%3Ccircle cx=%2728%27 cy=%2743%27 r=%271.5%27/%3E%3Ccircle cx=%2728%27 cy=%27157%27 r=%271.5%27/%3E%3Ccircle cx=%27212%27 cy=%2747%27 r=%271.5%27/%3E%3Ccircle cx=%27212%27 cy=%27153%27 r=%271.5%27/%3E%3Ccircle cx=%27122%27 cy=%2760%27 r=%271.5%27/%3E%3Ccircle cx=%27122%27 cy=%27140%27 r=%271.5%27/%3E%3Ccircle cx=%27122%27 cy=%2769%27 r=%271.5%27/%3E%3Ccircle cx=%27122%27 cy=%27131%27 r=%271.5%27/%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-size: 240px 200px;
  background-repeat: repeat;
  content: "";
  pointer-events: none
}
.testimonial-section > * {
  position: relative;
  z-index: 1
}
.testimonial-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px
}
.testimonial-heading .section-title span {
  color: var(--blue)
}
.google-rating {
  display: grid;
  gap: 2px;
  justify-items: end;
  color: var(--muted);
  font-size: 14px
}
.google-rating strong {
  color: var(--ink)
}
.google-rating-stars,
.testimonial-stars {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #f5a623;
  font-size: 17px;
  letter-spacing: .12em;
  line-height: 1.2
}
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px
}
.testimonial-card {
  display: flex;
  min-height: 205px;
  flex-direction: column;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 28px #17223508
}
.testimonial-card p {
  flex: 1;
  margin: 13px 0 20px;
  color: #40516a;
  font-size: 16px;
  line-height: 1.7
}
.testimonial-quote {
  display: inline-block;
  color: #7d848b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 42px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: .6;
  opacity: .18;
  transform: translateY(5px)
}
.testimonial-author {
  display: grid;
  gap: 2px;
  padding-top: 13px;
  border-top: 1px solid var(--line)
}
.testimonial-author strong {
  color: var(--ink);
  font-size: 15px
}
.testimonial-author span {
  color: var(--muted);
  font-size: 14px
}
.google-review-icon {
  margin-left: 3px;
  display: inline-block;
  color: transparent;
  background: conic-gradient(from -45deg, #4285f4 0deg 90deg, #34a853 90deg 180deg, #fbbc05 180deg 270deg, #ea4335 270deg 360deg);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 11px
}
.testimonial-action {
  display: flex;
  justify-content: center;
  margin-top: 27px
}
footer {
  padding: 48px 0 20px;
  color: #d8e0eb;
  background: #091726
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr .7fr 1.2fr;
  gap: 28px
}
.footer-logo img {
  display: block;
  width: 180px;
  height: auto
}
.footer-copy {
  max-width: 290px;
  margin-top: 17px;
  color: #abb7c7;
  font-size: 15px
}
.footer-registration {
  margin: 17px 0 0;
  color: #b9c4d2;
  font-size: 15px
}
.footer-heading {
  margin-bottom: 13px;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .12em
}
.footer-links {
  display: grid;
  gap: 8px
}
.footer-links a, .footer-address {
  color: #b9c4d2;
  font-size: 15px
}
.footer-links a:hover {
  color: #fff
}
.footer-address p {
  margin: 0 0 9px;
  line-height: 1.7
}
.footer-address .icon {
  width: 14px;
  height: 14px;
  font-size: 15px;
  margin-right: 5px;
  color: #a9c0ff
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 34px;
  padding-top: 17px;
  border-top: 1px solid #2b3950;
  color: #8996aa;
  font-size: 15px;
  font-weight: 500
}
.footer-bottom > span:first-child {
  font-size: 14px
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 14px
}
.footer-legal a {
  color: #aeb9c9;
  text-decoration: none;
  transition: color .18s ease
}
.footer-legal a:hover,
.footer-legal a:focus-visible {
  color: #20a1db
}
.cookie-consent {
  position: fixed;
  z-index: 20;
  left: 24px;
  bottom: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  width: min(480px, calc(100% - 48px));
  padding: 15px 17px;
  border: 1px solid #d9e0e6;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 48px #09172626;
  color: #233246
}
.cookie-consent[hidden] {
  display: none
}
.cookie-copy h2 {
  margin: 0 0 5px;
  color: #152438;
  font-size: 17px
}
.cookie-copy p {
  margin: 0;
  color: #536174;
  font-size: 14px;
  line-height: 1.55
}
.cookie-copy a {
  color: #065989;
  text-decoration: underline;
  text-underline-offset: 2px
}
.cookie-actions {
  display: grid;
  gap: 8px
}
.cookie-button {
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid #065989;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease
}
.cookie-accept {
  background: #065989;
  color: #fff
}
.cookie-accept:hover {
  background: #04466d
}
.cookie-reject {
  background: #fff;
  color: #065989
}
.cookie-reject:hover {
  background: #edf5f9
}
.whatsapp-float {
  position: fixed;
  z-index: 10;
  right: 20px;
  bottom: 20px;
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #20bd67;
  box-shadow: 0 7px 22px #0a703c44;
  transition: transform .22s ease, background-color .22s ease, box-shadow .22s ease
}
.whatsapp-float::after {
  content: "Chat on WhatsApp";
  position: absolute;
  right: 66px;
  padding: 8px 12px;
  border-radius: 7px;
  color: #fff;
  background: #091726;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease
}
.whatsapp-float:hover {
  color: #fff;
  background: #159b52;
  box-shadow: 0 10px 26px #0a703c66;
  transform: translateY(-4px) scale(1.05)
}
.whatsapp-float:hover::after,
.whatsapp-float:focus-visible::after {
  opacity: 1;
  transform: translateX(0)
}
.whatsapp-float:focus-visible {
  outline: 3px solid #20a1db;
  outline-offset: 4px
}
.whatsapp-float .icon {
  width: 28px;
  font-size: 28px;
  transition: transform .22s ease
}
.whatsapp-float:hover .icon {
  transform: scale(1.08)
}






/* Website development page */
.web-page-intro {
  padding: 31px 0 47px;
  border-bottom: 1px solid #e3e7eb;
  background: #f7f8f9
}
.page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  color: #6b7788;
  font-size: 13px
}
.page-breadcrumb a:hover {
  color: #20a1db
}
.page-breadcrumb [aria-current="page"] {
  color: #172235
}
.web-intro-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: 40px
}
.web-intro-copy h1 {
  max-width: 720px;
  margin: 13px 0 17px;
  color: #172235;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: 1.1
}
.web-intro-copy > p {
  max-width: 680px;
  margin: 0;
  color: #536174;
  font-size: 16px;
  line-height: 1.8
}
.web-intro-art {
  width: min(100%, 500px);
  justify-self: end
}
.web-intro-art img {
  display: block;
  width: 100%;
  height: auto
}
.package-section {
  background: #fff
}
.package-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px
}
.package-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 25px;
  border: 1px solid #dfe5eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 30px #1722350a;
  transition: transform .2s, box-shadow .2s, border-color .2s
}
.package-card:hover {
  transform: translateY(-3px);
  border-color: #cbd7ff;
  box-shadow: 0 14px 35px #1b31520c
}
.package-featured {
  border: 2px solid #065989;
  box-shadow: 0 15px 38px #06598916
}
.package-label {
  align-self: flex-start;
  margin: -12px 0 12px;
  padding: 4px 9px;
  border-radius: 999px;
  color: #fff;
  background: #065989;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase
}
.package-name {
  color: #172235;
  font-size: 22px;
  font-weight: 800
}
.package-summary {
  min-height: 48px;
  margin: 5px 0 17px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65
}
.package-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 17px;
  border-bottom: 1px solid #e5e9ee
}
.package-price strong {
  color: #065989;
  font-size: 34px;
  letter-spacing: -.05em;
  line-height: 1
}
.package-price span {
  color: #637185;
  font-size: 14px
}
.package-highlights {
  display: grid;
  gap: 11px;
  margin: 18px 0 22px;
  padding: 0;
  list-style: none
}
.package-highlights li,
.package-included-grid li {
  position: relative;
  padding-left: 23px;
  color: #45536a;
  font-size: 15px;
  line-height: 1.55
}
.package-included-grid li {
  font-size: 15px
}
.package-highlights li::before,
.package-included-grid li::before {
  position: absolute;
  left: 0;
  color: #16855d;
  content: "✓";
  font-weight: 800
}
.package-card > .btn-main {
  width: 100%;
  margin-top: auto
}
.package-included {
  margin-top: 22px;
  padding: 25px 28px;
  border: 1px solid #e0e5ea;
  border-radius: 12px;
  background: #f7f8f9
}
.package-included h3 {
  margin: 0;
  font-size: 20px
}
.package-included-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 35px;
  margin-top: 14px
}
.package-included-grid ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none
}
.package-note {
  margin: 18px 0 0;
  color: #687688;
  font-size: 15px;
  line-height: 1.6
}
.process-section {
  background: #f4f6f8
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 13px
}
.process-card {
  padding: 19px 17px;
  border: 1px solid #e1e6eb;
  border-radius: 10px;
  background: #fff;
  transition: transform .2s, box-shadow .2s, border-color .2s
}
.process-card:hover {
  transform: translateY(-3px);
  border-color: #cbd7ff;
  box-shadow: 0 14px 35px #1b31520c
}
.process-card > span {
  color: #065989;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em
}
.process-card h3 {
  margin: 10px 0 7px;
  font-size: 17px;
  line-height: 1.35
}
.process-card p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65
}
.faq-section {
  background: #fff
}
.faq-layout {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  align-items: start;
  gap: 55px
}
.faq-layout > div:first-child .section-intro {
  margin-bottom: 22px
}
.faq-layout > div:first-child .section-title {
  color: #172235
}
.faq-list {
  border-top: 1px solid #dfe5eb
}
.faq-list details {
  padding: 17px 2px;
  border-bottom: 1px solid #dfe5eb
}
.faq-list summary {
  position: relative;
  padding-right: 28px;
  color: #172235;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  list-style: none
}
.faq-list summary::-webkit-details-marker {
  display: none
}
.faq-list summary::after {
  position: absolute;
  top: 0;
  right: 2px;
  color: #065989;
  content: "+";
  font-size: 22px;
  font-weight: 500;
  line-height: 1
}
.faq-list details[open] summary::after {
  content: "−"
}
.faq-list details p {
  margin: 11px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75
}
.faq-list details .seo-faq-image {
  display: block;
  width: min(100%, 500px);
  height: auto;
  margin: 16px 0 4px;
  border-radius: 6px
}
.faq-list details[open] p {
  animation: faqAnswerReveal .28s ease-out both
}
@keyframes faqAnswerReveal {
  from {
    opacity: 0;
    transform: translateY(-5px)
  }
  to {
    opacity: 1;
    transform: translateY(0)
  }
}
.faq-list details p a {
  color: #065989;
  text-decoration: underline;
  text-underline-offset: 2px
}
.web-cta {
  padding: 48px 0;
  color: #fff;
  background: #091726
}
.web-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px
}
.web-cta h2 {
  margin: 8px 0 5px;
  font-size: clamp(26px, 3.2vw, 36px);
  letter-spacing: -.04em
}
.web-cta p {
  margin: 0;
  color: #c4d2df;
  font-size: 15px
}





.faq-list summary {
  text-transform: capitalize;
}

/* E-commerce page */
.ecommerce-payments {
  background: #f4f6f8
}
.gateway-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px
}
.gateway-card {
  display: grid;
  min-height: 84px;
  place-items: center;
  padding: 16px;
  border: 1px solid #e0e5ea;
  border-radius: 10px;
  background: #fff;
  color: #065989;
  font-size: 16px;
  font-weight: 750;
  text-align: center
}
.gateway-card-international {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px
}
.gateway-card small {
  color: #637185;
  font-size: 12px;
  font-weight: 500
}
.payment-support {
  margin-top: 28px
}
.payment-support h3 {
  margin: 0 0 6px;
  color: #172235;
  font-size: 18px;
  font-weight: 750
}
.payment-support p {
  margin: 0;
  color: #536174;
  font-size: 15px;
  line-height: 1.7
}
.ecommerce-features {
  border-top: 1px solid #dfe5eb;
  background:
    radial-gradient(circle, #65728720 1px, transparent 1.2px) 0 0 / 24px 24px,
    #f5f6f7
}
.ecommerce-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px
}
.ecommerce-feature-card {
  padding: 23px;
  border: 1px solid #e0e5ea;
  border-radius: 10px;
  background: #fff;
  transition: transform .2s, box-shadow .2s, border-color .2s
}
.ecommerce-feature-card:hover {
  transform: translateY(-3px);
  border-color: #cbd7ff;
  box-shadow: 0 14px 35px #1b31520c
}
.ecommerce-feature-card > img {
  display: block;
  width: 112px;
  height: 112px;
  object-fit: contain
}
.ecommerce-feature-card h3 {
  margin: 8px 0 7px;
  color: #172235;
  font-size: 18px
}
.ecommerce-feature-card p {
  margin: 0;
  color: #536174;
  font-size: 15px;
  line-height: 1.7
}

/* SEO service page */
.seo-page-intro .web-intro-copy > p + p {
  margin-top: 12px
}
.seo-page-intro .web-intro-copy > .btn-main {
  margin-top: 22px
}
.seo-services-section {
  background:
    radial-gradient(circle, #65728720 1px, transparent 1.2px) 0 0 / 24px 24px,
    #f5f6f7
}
.seo-service-grid .service-card {
  min-height: 245px
}
.seo-service-grid .service-card p {
  min-height: 0;
  font-size: 15px
}
.seo-example-section {
  border-bottom: 1px solid #e0e5ea;
  background: transparent
}
.seo-example-panel {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  align-items: start;
  gap: 45px
}
.seo-example-panel .section-title {
  max-width: 430px
}
.seo-example-copy p {
  margin: 0 0 13px;
  color: #536174;
  font-size: 15px;
  line-height: 1.75
}
.seo-example-copy p:last-child {
  margin-bottom: 0
}
.ads-service-grid .service-card {
  min-height: 260px
}
.ads-intro-art {
  width: min(100%, 470px)
}
.ads-service-grid .service-card h3 {
  margin-top: 8px
}
.ads-feature-art {
  display: block;
  width: 120px;
  height: 80px;
  margin-bottom: 10px;
  background-image: url('../images/google-ads-feature-sprite.webp');
  background-repeat: no-repeat;
  background-size: 300% 300%
}
.ads-art-search { background-position: 0 0 }
.ads-art-display { background-position: 50% 0 }
.ads-art-video { background-position: 100% 0 }
.ads-art-local { background-position: 0 50% }
.ads-art-shopping { background-position: 50% 50% }
.ads-art-tracking { background-position: 100% 50% }
.ads-art-audience { background-position: 0 100% }
.ads-art-review { background-position: 50% 100% }
.ads-art-budget { background-position: 100% 100% }
.ads-services-section {
  border-bottom: 1px solid #e3e7eb
}
.ads-service-grid .service-card p {
  min-height: 0;
  font-size: 15px
}
.ads-price-card {
  width: min(100%, 560px);
  margin: 0 auto
}
.ads-price-card .package-summary {
  min-height: 0
}
.ads-process-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}
.ads-faq-section {
  border-top: 1px solid #e3e7eb
}
.content-writing-intro-art {
  width: min(100%, 460px)
}
.content-benefit-illustration {
  display: block;
  width: 128px;
  height: 128px;
  margin-bottom: 8px;
  background-image: url('../images/content-writing-benefits.webp');
  background-repeat: no-repeat;
  background-size: 300% 100%
}
.content-benefit-quality {
  background-position: 0 50%
}
.content-benefit-writer {
  background-position: 50% 50%
}
.content-benefit-service {
  background-position: 100% 50%
}
.content-writing-page .service-card {
  min-height: 225px
}
.content-writing-page .service-card h3 {
  font-weight: 600
}
.content-writing-page .service-card p {
  min-height: 0;
  font-size: 15px
}
.content-writing-features {
  border-bottom: 1px solid #e3e7eb;
  background:
    radial-gradient(circle, #65728720 1px, transparent 1.2px) 0 0 / 24px 24px,
    #f5f6f7
}
.content-expect-art {
  display: block;
  width: 88px;
  height: 88px;
  margin-bottom: 8px;
  background-image: url('../images/content-writing-expect.webp');
  background-repeat: no-repeat;
  background-size: 400% 133.333%
}
.content-expect-research {
  background-position: 0 50%
}
.content-expect-writing {
  background-position: 33.333% 50%
}
.content-expect-seo {
  background-position: 66.667% 50%
}
.content-expect-delivery {
  background-position: 100% 50%
}
.content-features-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}
.portfolio-intro-copy {
  max-width: 860px
}
.portfolio-intro-copy h1 {
  margin: 13px 0 17px;
  color: #172235;
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: 1.1
}
.portfolio-intro-copy p {
  margin: 0 0 12px;
  color: #536174;
  font-size: 16px;
  line-height: 1.8
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px
}
.portfolio-card {
  overflow: hidden;
  border: 1px solid #dfe5eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 30px #1722350a;
  transition: transform .2s, box-shadow .2s, border-color .2s
}
.portfolio-card:hover {
  transform: translateY(-3px);
  border-color: #cbd7ff;
  box-shadow: 0 14px 35px #1b31520c
}
.portfolio-thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #f1f3f5
}
.portfolio-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform .25s
}
.portfolio-card:hover .portfolio-thumb img {
  transform: scale(1.025)
}
.portfolio-card-copy {
  padding: 19px 20px 21px
}
.portfolio-card-copy h2 {
  margin: 0 0 8px;
  color: #172235;
  font-size: 19px;
  font-weight: 650;
  line-height: 1.4
}
.portfolio-card-copy p {
  margin: 0 0 13px;
  color: #536174;
  font-size: 15px;
  line-height: 1.7
}
.portfolio-visit {
  color: #065989;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px
}
.seo-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 15px
}
.seo-tool-card {
  padding: 15px;
  border: 1px solid #e0e5ea;
  border-radius: 9px;
  background: #f7f8f9
}
.seo-tool-card h3 {
  margin: 0 0 5px;
  color: #172235;
  font-size: 16px
}
.seo-tool-card h3 a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #20a1db;
  text-underline-offset: 3px
}
.seo-tool-card p {
  margin: 0;
  color: #536174;
  font-size: 14px;
  line-height: 1.6
}

/* About company page */
.about-company-page .section-title span { color: #065989 }
.about-company-intro { padding: 22px 0 64px }
.about-company-intro-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 52px }
.about-company-intro-copy h1 { max-width: 700px; margin: 12px 0 0; color: #172235; font-size: clamp(38px, 4.2vw, 54px); font-weight: 700; letter-spacing: -.055em; line-height: 1.13 }
.about-company-intro-copy p { margin: 17px 0 0; color: #536174; font-size: 16px; line-height: 1.8 }
.about-company-photo { margin: 0; overflow: hidden; border-radius: 12px; background: #eef1f3 }
.about-company-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover }
.about-company-photo figcaption { padding: 11px 16px; color: #667386; font-size: 13px }
.about-history-section.feature-section { border-block: 1px solid #ffffff1a }
.about-history-section .section-title span { color: #20a1db }
.about-history-heading { max-width: 900px; margin-bottom: 24px }
.about-history-heading .section-intro, .about-team-heading .section-intro { max-width: 660px }
.about-history-heading .section-intro { font-size: 15px }
.about-history-timeline { position: relative; display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none }
.about-history-timeline::before { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #dce7f333; content: ""; transform: translateX(-50%) }
.about-history-timeline li { display: grid; grid-template-columns: minmax(0,1fr) 210px minmax(0,1fr); align-items: center; min-height: 112px; border-bottom: 1px solid #ffffff20 }
.about-history-timeline li:last-child { border-bottom: 0 }
.history-copy { min-width: 0 }
.history-item-left .history-copy { grid-column: 1; grid-row: 1; padding: 18px 28px 18px 0; text-align: right }
.history-item-right .history-copy { grid-column: 3; grid-row: 1; padding: 18px 0 18px 28px; text-align: left }
.history-axis { position: relative; z-index: 1; display: flex; grid-column: 2; grid-row: 1; align-items: center; min-height: 112px }
.history-item-left .history-date { margin-left: auto }
.history-item-right .history-date { margin-right: auto }
.history-date { display: flex; align-items: center; gap: 11px; width: 170px; min-height: 42px; padding: 7px 13px; border-radius: 24px; background: linear-gradient(100deg,#065989,#20a1db); color: #fff; font-size: 15px; font-weight: 600; line-height: 1.3; white-space: nowrap }
.history-date b { display: grid; flex: 0 0 25px; width: 25px; height: 25px; place-items: center; border: 1px solid #ffffffaa; border-radius: 50%; font-size: 15px; font-weight: 700 }
.about-history-timeline h3 { margin: 0 0 6px; color: #fff; font-size: 20px; font-weight: 600 }
.about-history-timeline p { max-width: 520px; margin: 0; color: #d6e0ea; font-size: 16px; line-height: 1.7 }
.about-values-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin-top: 28px }
.about-value-card { padding: 27px; border: 1px solid #e1e6ea; border-radius: 10px; background: #fff }
.about-value-icon { display: grid; width: 72px; height: 72px; margin-bottom: 17px; place-items: center }
.about-value-icon img { display: block; width: 100%; height: 100%; object-fit: contain }
.about-value-card h3 { margin: 0 0 9px; color: #172235; font-size: 21px; font-weight: 600 }
.about-value-card p { margin: 0; color: #536174; font-size: 16px; line-height: 1.75 }
.about-team-section { border-block: 1px solid #e5e8eb; background: #f7f8f9 }
.about-team-heading { max-width: 750px; margin-bottom: 30px }
.about-team-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 18px }
.about-team-card { overflow: hidden; padding: 0 0 18px; border: 1px solid #e1e6ea; border-radius: 10px; background: #fff; text-align: center }
.about-team-card img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: #eef1f3 }
.about-team-card h3 { margin: 15px 10px 3px; color: #172235; font-size: 16px; font-weight: 600; line-height: 1.4 }
.about-team-card p { margin: 0 10px; color: #667386; font-size: 13px; line-height: 1.5 }
.about-founder-panel { display: grid; grid-template-columns: 150px minmax(0,1fr); align-items: start; gap: 30px; padding: 34px; border: 1px solid #e1e6ea; border-radius: 12px; background: #fff }
.about-founder-photo { width: 150px; height: 150px; margin: 0; overflow: hidden; border-radius: 50%; background: #eef1f3 }
.about-founder-photo img { display: block; width: 100%; height: 100%; object-fit: cover }
.about-founder-panel .section-title { margin-top: 8px }
.about-founder-panel blockquote { margin: 17px 0 14px; color: #536174; font-size: 16px; line-height: 1.8 }
.about-founder-signature { display: flex; flex-direction: column; gap: 3px; margin: 0; color: #172235; font-size: 14px }
.about-founder-signature strong { font-size: 16px; font-weight: 700 }
.about-founder-signature span { color: #667386 }

/* Contact page */
.contact-page-intro { padding: 22px 0 30px }
.contact-heading { max-width: 760px; margin: 0 auto; text-align: center }
.contact-heading h1 { margin: 10px 0 0; color: #172235; font-size: clamp(36px,4vw,48px); font-weight: 700; letter-spacing: -.055em; line-height: 1.15 }
.contact-heading p { max-width: 650px; margin: 14px auto 0; color: #536174; font-size: 16px; line-height: 1.7 }
.contact-main-section { background: #f7f8f9 }
.contact-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(300px,.8fr); align-items: start; gap: 24px }
.contact-form-card { padding: 30px; border: 1px solid #e0e5e9; border-radius: 12px; background: #fff }
.contact-form-card h2,.contact-details-card h2 { margin: 8px 0 0; color: #172235; font-size: 25px; font-weight: 650; letter-spacing: -.03em }
.contact-form-intro { margin: 8px 0 22px; color: #536174; font-size: 15px; line-height: 1.65 }
.contact-form-status,.contact-form-errors { margin: 0 0 18px; padding: 13px 15px; border-radius: 8px; font-size: 14px; line-height: 1.6 }
.contact-form-status { border: 1px solid #b7e0c4; background: #effaf2; color: #176b35 }
.contact-form-errors { border: 1px solid #f0c3c3; background: #fff4f4; color: #8e2424 }
.contact-form-errors p { margin: 0 0 5px; font-weight: 700 }
.contact-form-errors ul { margin: 0; padding-left: 20px }
.contact-field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px }
.contact-field { display: grid; gap: 7px; color: #26354a; font-size: 14px; font-weight: 600 }
.contact-field > span b,.contact-services legend b { color: #065989 }
.contact-field input,.contact-field textarea { width: 100%; border: 1px solid #cfd7de; border-radius: 7px; background: #fff; color: #172235; font: inherit; font-size: 15px; font-weight: 400; transition: border-color .15s,box-shadow .15s }
.contact-field input { min-height: 47px; padding: 10px 12px }
.contact-field textarea { min-height: 140px; padding: 12px; resize: vertical }
.contact-field input:focus,.contact-field textarea:focus { border-color: #20a1db; outline: 0; box-shadow: 0 0 0 3px #20a1db20 }
.contact-services { min-width: 0; margin: 22px 0; padding: 0; border: 0 }
.contact-services legend { margin-bottom: 11px; color: #26354a; font-size: 14px; font-weight: 600 }
.contact-service-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 15px }
.contact-service-options label { display: flex; align-items: flex-start; gap: 9px; color: #536174; font-size: 14px; line-height: 1.5; cursor: pointer }
.contact-service-options input { flex: 0 0 auto; width: 16px; height: 16px; margin: 2px 0 0; accent-color: #065989 }
.contact-message-field { margin-bottom: 18px }
.contact-captcha-field { max-width: 250px; margin-bottom: 18px }
.contact-form .btn-main { border: 0; cursor: pointer }
.contact-honeypot { position: absolute!important; width: 1px!important; height: 1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important }
.contact-details-card { padding: 30px; border: 1px solid #12334d; border-radius: 12px; background: radial-gradient(circle,#20a1db20 1px,transparent 1.5px) 0 0 / 24px 24px,linear-gradient(145deg,#091726,#0b2d43); color: #fff }
.contact-details-card h2 { color: #fff }
.contact-details-card .eyebrow { color: #20a1db }
.contact-direct-intro { margin: 8px 0 23px; color: #c2ced9; font-size: 15px; line-height: 1.6 }
.contact-details-list { display: grid; gap: 20px }
.contact-detail { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: start; gap: 12px }
.contact-detail-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #20a1db55; border-radius: 9px; color: #20a1db; font-size: 17px }
.contact-detail h3 { margin: 0 0 4px; color: #fff; font-size: 15px; font-weight: 600 }
.contact-detail a,.contact-detail p { display: block; margin: 0; color: #e3eaf0; font-size: 15px; line-height: 1.7; text-decoration: none }
.contact-detail a:hover { color: #20a1db }
.contact-detail .contact-map-link { margin-top: 5px; color: #20a1db; font-weight: 600 }