/* =====================================================================
   Cloud Guru Africa — custom overrides (loaded last, wins the cascade)
   ===================================================================== */

/* ---------- Top bar: Sign up (left) · Contact (centre) · Socials (right) ---------- */
.top-bar > .container {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.top-bar .login-block      { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
.top-bar .top-bar-contact  { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2;
                             -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto;
                             -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.top-bar .follow_us        { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
.top-bar .top-bar-close    { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; }

@media (max-width: 1024px) {
  /* let the template's stacked mobile layout take over */
  .top-bar .login-block, .top-bar .top-bar-contact, .top-bar .follow_us { order: 0; flex: 0 0 auto; }
}

/* ---------- Two-row main header (desktop): logo centred on row 1 ---------- */
@media (min-width: 1024px) {
  .header .header-content-wrapper {
    -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
    -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
  }

  /* Row 1 — logo, full width, centred */
  .header .logo {
    -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0;
    -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%;
    display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
    -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
    margin: 0 0 6px;
  }

  /* Row 2 — [sidebar login] · [menu centre] · [cart/search] */
  .header .user-menu  { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
  .header .primary-menu { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2;
                          -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; }
  .header .nav-add    { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }

  .header .primary-menu .primary-menu-menu {
    display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
    -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
  }

  /* Sidebar / login toggle: pull it into the flow on the left, smaller, with a user icon */
  .header .user-menu {
    position: static !important;
    -webkit-transform: none !important; -ms-transform: none !important; transform: none !important;
    width: 46px; height: 46px; min-width: 46px;
    border-width: 2px;
    margin: 0 18px 0 0;
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
  }
  .header.headroom--not-top .user-menu {
    -webkit-transform: none !important; -ms-transform: none !important; transform: none !important;
  }
  .header .nav-add { padding: 0; }
}

/* Replace the hamburger spans with a clean user / login icon (all sizes) */
.header .user-menu .user-menu-content span { display: none !important; }
.header .user-menu .user-menu-content {
  width: 100%; height: 100%;
  display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
}
.header .user-menu .user-menu-content::before {
  content: "\f007"; /* FontAwesome user */
  font-family: "FontAwesome";
  font-size: 20px; line-height: 1; color: #2f2c2c;
}
.header .user-menu:hover .user-menu-content::before { color: #4cc2c0; }

/* ---------- Footer portal buttons (next to the socials) ---------- */
.footer .cg-portals, .cg-contact-portals {
  display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
  gap: 12px; margin-top: 22px;
}
.footer .cg-portal-btn, .cg-contact-portals .cg-portal-btn {
  display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex;
  -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 30px;
  background: #4cc2c0;
  color: #fff !important;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  border: none !important;
  -webkit-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease;
}
.footer .cg-portal-btn i, .cg-contact-portals .cg-portal-btn i { font-size: 16px; }
.footer .cg-portal-btn:hover, .cg-contact-portals .cg-portal-btn:hover { background: #38a9a7; color: #fff !important; -webkit-transform: translateY(-2px); transform: translateY(-2px); }
.footer .cg-portal-btn.alt, .cg-contact-portals .cg-portal-btn.alt { background: #f7941d; }
/* Space between the info column (ends with the portal buttons) and the service lists
   once they stack on mobile/tablet (info goes full-width at <=991px). */
@media (max-width: 991px) {
  .footer .info .services { margin-top: 40px; }
}
.footer .cg-portal-btn.alt:hover, .cg-contact-portals .cg-portal-btn.alt:hover { background: #e07d0a; }

/* ---------- Service / feature icon helper (for new pattern SVGs) ----------
   These pattern SVGs are WIDE illustrations (e.g. 1100x600), not square icons,
   so they must be sized by width with auto height to stay legible. */
.cg-icon { width: auto !important; height: auto !important; max-width: 130px; max-height: 78px; object-fit: contain; }
.cg-icon-lg { width: auto !important; height: auto !important; max-width: 200px; max-height: 120px; object-fit: contain; }

/* ---------- Partner logos strip ---------- */
.cg-partners-grid {
  display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
  gap: 40px;
}
.cg-partners-grid img {
  max-height: 64px; width: auto;
  -webkit-filter: grayscale(100%); filter: grayscale(100%);
  opacity: .65;
  -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;
}
.cg-partners-grid img:hover { -webkit-filter: none; filter: none; opacity: 1; }

/* ---------- Homepage domain-search look (visual only) ---------- */
.cg-domain-search { margin: 10px 0 50px; }
.cg-domain-field {
  display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
  -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
  gap: 12px;
}
.cg-domain-field .input-standard-grey {
  max-width: 420px; width: 100%; margin: 0;
}
.cg-domain-btn { cursor: pointer; }
.cg-domain-note { margin-top: 18px; color: #76819a; }

/* Equal-height hosting teaser cards */
.cg-hosting-cards .info-box--standard { height: 100%; }
.cg-hosting-cards .info-box-image { margin-bottom: 18px; }

/* ---------- "What's included" icon row (hosting page etc.) ---------- */
.cg-included-row {
  display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
  gap: 40px;
  margin-top: 40px;
}
.cg-included-item {
  display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
  -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;
  text-align: center;
}
.cg-included-item img { width: 56px; height: 56px; object-fit: contain; margin-bottom: 12px; }
.cg-included-label { font-weight: 600; font-size: 14px; color: #2f2c2c; }

/* =====================================================================
   Refinements (session 8)
   ===================================================================== */
@media (min-width: 1024px) {
  /* Bigger logo (its own centred row, so it doesn't enlarge the menu).
     Landscape wordmark (~2.5:1) — sized by height, width auto. */
  .header .logo img { height: 60px !important; width: auto !important; }

  /* Centre the menu text within row 2 */
  .header .primary-menu {
    display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
    -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
    -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;
  }
  .header .primary-menu .primary-menu-menu { float: none !important; }

  /* Single static hero banner — modest bottom spacing (old slide tabs removed) */
  .main-slider { padding-bottom: 32px !important; }
  .main-slider .slider-thumb img { max-height: 340px !important; width: auto !important; }
  .main-slider .swiper-slide { max-height: none; }
  .main-slider .slider-content-title,
  .main-slider .slider-content-title.h1 { font-size: 40px !important; line-height: 1.15 !important; }
  .main-slider h1.slider-content-title { font-size: 46px !important; }
}

/* Single static hero — reduce bottom padding at ALL breakpoints (old slide tabs removed) */
.main-slider { padding-bottom: 36px !important; }

/* Contact-page Google map: keep it fairly small */
.cg-map { max-width: 760px; margin: 0 auto; }
.cg-map iframe { width: 100%; height: 300px; border: 0; border-radius: 6px; display: block; }

/* ---------- Fix oversized "See hosting plans" arrows + tidy hosting cards ---------- */
svg.icon-arrow-right { width: 13px !important; height: 13px !important; fill: currentColor; vertical-align: middle; }
.cg-hosting-cards .btn-link {
  display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex;
  -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;
  gap: 6px; font-weight: 600; color: #4cc2c0;
}
/* Homepage hosting cards now use clean glyphs */
.cg-hosting-cards .info-box-image { min-height: 70px; margin-bottom: 14px; }
.cg-hosting-cards .info-box-image i.cg-card-icon { font-size: 52px; line-height: 1; color: #4cc2c0; }
/* Pattern illustration inside the pricing-table circular icon: let it fill nicely instead of shrinking */
.pricing-tables-icon .cg-icon { max-width: 96px; max-height: 60px; }

/* ---------- Hosting/pricing crisp glyph icons ---------- */
.cg-fa-icon { color: #4cc2c0; line-height: 1; }
.cg-included-item .cg-fa-icon { font-size: 42px; margin-bottom: 14px; display: inline-block; }
.pricing-tables-icon .cg-fa-icon { font-size: 50px; }
.pricing-tables-icon { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; }
.info-box-image .cg-fa-icon { font-size: 60px; color: #fff; }

/* Remove the hero prev/next navigation arrows */
.main-slider .btn-next, .main-slider .btn-prev { display: none !important; }

/* Sidebar/login icon: use the logo blue (was theme red) with a white glyph */
.header .user-menu .user-menu-content { background-color: #29abe2 !important; }
.header .user-menu:hover .user-menu-content { background-color: #1f93c4 !important; }
.header .user-menu .user-menu-content::before { color: #fff !important; }
.header .user-menu:hover .user-menu-content::before { color: #fff !important; }

/* ---------- Megamenu (Services/Company): align wrapping text against leading icons ---------- */
.header .megamenu .col3 ul li > a {
  display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start;
  line-height: 1.45;
}
.header .megamenu .col3 ul li > a > i:not(.seoicon-right-arrow) {
  -webkit-box-flex: 0; -webkit-flex: 0 0 18px; -ms-flex: 0 0 18px; flex: 0 0 18px;
  text-align: center; margin-right: 9px; margin-top: 3px;
}
.header .megamenu .col3 ul li > a > i.seoicon-right-arrow {
  margin-left: auto; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
  margin-top: 4px; padding-left: 8px;
}

/* Force the megamenu flex alignment (base rule was being overridden) + colour leading icons */
.header .megamenu .col3 ul li > a { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; }
.header .megamenu .col3 ul li > a > i.fa { color: #4cc2c0; }

/* The theme hides megamenu link icons (opacity:0, hover-only). Make our LEADING icons always visible + aligned. */
.header .megamenu .col3 ul li > a > i.fa {
  opacity: 1 !important;
  margin-left: 0 !important;
  margin-right: 9px !important;
  margin-top: 3px;
  color: #4cc2c0 !important;
  font-size: 15px !important;
  -webkit-flex: 0 0 18px; -ms-flex: 0 0 18px; flex: 0 0 18px;
  text-align: center;
}

/* Pricing card annual sub-line */
.cg-rate-sub { font-size: 13px; color: #76819a; margin: -10px 0 16px; text-align: center; }

/* ---------- About-page roadmap cards ---------- */
.cg-roadmap > [class*="col-"] { margin-bottom: 24px; }
.cg-roadmap-card {
  background: #fff; border: 1px solid #eef0f2; border-top: 4px solid #4cc2c0; border-radius: 10px;
  padding: 34px 26px; height: 100%; text-align: center;
  -webkit-box-shadow: 0 14px 34px rgba(0,0,0,.06); box-shadow: 0 14px 34px rgba(0,0,0,.06);
  -webkit-transition: all .25s ease; transition: all .25s ease;
}
.cg-roadmap-card:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-box-shadow: 0 22px 44px rgba(0,0,0,.1); box-shadow: 0 22px 44px rgba(0,0,0,.1); }
.cg-roadmap-date { display: block; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #4cc2c0; margin-bottom: 18px; }
.cg-roadmap-icon { font-size: 44px; color: #29abe2; margin-bottom: 16px; line-height: 1; }
.cg-roadmap-title { font-size: 20px; margin-bottom: 12px; }
.cg-roadmap-card p { color: #76819a; margin: 0; }
.cg-roadmap-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; background: #f7941d; color: #fff; padding: 2px 8px; border-radius: 20px; margin-left: 4px; vertical-align: middle; }

/* ---------- Partner/client logos: full colour, subtle hover lift + business name ---------- */
.client-item .client-image img { -webkit-filter: none; filter: none; opacity: 1; -webkit-transition: all .3s ease; transition: all .3s ease; }
.client-item:hover .client-image { opacity: 1 !important; }
.client-item:hover .client-image img { -webkit-transform: scale(1.06); transform: scale(1.06); }
.cg-client-name { display: block; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .3px; color: #6b7280; margin-top: 12px; -webkit-transition: color .3s ease; transition: color .3s ease; }
.client-item:hover .cg-client-name { color: #2f2c2c; }

/* Our Clients page (style2 cards) — full colour, subtle hover */
.client-item-style2 .client-image img { -webkit-filter: none; filter: none; -webkit-transition: all .3s ease; transition: all .3s ease; }
.client-item-style2:hover .client-image img { -webkit-transform: scale(1.05); transform: scale(1.05); }

/* ---------- Mobile: prevent stray horizontal scroll from off-screen decorative elements ---------- */
html, body { overflow-x: hidden; }
@media (max-width: 991px) {
  .subscribe .mail, .subscribe .mail-2, .subscribe .gear { max-width: 100%; }
}

/* ---------- Sidebar (slide-out) portal logins ---------- */
.right-menu .cg-portal-login { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 12px; margin-top: 6px; }
.right-menu .cg-portal-login a {
  display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
  gap: 9px; padding: 13px 18px; border-radius: 30px; background: #4cc2c0; color: #fff !important;
  font-weight: 600; font-size: 14px; line-height: 1; border: none !important;
  -webkit-transition: all .25s ease; transition: all .25s ease;
}
.right-menu .cg-portal-login a.alt { background: #f7941d; }
.right-menu .cg-portal-login a:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-filter: brightness(1.05); filter: brightness(1.05); }

/* ---------- Homepage "Everything You Need" offers: centre on mobile ---------- */
@media (max-width: 991px) {
  .offers .offers-thumb { text-align: center; }
  .offers .offers-thumb img { margin-left: auto; margin-right: auto; display: inline-block; }
  .offers .heading-title, .offers .heading-text { text-align: center; }
}

/* ---------- Footer email — sits below the portal login buttons ---------- */
.footer .cg-footer-email {
  display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex;
  -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;
  gap: 9px;
  margin-top: 16px;
  color: #cdd5dd !important;
  font-size: 15px;
  font-weight: 500;
  -webkit-transition: color .2s ease; -o-transition: color .2s ease; transition: color .2s ease;
}
.footer .cg-footer-email i { color: #4cc2c0; font-size: 16px; }
.footer .cg-footer-email:hover { color: #4cc2c0 !important; }

/* ---------- Footer brand logo (replaces the "Cloud Guru Africa" text heading) ---------- */
.footer .info .heading .cg-footer-logo-link { display: inline-block; margin-bottom: 22px; }
.footer .info .heading .cg-footer-logo { height: 108px; width: auto; max-width: 100%; display: block; }
.footer .info .heading .heading-line { display: none; }

/* ---------- Brand-coloured CTA buttons (was near-black .btn--dark) ---------- */
.btn--dark { background-color: #29abe2 !important; }
.btn--dark:hover,
.btn--dark.btn-hover-shadow:hover { background-color: #1f93c7 !important; }
.btn--dark.btn-hover-shadow:hover:after { box-shadow: 9px 9px 9px 0 rgba(41,171,226,0.25) !important; }

/* ---------- Footer cloud-shaped top divider + tighter top spacing ---------- */
.footer { padding-top: 48px !important; }
.footer:not(.js-fixed-footer) { position: relative; }
.cg-footer-cloud { position: absolute; left: 0; right: 0; top: 1px; -webkit-transform: translateY(-100%); transform: translateY(-100%); line-height: 0; pointer-events: none; z-index: 2; }
.cg-footer-cloud svg { display: block; width: 100%; height: 55px; }
/* ---------- Email relocated to the sub-footer, left of the back-to-top button ---------- */
.footer .sub-footer .cg-subfooter-email {
  position: absolute; right: 74px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);
  display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center; gap: 8px;
  margin: 0; color: #8a8587; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap;
  -webkit-transition: color .2s ease; transition: color .2s ease;
}
.footer .sub-footer .cg-subfooter-email i { color: #4cc2c0; font-size: 15px; }
.footer .sub-footer .cg-subfooter-email:hover { color: #4cc2c0; }
@media (max-width: 980px) {
  .footer .sub-footer .cg-subfooter-email {
    position: static; -webkit-transform: none; transform: none; display: block;
    margin-top: 6px; padding-right: 70px;
  }
}

/* ---------- Project pages: white button text + tidy meta list (all project pages) ---------- */
/* CTA button text must be white on the cyan buttons (theme's .likes-block a coloured it red) */
.btn--dark, .btn--dark .text { color: #fff !important; }
/* keep the heart "likes" link its own colour, but never the button */
.likes-block .btn, .likes-block .btn .text { color: #fff !important; }

/* Client / Services / Industry list — flex so the check icon and wrapped text align */
.list--secondary li {
  display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start;
  margin-bottom: 10px;
}
.list--secondary li i {
  float: none !important; margin: 5px 12px 0 0 !important;
  -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
}
.list--secondary li span { display: block; }

/* ---------- Project case-study INTRO section — readable & balanced (all project pages) ---------- */
/* Long case-study headings were 48px in a narrow column → broke single words onto lines */
.product-description-ver2-content .heading-title {
  font-size: 28px !important;
  line-height: 1.32 !important;
  margin-bottom: 16px !important;
}
.product-description-ver2-content .heading { margin-bottom: 26px; }
.product-description-ver2-content p {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: #5b6472 !important;
}
.product-description-ver2-content time.post__date {
  font-size: 13px !important;
  letter-spacing: 1px;
  margin-bottom: 12px !important;
}
/* meta list (Client/Services/Industry) — readable, aligned */
.list--secondary li { margin-bottom: 12px; }
.list--secondary li span { font-size: 16px; line-height: 1.55; color: #5b6472; }
.list--secondary li i { color: #4cc2c0 !important; font-size: 14px; }
/* drop the meaningless product "likes" heart counter on case studies */
.likes-block .likes { display: none !important; }
.likes-block .btn { margin-bottom: 0 !important; margin-right: 0 !important; }

/* ---------- Blog post sidebar — calmer, secondary to the article ---------- */
/* The loud orange "Request a Free Quote" box was out-shouting the post */
.sidebar .w-request.bg-boxed-red {
  background: #f5f8fb !important;
  background-image: none !important;
  border: 1px solid #e7edf2 !important;
  border-radius: 10px;
  box-shadow: none !important;
  padding: 30px 26px !important;
}
.sidebar .w-request .w-request-content-title { color: #2f2c2c !important; font-size: 19px !important; }
.sidebar .w-request .w-request-content-text { color: #6b7280 !important; }
.sidebar .w-request img { max-width: 50px; height: auto; }
/* lighter, smaller widget headings + subtler accent lines */
.sidebar .widget .heading-title { font-size: 18px !important; }
.sidebar .widget .heading-line { opacity: .45; }
.sidebar .widget .heading-line .long-line { display: none; }
/* mute the category count badges */
.sidebar .w-post-category .post-count { background: #eef2f6 !important; color: #8a93a3 !important; }
/* a touch more space so widgets read as quiet, separate blocks */
.sidebar .widget { margin-bottom: 38px; }

/* ---------- Blog sidebar: crisp card treatment for Search + Post Category ---------- */
.sidebar .w-search .search {
  background: #fff !important;
  border: 1px solid #e7edf2 !important;
  border-radius: 30px !important;
  box-shadow: 0 6px 18px rgba(20,30,50,.07) !important;
  -webkit-box-shadow: 0 6px 18px rgba(20,30,50,.07) !important;
}
.sidebar .w-search .search:focus { border-color: #4cc2c0 !important; }
.sidebar .w-post-category {
  background: #fff;
  border: 1px solid #e7edf2;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(20,30,50,.07);
  -webkit-box-shadow: 0 10px 28px rgba(20,30,50,.07);
  padding: 28px 26px;
}
.sidebar .w-post-category .post-category-wrap .category-post-item:last-child { margin-bottom: 0; }

/* ---------- Blog prev/next post nav: robust flex layout so long titles can't overlap ---------- */
.pagination-arrow {
  display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;
  -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;
  gap: 30px;
  padding: 56px 0 64px !important;
}
.pagination-arrow .btn-prev-wrap,
.pagination-arrow .btn-next-wrap {
  position: static !important;
  -webkit-transform: none !important; -ms-transform: none !important; transform: none !important;
  left: auto !important; right: auto !important; top: auto !important;
  margin: 0 !important;
  -webkit-box-flex: 0; -webkit-flex: 0 1 47%; -ms-flex: 0 1 47%; flex: 0 1 47%;
  min-width: 0;
}
.pagination-arrow .btn-next-wrap { -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; }
.pagination-arrow .btn-content { max-width: 100%; min-width: 0; }
.pagination-arrow .btn-content-subtitle {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.4;
}

/* ---------- Hosting: cPanel feature cards + one-click installs ---------- */
.cg-cpanel-grid { margin-top: 6px; }
.cg-cpanel-card {
  background: #fff; border: 1px solid #eef2f6; border-radius: 12px;
  padding: 32px 26px 28px; text-align: center; height: 100%;
  box-shadow: 0 10px 28px rgba(20,30,50,.05); -webkit-box-shadow: 0 10px 28px rgba(20,30,50,.05);
  margin-bottom: 30px;
  -webkit-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease;
}
.cg-cpanel-card:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); box-shadow: 0 16px 38px rgba(20,30,50,.10); }
.cg-cpanel-icon { width: auto !important; height: 86px !important; max-width: 100%; object-fit: contain; margin-bottom: 18px; }
.cg-cpanel-card h5 { font-size: 18px; margin-bottom: 10px; }
.cg-cpanel-card p { color: #6b7280; font-size: 15px; line-height: 1.6; margin: 0; }
.cg-apps-list {
  display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
  gap: 14px; padding: 0; margin: 8px 0 0; list-style: none;
}
.cg-apps-list li {
  display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; align-items: center;
  gap: 9px; background: #fff; border: 1px solid #e7edf2; border-radius: 30px;
  padding: 11px 22px; font-weight: 600; color: #2f2c2c; font-size: 15px;
  box-shadow: 0 6px 16px rgba(20,30,50,.05);
}
.cg-apps-list li .fa { color: #29abe2; }
.cg-apps-cta { text-align: center; margin-top: 34px; }

/* ---------- SEO Analysis page: 'what's covered' + package pricing cards ---------- */
.cg-seo-checks { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 6px; }
.cg-seo-checks > [class*="col-"] { display: -webkit-flex; display: -ms-flexbox; display: flex; margin-bottom: 6px; }
.cg-seo-check { text-align: center; padding: 22px 18px 30px; width: 100%; }
.cg-seo-check .fa { display: block; }

/* ---------- Blog post: centred content + tidy footer (categories + tags) ---------- */
.cg-post-footer { border-top: 1px solid #e7ebf0; margin-top: 36px; padding-top: 28px; }
.cg-post-footer .widget { margin-bottom: 8px; }
.cg-post-footer .heading-title { font-size: 20px; }

/* ---------- Testimonial star rating ---------- */
.cg-stars { color: #f7941d; font-size: 14px; letter-spacing: 3px; margin-bottom: 14px; }
.cg-stars .fa { color: #f7941d; }
.cg-seo-check .fa { font-size: 38px; color: #29abe2; margin-bottom: 16px; }
.cg-seo-check h5 { font-size: 18px; margin-bottom: 8px; }
.cg-seo-check p { color: #6b7280; font-size: 15px; line-height: 1.6; margin: 0; }

.cg-pkg-row { margin-top: 6px; }
.cg-pkg-card {
  background: #fff; border: 1px solid #eef2f6; border-radius: 14px;
  padding: 38px 30px 34px; text-align: center; height: 100%;
  box-shadow: 0 12px 30px rgba(20,30,50,.06); -webkit-box-shadow: 0 12px 30px rgba(20,30,50,.06);
  margin-bottom: 30px;
  -webkit-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease;
}
.cg-pkg-card:hover { -webkit-transform: translateY(-5px); transform: translateY(-5px); box-shadow: 0 18px 42px rgba(20,30,50,.10); }
.cg-pkg-card.featured { border-color: #29abe2; box-shadow: 0 18px 46px rgba(41,171,226,.18); }
.cg-pkg-badge { display: inline-block; background: #29abe2; color: #fff !important; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 5px 16px; border-radius: 20px; margin-bottom: 16px; }
.cg-pkg-name { font-size: 20px; margin-bottom: 14px; }
.cg-pkg-price { font-size: 34px; font-weight: 700; color: #2f2c2c; line-height: 1; margin-bottom: 22px; }
.cg-pkg-price .cg-pkg-from { display: block; font-size: 12px; font-weight: 600; color: #9aa3b2; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.cg-pkg-price .cg-pkg-per { font-size: 15px; font-weight: 600; color: #9aa3b2; }
.cg-pkg-list { list-style: none; padding: 0; margin: 0 0 28px; }
.cg-pkg-list li { padding: 10px 0; border-bottom: 1px solid #f0f3f7; color: #5b6472; font-size: 15px; }
.cg-pkg-list li:last-child { border-bottom: none; }
.cg-pkg-note { margin-top: 22px; color: #6b7280; }

/* ---------- Mobile/tablet megamenu: clean flat submenu (was a desktop card) ----------
   The .primary-menu-responsive class is ALWAYS present, so these MUST be inside the
   mobile-menu media query (hamburger activates at max-width:1023px) — otherwise they
   break the desktop hover megamenu. */
@media (max-width: 1023px) {
  .primary-menu-responsive .primary-menu-menu > li.has-megamenu .megamenu {
    position: static !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    padding: 2px 0 10px 16px !important;
    width: 100% !important;
    top: auto !important;
  }
  .primary-menu-responsive .megamenu .megamenu-row { margin-top: 0 !important; }
  /* stack the columns full width */
  .primary-menu-responsive .megamenu [class*="col"] { float: none !important; width: 100% !important; margin: 0 !important; }
  /* drop the desktop descriptions + Google SEO box on mobile */
  .primary-menu-responsive .megamenu .megamenu-item-info-text,
  .primary-menu-responsive .megamenu .google-logo,
  .primary-menu-responsive .megamenu .google-text,
  .primary-menu-responsive .megamenu .no-menu-box { display: none !important; }
  /* section labels read as small captions */
  .primary-menu-responsive .megamenu .megamenu-item-info-title {
    font-size: 12px !important; text-transform: uppercase; letter-spacing: .6px;
    color: #9aa3b2 !important; margin: 16px 0 2px !important; line-height: 1.2 !important;
  }
  .primary-menu-responsive .megamenu ul > li a { padding: 9px 0 !important; color: #2f2c2c !important; }
  .primary-menu-responsive .megamenu ul > li a i { opacity: 1 !important; margin-right: 10px; }
}

/* ---------- Mobile/tablet header (<=1023): ONE consistent layout for phone + tablet ----------
   logo centred on its own row · MENU hamburger on the LEFT · login icon on the RIGHT.
   (Phone already did this at <=480; here it's extended up to the hamburger breakpoint so
   tablet matches phone.) */
@media (max-width: 1023px) {
  .header .header-content-wrapper { position: relative !important; min-height: 66px; }
  .header .nav-add { display: none !important; }                 /* drop cart + search */

  /* logo: centred, vertically aligned on a single compact row */
  .header .logo { float: none !important; width: 100% !important; text-align: center !important; margin: 6px auto 0 !important; }
  .header .logo img { float: none !important; display: inline-block !important; margin: 0 auto !important; height: 54px !important; }

  /* MENU hamburger: icon only (drop the wide "Menu" label so it clears the centred logo), centred LEFT */
  .header .showhide .mob-menu--title { display: none !important; }
  .primary-menu-responsive.primary-menu .showhide {
    position: absolute !important; left: 14px !important; top: 50% !important; bottom: auto !important;
    -webkit-transform: translateY(-50%) !important; transform: translateY(-50%) !important;
    float: none !important; z-index: 41;
  }

  /* login icon: centred RIGHT */
  .header .user-menu {
    display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important;
    -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
    position: absolute !important;
    right: 14px !important; left: auto !important;
    top: 50% !important; bottom: auto !important;
    -webkit-transform: translateY(-50%) !important; -ms-transform: translateY(-50%) !important; transform: translateY(-50%) !important;
    width: 44px !important; height: 44px !important;
    margin: 0 !important; border-width: 2px !important;
    z-index: 41;
  }
  .header.headroom--not-top .user-menu { -webkit-transform: translateY(-50%) !important; transform: translateY(-50%) !important; }
  .header .user-menu .user-menu-content {
    width: 100% !important; height: 100% !important; border-width: 2px !important;
    display: -webkit-box !important; display: flex !important;
    -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center;
  }
}

/* ---------- Homepage 'Latest from the Blog' cards: bordered, no date pill, read-more ---------- */
.news-slider-module .post__date { display: none !important; }
.news-slider-module .hentry.post {
  background: #fff;
  border: 1px solid #e7edf2;
  border-radius: 12px;
  padding: 30px 28px 26px;
  box-shadow: 0 10px 26px rgba(20,30,50,.05); -webkit-box-shadow: 0 10px 26px rgba(20,30,50,.05);
  height: 100%;
  -webkit-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease;
}
.news-slider-module .swiper-slide { height: auto; }
.news-slider-module .hentry.post:hover {
  -webkit-transform: translateY(-5px); transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(20,30,50,.10); border-color: #d7e0e8;
}
.news-slider-module .post__title a:hover { color: #29abe2; }
.news-slider-module .cg-readmore {
  display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex;
  -webkit-box-align: center; align-items: center; gap: 7px;
  margin-top: 18px; color: #29abe2; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .3px;
  -webkit-transition: gap .2s ease; transition: gap .2s ease;
}
.news-slider-module .cg-readmore i { font-size: 13px; }
.news-slider-module .cg-readmore:hover { gap: 12px; color: #1f93c7; }

/* ---------- Desktop megamenu: drop below the two-row menu (was top:53px → covered the menu) ---------- */
@media (min-width: 1024px) {
  .header .primary-menu-menu > li.has-megamenu > .megamenu { top: 100% !important; }
}

/* ---------- Megamenu hover bridge: stop the dropdown closing as the cursor crosses the gap ---------- */
@media (min-width: 1024px) {
  .header .primary-menu-menu > li.has-megamenu > .megamenu { margin-top: 0 !important; }
  .header .primary-menu-menu > li.has-megamenu > .megamenu::before {
    content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; background: transparent;
  }
}

/* ============================================================
   Build Your Package wizard modal (cg-wizard.js)
   ============================================================ */
.cg-wiz-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 9000;
  display: -webkit-inline-box; display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border: none; border-radius: 40px; cursor: pointer;
  background: #29abe2; color: #fff; font-weight: 700; font-size: 15px;
  box-shadow: 0 12px 30px rgba(41,171,226,.4);
  transition: all .25s ease;
}
.cg-wiz-fab:hover { background: #1f93c7; transform: translateY(-3px); box-shadow: 0 18px 40px rgba(41,171,226,.5); }
.cg-wiz-fab i { font-size: 17px; }
/* Mobile only (smartphone, <=767px): compact circular icon that tucks away while scrolling down,
   so it never blocks content. Tablet (768-1023px) keeps the full pill; desktop uses the header button. */
@media (max-width: 767px) {
  .cg-wiz-fab span { display: none; }
  .cg-wiz-fab {
    width: 52px; height: 52px; padding: 0; gap: 0; right: 16px; bottom: 16px;
    border-radius: 50%; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
  }
  .cg-wiz-fab.cg-wiz-tuck { -webkit-transform: translateY(130px); transform: translateY(130px); opacity: 0; pointer-events: none; }
}

.cg-wiz-overlay {
  position: fixed; inset: 0; z-index: 9500; display: none;
  background: rgba(20,24,38,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  padding: 24px; overflow:auto;
  -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center;
}
.cg-wiz-overlay.is-open { display: -webkit-box; display: flex; }
.cg-wiz {
  background: #fff; border-radius: 18px; width: 100%; max-width: 860px; margin: auto;
  box-shadow: 0 40px 90px rgba(0,0,0,.35); position: relative;
  display: -webkit-box; display: flex; -webkit-box-orient: vertical; flex-direction: column;
  max-height: calc(100vh - 48px); overflow: hidden;
  -webkit-animation: cgWizIn .25s ease both; animation: cgWizIn .25s ease both;
}
@keyframes cgWizIn { from { opacity:0; transform: translateY(16px) scale(.98); } to { opacity:1; transform:none; } }
.cg-wiz-close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 30px; line-height: 1; color: #9aa3b2; cursor: pointer; z-index: 2; }
.cg-wiz-close:hover { color: #2f2c2c; }

.cg-wiz-head { padding: 22px 32px 18px; border-bottom: 1px solid #eef2f6; }
.cg-wiz-logo { display: block; height: 30px; width: auto; margin: 0 0 12px; }
.cg-wiz-head h3 { font-size: 24px; margin: 0 0 4px; }
.cg-wiz-head p { color: #6b7280; font-size: 14px; margin: 0 0 18px; }
.cg-wiz-steps { list-style: none; margin: 0; padding: 0; display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; }
.cg-wiz-step { display: -webkit-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-items: center; gap: 6px; flex: 1; position: relative; }
.cg-wiz-step:not(:last-child)::after { content:""; position:absolute; top:14px; left:60%; right:-40%; height:2px; background:#e7edf2; }
.cg-wiz-step.is-done:not(:last-child)::after { background:#4cc2c0; }
.cg-wiz-dot { width: 28px; height: 28px; border-radius: 50%; background: #eef2f6; color: #9aa3b2; font-size: 13px; font-weight: 700;
  display: -webkit-box; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; transition: all .2s ease; }
.cg-wiz-steplbl { font-size: 11px; color: #9aa3b2; text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
.cg-wiz-step.is-active .cg-wiz-dot { background: #29abe2; color: #fff; }
.cg-wiz-step.is-done .cg-wiz-dot { background: #4cc2c0; color: #fff; }
.cg-wiz-step.is-active .cg-wiz-steplbl, .cg-wiz-step.is-done .cg-wiz-steplbl { color: #2f2c2c; }
@media (max-width: 600px) { .cg-wiz-steplbl { display: none; } .cg-wiz-head { padding: 22px 20px 14px; } }

.cg-wiz-body { padding: 30px 32px; overflow-y: auto; }
@media (max-width: 600px) { .cg-wiz-body { padding: 22px 18px; } }
.cg-wiz-panel h4 { font-size: 21px; margin: 0 0 4px; text-align: center; }
.cg-wiz-sub { color: #6b7280; font-size: 14px; text-align: center; margin: 0 0 22px; }
.cg-wiz-hero { display: block; height: 90px; width: auto; margin: 0 auto 14px; }
.cg-wiz-intro .cg-wiz-sub { max-width: 560px; margin-left: auto; margin-right: auto; }
.cg-wiz-introhint { text-align: center; color: #9aa3b2; font-size: 13px; margin: 18px 0 0; }
.cg-wiz-introhint strong { color: #29abe2; }

.cg-wiz-domain { display: -webkit-box; display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }
.cg-wiz-input { width: 100%; border: 1px solid #d8dee6; border-radius: 10px; padding: 13px 16px; font-size: 15px; background: #fff; }
.cg-wiz-input:focus { outline: none; border-color: #29abe2; }
.cg-wiz-textarea { display: block; margin-top: 16px; min-height: 84px; resize: vertical; font-family: inherit; line-height: 1.5; }
.cg-wiz-brief-lbl { display: block; margin-top: 20px; margin-bottom: 6px; font-weight: 600; color: #151414; font-size: 14px; text-align: left; }
.cg-wiz-tld { border: 1px solid #d8dee6; border-radius: 10px; padding: 0 12px; font-size: 15px; background: #fff; cursor: pointer; }
.cg-wiz-have { display: block; text-align: center; margin: 16px 0 0; color: #6b7280; font-size: 14px; cursor: pointer; }
.cg-wiz-have input { margin-right: 7px; }

.cg-wiz-grid { display: grid; gap: 14px; }
.cg-wiz-grid-4 { grid-template-columns: repeat(4, 1fr); }
.cg-wiz-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .cg-wiz-grid-4 { grid-template-columns: repeat(2,1fr); } .cg-wiz-grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 420px) { .cg-wiz-grid-4, .cg-wiz-grid-3 { grid-template-columns: 1fr; } }
.cg-wiz-card {
  position: relative; text-align: center; background: #fff; border: 2px solid #e7edf2; border-radius: 14px;
  padding: 20px 14px 18px; cursor: pointer; transition: all .18s ease; display: -webkit-box; display: flex;
  -webkit-box-orient: vertical; flex-direction: column; align-items: center; gap: 4px;
}
.cg-wiz-card:hover { border-color: #bfe0ef; transform: translateY(-2px); }
.cg-wiz-card.is-sel { border-color: #29abe2; background: #f4fbff; box-shadow: 0 8px 22px rgba(41,171,226,.16); }
.cg-wiz-card-ico { height: 52px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 6px; }
.cg-wiz-card-name { font-weight: 700; font-size: 15px; color: #2f2c2c; }
.cg-wiz-card-price { font-size: 15px; font-weight: 700; color: #29abe2; }
.cg-wiz-card-price span { font-size: 11px; color: #9aa3b2; font-weight: 600; }
.cg-wiz-card-desc { font-size: 12px; color: #8a93a3; line-height: 1.4; }
.cg-wiz-tick { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; background: #29abe2; color: #fff;
  font-size: 11px; line-height: 20px; opacity: 0; transform: scale(.5); transition: all .18s ease; }
.cg-wiz-card.is-sel .cg-wiz-tick { opacity: 1; transform: scale(1); }

.cg-wiz-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 560px; margin: 0 auto; }
@media (max-width: 520px) { .cg-wiz-fields { grid-template-columns: 1fr; } }

.cg-wiz-summary { max-width: 560px; margin: 0 auto; }
.cg-wiz-srow { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid #f0f3f7; font-size: 14px; }
.cg-wiz-srow span { color: #8a93a3; flex: 0 0 34%; }
.cg-wiz-srow strong { color: #2f2c2c; text-align: right; font-weight: 600; }
.cg-wiz-stotal { margin-top: 16px; }
.cg-wiz-stotal div { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; padding: 6px 0; }
.cg-wiz-stotal span { color: #6b7280; } .cg-wiz-stotal strong { color: #29abe2; font-size: 18px; }
.cg-wiz-done { text-align: center; padding: 20px 10px; }
.cg-wiz-done .fa-check-circle { font-size: 56px; color: #4cc2c0; margin-bottom: 12px; }
.cg-wiz-done h4 { margin-bottom: 8px; }
.cg-wiz-done p { color: #6b7280; max-width: 460px; margin: 0 auto 20px; font-size: 14px; }

.cg-wiz-foot { display: -webkit-box; display: flex; align-items: center; -webkit-box-pack: justify; justify-content: space-between; gap: 14px;
  padding: 18px 32px; border-top: 1px solid #eef2f6; background: #fafbfc; }
@media (max-width: 600px) { .cg-wiz-foot { padding: 14px 18px; } }
.cg-wiz-foot-total { font-size: 13px; color: #6b7280; font-weight: 600; text-align: center; -webkit-box-flex: 1; flex: 1; }
.cg-wiz-btn { border: none; border-radius: 30px; padding: 13px 26px; font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none;
  display: -webkit-inline-box; display: inline-flex; align-items: center; gap: 8px; transition: all .2s ease; }
.cg-wiz-btn-primary { background: #29abe2; color: #fff; }
.cg-wiz-btn-primary:hover { background: #1f93c7; color:#fff; }
.cg-wiz-btn-ghost { background: #fff; color: #6b7280; border: 1px solid #d8dee6; }
.cg-wiz-btn-ghost:hover { color: #2f2c2c; border-color: #b9c2cd; }

/* ---------- Web Design 'into other services' cards (clickable) ---------- */
a.cg-next-card { display: block; text-decoration: none; }
a.cg-next-card h5 { color: #2f2c2c; transition: color .2s ease; }
a.cg-next-card:hover h5 { color: #29abe2; }
.cg-next-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: #29abe2; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .4px; }
a.cg-next-card:hover .cg-next-link { gap: 10px; }

/* ---------- Build-a-Package in the header (replaces cart/search on desktop) ---------- */
.header .nav-add .cg-wiz-navli { display: inline-block; list-style: none; }
.cg-wiz-navbtn {
  display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex;
  -webkit-box-align: center; align-items: center; gap: 8px;
  background: #29abe2; color: #fff; border: none; border-radius: 30px;
  padding: 11px 20px; font-weight: 700; font-size: 14px; cursor: pointer;
  white-space: nowrap; -webkit-transition: all .2s ease; transition: all .2s ease;
}
.cg-wiz-navbtn:hover { background: #1f93c7; color: #fff; -webkit-transform: translateY(-1px); transform: translateY(-1px); }
.cg-wiz-navbtn i { font-size: 15px; }
/* the floating button is only for mobile/tablet — the header button covers desktop */
@media (min-width: 1024px) { .cg-wiz-fab { display: none !important; } }

/* ---------- SVGs more visible: larger icon slots (paired with the doubled stroke-widths) ---------- */
.cg-wiz-card-ico { height: 60px !important; }
.cg-cpanel-icon { height: 100px !important; }

/* ---------- Deepen the line-art icons so they're not faint on white ---------- */
.cg-cpanel-icon, .cg-wiz-card-ico {
  -webkit-filter: saturate(1.5) brightness(0.82) contrast(1.05);
  filter: saturate(1.5) brightness(0.82) contrast(1.05);
}

/* =====================================================================
   Microsoft Licensing page — extra sections
   ===================================================================== */
/* Pricing plan icons (pattern SVGs) — sized + deepened */
.cg-ms-plans .pricing-tables-icon img {
  height: 66px; width: auto; margin: 0 auto;
  -webkit-filter: saturate(1.5) brightness(0.82) contrast(1.05);
  filter: saturate(1.5) brightness(0.82) contrast(1.05);
}
.cg-ms-plan-rate-note { display: block; font-size: 12px; color: #9aa3b2; font-weight: 600; margin-top: 2px; }
.cg-ms-pop { position: relative; }
.cg-ms-pop .pricing-content-wrap { box-shadow: 0 18px 50px rgba(41,171,226,.18); }
.cg-ms-pop-badge {
  position: absolute; top: 16px; right: 16px; z-index: 3; background: #f7941d; color: #fff;
  font-size: 11px; font-weight: 700; padding: 5px 13px; border-radius: 30px;
  text-transform: uppercase; letter-spacing: .4px;
}

/* Enterprise / non-profit banner */
.cg-ms-ent {
  margin-top: 36px; background: #151414; border-radius: 16px; padding: 32px 38px;
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; gap: 26px; -webkit-flex-wrap: wrap; flex-wrap: wrap;
}
.cg-ms-ent-txt { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; min-width: 280px; }
.cg-ms-ent-txt h5 { color: #fff; margin: 0 0 8px; font-size: 20px; }
.cg-ms-ent-txt p { color: #b9c2cd; margin: 0; font-size: 14px; line-height: 1.65; max-width: 720px; }
.cg-ms-ent-txt strong { color: #fff; }
.cg-ms-ent .btn { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; }

/* Apps grid */
.cg-ms-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 991px) { .cg-ms-apps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .cg-ms-apps { grid-template-columns: 1fr; } }
.cg-ms-app {
  text-align: center; background: #fff; border: 1px solid #eef2f6; border-radius: 14px; padding: 28px 14px;
  -webkit-transition: all .2s ease; transition: all .2s ease;
}
.cg-ms-app:hover { -webkit-transform: translateY(-3px); transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,.07); border-color: #dbeefb; }
.cg-ms-app i { display: block; font-size: 34px; color: #29abe2; margin-bottom: 13px; }
.cg-ms-app h6 { margin: 0 0 3px; font-size: 15px; color: #2f2c2c; }
.cg-ms-app span { font-size: 12.5px; color: #8a93a3; }

/* Why Cloud Guru */
.cg-ms-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 34px; }
@media (max-width: 991px) { .cg-ms-why { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cg-ms-why { grid-template-columns: 1fr; } }
.cg-ms-why-item { display: -webkit-box; display: -webkit-flex; display: flex; gap: 16px; -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; }
.cg-ms-why-ico {
  -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 54px; height: 54px; border-radius: 13px; background: #eaf6fd;
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
}
.cg-ms-why-ico i { color: #29abe2; font-size: 22px; }
.cg-ms-why-bd h6 { margin: 0 0 6px; font-size: 16px; color: #2f2c2c; }
.cg-ms-why-bd p { margin: 0; font-size: 14px; color: #6b7280; line-height: 1.65; }

/* FAQ */
.cg-ms-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 44px; }
@media (max-width: 720px) { .cg-ms-faq { grid-template-columns: 1fr; } }
.cg-ms-faq-q { font-size: 16px; margin: 0 0 7px; color: #2f2c2c; }
.cg-ms-faq-q i { color: #29abe2; margin-right: 9px; }
.cg-ms-faq-a { margin: 0; font-size: 14px; color: #6b7280; line-height: 1.7; }

/* =====================================================================
   Web Design page — feature grid, build process, platforms, custom build
   ===================================================================== */
/* Feature grid (replaces the old pie-chart "metrics") */
.cg-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 991px) { .cg-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cg-feature-grid { grid-template-columns: 1fr; } }
.cg-feature { text-align: center; background: #fff; border: 1px solid #eef2f6; border-radius: 16px; padding: 34px 26px; -webkit-transition: all .2s ease; transition: all .2s ease; }
.cg-feature:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); box-shadow: 0 16px 38px rgba(0,0,0,.08); border-color: #dbeefb; }
.cg-feature-ico { width: 66px; height: 66px; border-radius: 16px; background: #eaf6fd; margin: 0 auto 18px;
  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; }
.cg-feature-ico i { font-size: 28px; color: #29abe2; }
.cg-feature h5 { font-size: 17px; margin: 0 0 9px; color: #2f2c2c; }
.cg-feature p { font-size: 14px; color: #6b7280; line-height: 1.6; margin: 0; }

/* Platforms grid */
.cg-platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 991px) { .cg-platform-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .cg-platform-grid { grid-template-columns: 1fr; } }
.cg-platform { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; gap: 16px;
  background: #fff; border: 1px solid #eef2f6; border-radius: 14px; padding: 20px 22px; -webkit-transition: all .2s ease; transition: all .2s ease; }
.cg-platform:hover { -webkit-transform: translateY(-3px); transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,.07); border-color: #dbeefb; }
.cg-platform > i { font-size: 34px; color: #29abe2; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 44px; text-align: center; }
.cg-platform-bd h6 { margin: 0 0 3px; font-size: 16px; color: #2f2c2c; }
.cg-platform-bd span { font-size: 13px; color: #8a93a3; line-height: 1.45; display: block; }

/* Custom build panel */
.cg-custom { margin-top: 40px; background: #f7fbfe; border: 1px solid #e6f1f9; border-radius: 18px; padding: 44px; }
@media (max-width: 767px) { .cg-custom { padding: 30px 24px; } }
.cg-custom-title { font-size: 26px; margin: 0 0 14px; color: #2f2c2c; }
.cg-custom-text { font-size: 15px; color: #5b6472; line-height: 1.7; margin: 0; }
.cg-custom-media { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; }
.cg-custom-svg { width: 100%; max-width: 320px; height: auto;
  -webkit-filter: saturate(1.5) brightness(0.82) contrast(1.05); filter: saturate(1.5) brightness(0.82) contrast(1.05); }
@media (max-width: 991px) { .cg-custom-svg { max-width: 220px; margin-top: 24px; } }
.cg-stack { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; margin: 22px 0 26px; }
.cg-chip { background: #fff; border: 1px solid #d8e6f0; color: #1f6f96; font-size: 13px; font-weight: 600; padding: 7px 15px; border-radius: 30px; }

/* =====================================================================
   Domain search tool (domain-search.html + homepage widget)
   ===================================================================== */
.cg-dom-search { display: -webkit-box; display: -webkit-flex; display: flex; gap: 12px; max-width: 620px; margin: 0 auto; }
@media (max-width: 480px) { .cg-dom-search { -webkit-flex-wrap: wrap; flex-wrap: wrap; } }
.cg-dom-input { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; min-width: 0; border: 2px solid #dbe3ec; border-radius: 12px; padding: 16px 20px; font-size: 17px; background: #fff; -webkit-transition: border-color .2s ease; transition: border-color .2s ease; }
.cg-dom-input:focus { outline: none; border-color: #29abe2; }
.cg-dom-submit { -webkit-box-flex: 0; flex: 0 0 auto; border: none; border-radius: 12px; background: #29abe2; color: #fff; font-weight: 700; font-size: 16px; padding: 0 30px; cursor: pointer;
  display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; -webkit-box-align: center; align-items: center; gap: 9px; -webkit-transition: background .2s ease; transition: background .2s ease; }
.cg-dom-submit:hover { background: #1f93c7; }
@media (max-width: 480px) { .cg-dom-submit { width: 100%; padding: 15px; } }
.cg-dom-hint { text-align: center; color: #9aa3b2; font-size: 13px; margin: 14px 0 0; }
.cg-dom-status { text-align: center; color: #6b7280; font-weight: 600; font-size: 14px; margin: 26px 0 6px; }
.cg-dom-results { max-width: 720px; margin: 0 auto; }
.cg-dom-spinner { text-align: center; color: #6b7280; padding: 26px 0; font-size: 15px; }
.cg-dom-spinner i { color: #29abe2; margin-right: 8px; }
.cg-dom-msg { text-align: center; padding: 22px; border-radius: 12px; background: #f4f7fa; color: #5b6472; font-size: 14.5px; }
.cg-dom-msg.err { background: #fef3f2; color: #b4453a; }
.cg-dom-msg i { margin-right: 7px; }

.cg-dom-list { list-style: none; margin: 16px 0 0; padding: 0; }
.cg-dom-row { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; gap: 16px;
  background: #fff; border: 1px solid #eef2f6; border-radius: 12px; padding: 16px 20px; margin-bottom: 10px; }
.cg-dom-row.is-avail { border-color: #cdeccd; background: #f6fcf6; }
.cg-dom-name { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; min-width: 0; font-size: 17px; font-weight: 700; color: #2f2c2c; word-break: break-all; }
.cg-dom-badge { -webkit-box-flex: 0; flex: 0 0 auto; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 30px; text-transform: uppercase; letter-spacing: .3px; }
.cg-dom-badge.ok  { background: #e3f6e3; color: #2f9e44; }
.cg-dom-badge.no  { background: #f1f3f5; color: #98a1ac; }
.cg-dom-badge.unk { background: #fff5e6; color: #d6892a; }
.cg-dom-price { -webkit-box-flex: 0; flex: 0 0 auto; min-width: 86px; text-align: right; font-size: 17px; font-weight: 700; color: #2f2c2c; }
.cg-dom-price small { font-size: 11px; color: #9aa3b2; font-weight: 600; }
.cg-dom-cta { -webkit-box-flex: 0; flex: 0 0 auto; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #29abe2; text-decoration: none; white-space: nowrap; }
.cg-dom-cta i { margin-left: 5px; -webkit-transition: margin .2s ease; transition: margin .2s ease; }
.cg-dom-cta:hover i { margin-left: 9px; }
.cg-dom-cta.muted { color: #b6bdc7; }
@media (max-width: 575px) {
  .cg-dom-row { -webkit-flex-wrap: wrap; flex-wrap: wrap; gap: 8px 12px; }
  .cg-dom-name { -webkit-flex: 1 0 100%; flex: 1 0 100%; }
  .cg-dom-price { min-width: 0; -webkit-box-flex: 1; flex: 1; text-align: left; }
}

/* TLD pricing strip */
.cg-tld-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
@media (max-width: 767px) { .cg-tld-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px) { .cg-tld-strip { grid-template-columns: repeat(2, 1fr); } }
.cg-tld { background: #fff; border: 1px solid #eef2f6; border-radius: 12px; padding: 20px 10px; text-align: center; }
.cg-tld-ext { display: block; font-size: 18px; font-weight: 700; color: #29abe2; margin-bottom: 4px; }
.cg-tld-price { display: block; font-size: 16px; font-weight: 700; color: #2f2c2c; }
.cg-tld-price small { font-size: 11px; color: #9aa3b2; font-weight: 600; }
.cg-tld-note { text-align: center; color: #8a93a3; font-size: 13px; margin: 24px 0 0; }

/* Homepage widget: make the existing field+button lay out as a search bar */
.cg-domain-field { display: -webkit-box; display: -webkit-flex; display: flex; gap: 12px; max-width: 600px; margin: 0 auto; }
.cg-domain-field .input-standard-grey { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; margin: 0; }
.cg-domain-btn { -webkit-box-flex: 0; flex: 0 0 auto; cursor: pointer; }
@media (max-width: 480px) { .cg-domain-field { -webkit-flex-wrap: wrap; flex-wrap: wrap; } }

/* WHOIS result card */
.cg-whois-card { max-width: 640px; margin: 26px auto 0; background: #fff; border: 1px solid #eef2f6; border-radius: 16px; padding: 28px 30px; box-shadow: 0 14px 36px rgba(0,0,0,.05); text-align: left; }
.cg-whois-card.cg-whois-avail { text-align: center; border-color: #cdeccd; background: #f6fcf6; }
.cg-whois-head { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; gap: 14px; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid #f0f3f7; margin-bottom: 18px; }
.cg-whois-avail .cg-whois-head { -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; border-bottom: none; padding-bottom: 0; margin-bottom: 14px; }
.cg-whois-domain { font-size: 21px; font-weight: 700; color: #2f2c2c; word-break: break-all; }
.cg-whois-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; }
@media (max-width: 575px) { .cg-whois-grid { grid-template-columns: 1fr; } }
.cg-whois-field span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: #9aa3b2; font-weight: 600; margin-bottom: 3px; }
.cg-whois-field strong { font-size: 14.5px; color: #2f2c2c; font-weight: 600; word-break: break-word; }
.cg-whois-availmsg { color: #2f9e44; font-size: 15px; margin: 0 0 20px; }
.cg-whois-raw { margin-top: 20px; border-top: 1px solid #f0f3f7; padding-top: 14px; }
.cg-whois-raw summary { cursor: pointer; color: #29abe2; font-weight: 600; font-size: 13px; }
.cg-whois-raw pre { margin: 12px 0 0; background: #f7fafc; border: 1px solid #eef2f6; border-radius: 10px; padding: 16px; font-size: 12px; line-height: 1.6; color: #5b6472; white-space: pre-wrap; word-break: break-word; max-height: 340px; overflow: auto; }

/* =====================================================================
   Footer social icons added via Font Awesome (Instagram / WhatsApp / Email)
   sized + brand-coloured to sit alongside the existing SVG brand icons
   ===================================================================== */
.footer .socials .cg-social-fa { display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; height: 24px; }
.footer .socials .cg-social-fa i { font-size: 23px; line-height: 1; -webkit-transition: opacity .2s ease, -webkit-transform .2s ease; transition: transform .2s ease, opacity .2s ease; }
.footer .socials .cg-social-ig i {
  color: #dc2743; /* fallback */
  background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 22%, #dc2743 45%, #cc2366 68%, #bc1888 90%);
  background: linear-gradient(45deg, #f09433 0%, #e6683c 22%, #dc2743 45%, #cc2366 68%, #bc1888 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.footer .socials .cg-social-wa i { color: #25d366; }
.footer .socials .cg-social-em i { color: #4cc2c0; }
.footer .socials .cg-social-fa:hover i { -webkit-transform: translateY(-2px); transform: translateY(-2px); opacity: .85; }

/* =====================================================================
   Megamenu "Book a Free Consultation" promo CTA (clean, no semicircle clash)
   ===================================================================== */
.megamenu .cg-mm-promo .megamenu-item-info-title { margin-bottom: 6px; }
.megamenu .cg-mm-cta {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
  gap: 8px; margin-top: 18px; width: 100%;
  background: #29abe2; color: #fff !important; border-radius: 30px;
  padding: 12px 20px; font-weight: 700; font-size: 13px; line-height: 1.2; text-decoration: none;
  -webkit-transition: background .2s ease, -webkit-transform .2s ease; transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.megamenu .cg-mm-cta:hover { background: #1f93c7; color: #fff !important; -webkit-transform: translateY(-2px); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(41,171,226,.25); }
.megamenu .cg-mm-cta i { font-size: 14px; }

/* Services 4-column mega-menu (Core / Business Systems / Add-on / Free Tools) */
.header .megamenu.cg-mm-4 .megamenu-row .col3 { width: 22%; }
@media (min-width: 1024px) {
  .header .primary-menu-menu > li.has-megamenu > .megamenu.cg-mm-4 { width: 100%; }
}

/* =====================================================================
   Feedback survey (survey.html)
   ===================================================================== */
.cg-survey { max-width: 640px; margin: 6px auto 0; text-align: left; }
.cg-hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
.cg-survey-q { margin-bottom: 26px; }
.cg-survey-label { display: block; font-weight: 700; color: #2f2c2c; font-size: 15.5px; margin-bottom: 11px; line-height: 1.45; }
.cg-survey-label span { font-weight: 400; color: #9aa3b2; font-size: 13px; }
.cg-survey-label em { color: #e0563a; font-style: normal; font-weight: 700; }
.cg-survey .cg-dom-input { width: 100%; }
.cg-survey-textarea { resize: vertical; min-height: 84px; font-family: inherit; line-height: 1.5; }
.cg-survey-select { cursor: pointer; }
.cg-survey-opts, .cg-survey-scale { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; }
.cg-survey-pill { display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; margin: 0; }
.cg-survey-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.cg-survey-pill span { display: inline-block; padding: 10px 18px; border: 2px solid #e3e9ef; border-radius: 30px; cursor: pointer; font-size: 14px; color: #5b6472; -webkit-transition: all .15s ease; transition: all .15s ease; }
.cg-survey-pill span:hover { border-color: #bfe0ef; }
.cg-survey-pill input:checked + span { border-color: #29abe2; background: #eaf6fd; color: #1f6f96; font-weight: 700; }
.cg-survey-pill input:focus + span { -webkit-box-shadow: 0 0 0 3px rgba(41,171,226,.25); box-shadow: 0 0 0 3px rgba(41,171,226,.25); }
.cg-survey-scale .cg-survey-pill span { min-width: 50px; text-align: center; font-weight: 700; }
.cg-survey-submit { margin-top: 6px; }
.cg-survey-submit.is-loading { opacity: .6; pointer-events: none; }
.cg-survey-msg { color: #b4453a; font-size: 14px; margin: 4px 0 14px; }
.cg-survey-thanks { max-width: 560px; margin: 0 auto; text-align: center; padding: 30px 16px; }
.cg-survey-thanks .fa-check-circle { font-size: 60px; color: #4cc2c0; margin-bottom: 14px; }
.cg-survey-thanks h4 { margin-bottom: 10px; }
.cg-survey-thanks p { color: #6b7280; max-width: 470px; margin: 0 auto 22px; font-size: 15px; line-height: 1.65; }

/* ---------- Homepage "Our Recent Work" cards: clear Title vs description ---------- */
.recent-case .case-item__title { text-transform: none !important; font-size: 19px; line-height: 1.3; margin: 18px 0 6px; font-weight: 700; }
.recent-case .case-item__title a { color: #151414; }
.recent-case .case-item__title a:hover { color: #29abe2; }
.recent-case .case-item__text { text-transform: none; font-size: 14px; line-height: 1.55; color: #6b7280; margin: 0; }

/* ---------- 5-up plan grid (homepage "Get Your Business Online" + hosting page) ---------- */
@media (min-width: 992px) {
  .cg-plan-grid { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; }
  .cg-plan-grid > [class*="col-"] { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex: 0 0 20%; -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; padding-left: 8px; padding-right: 8px; }
  /* equal-height cards so price + button line up across the row */
  .cg-plan-grid .pricing-tables-item { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 100%; padding-left: 16px; padding-right: 16px; }
  .cg-plan-grid .pricing-tables-position { -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; width: 100%; }
  .cg-plan-grid .position-item { font-size: 13px; }
  .cg-plan-grid .rate { margin-top: 6px; }
  .cg-plan-grid .cg-rate-sub { min-height: 3.6em; }
}

/* Skip-to-content link (a11y) */
.cg-skip{position:absolute;left:-9999px;top:0;z-index:100000;background:#29abe2;color:#fff;padding:10px 18px;font-weight:700;border-radius:0 0 8px 0;text-decoration:none;}
.cg-skip:focus{left:0;}

/* Shop checkout messages + success */
.cg-checkout-msg{margin:14px 0 0;font-weight:600;font-size:14px;}
.cg-checkout-msg.is-err{color:#d33;} .cg-checkout-msg.is-ok{color:#2f9e44;}
.cg-checkout-done{text-align:center;padding:24px 0;}
.cg-checkout-done i{font-size:56px;color:#4cc2c0;margin-bottom:14px;display:block;}
.cg-checkout-done h3{margin:0 0 10px;}

/* Contact page: compact contacts beside the map */
.cg-contact-maprow .cg-map{max-width:none;margin:0;}
.cg-contact-maprow .cg-map iframe{height:360px;}
.contacts--compact .contacts-item{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;gap:14px;margin:0 0 22px;text-align:left;}
.contacts--compact .contacts-item:last-child{margin-bottom:0;}
.contacts--compact .contacts-item img{float:none;margin:0;width:44px;height:44px;-webkit-box-flex:0;flex:0 0 44px;}
.contacts--compact .contacts-item .content{overflow:visible;margin:0;-webkit-box-flex:1;flex:1 1 auto;min-width:0;text-align:left;}
.contacts--compact .contacts-item .title{font-size:15px;line-height:1.3;}
.contacts--compact .contacts-item .sub-title{font-size:13px;margin-top:2px;}
@media (max-width:991px){.cg-contact-maprow .cg-map{margin-bottom:30px;}}

/* Blog covers: replace the heavy offset shadow with a soft modern one + rounded corners */
.post-thumb{-webkit-box-shadow:0 14px 32px rgba(23,53,99,.14)!important;box-shadow:0 14px 32px rgba(23,53,99,.14)!important;border-radius:14px!important;overflow:hidden;}
.post-thumb img{display:block;width:100%;height:auto;border-radius:14px;}

/* Homepage hosting teaser: 3-up plan grid (overrides the shared 5-up 20% on desktop) */
@media (min-width: 992px){.cg-plan-grid-3 > [class*="col-"]{-webkit-flex:0 0 33.333%;-ms-flex:0 0 33.333%;flex:0 0 33.333%;max-width:33.333%;}}

/* Homepage value-highlight band (replaces fabricated counters) */
.counters .counter-item{text-align:center;}
.counters .counter-item .counter-numbers{height:auto;min-height:0;line-height:1;font-size:46px;margin:0 0 16px;}
.counters .cg-hl-ico{font-size:46px;line-height:1;color:#fff;opacity:1;}
.counters .counter-title{margin-top:0;display:block;}
.counters .cg-hl-sub{color:#fff;opacity:.85;font-size:13px;line-height:1.4;margin:6px 0 0;}

/* Build-a-Package domain step fixes */
.cg-wiz-have input[type="checkbox"]{width:auto!important;height:auto;min-width:0;margin:0 7px 0 0;vertical-align:middle;display:inline-block;-webkit-appearance:checkbox;appearance:checkbox;}
.cg-wiz-domain .nice-select.cg-wiz-tld{min-width:108px;height:51px;line-height:49px;padding:0 36px 0 14px;border:1px solid #d8dee6;border-radius:10px;background:#fff;}
.cg-wiz-domain .nice-select.cg-wiz-tld:after{right:14px;}
.cg-wiz-hint{max-width:460px;margin:14px auto 0;font-size:13px;line-height:1.5;color:#6b7280;text-align:center;}
.cg-wiz-hint strong{color:#151414;font-weight:600;}

/* Business-systems 'How We Set It Up' steps (white band -> brand-cyan icons) */
.cg-setup .info-box--standard-centered .cg-fa-icon{color:#29abe2!important;}

/* Logo tiles: subtle surface so light/white logos (e.g. BITE wordmark) read on white */
.client-item .client-image,
.client-item-style2 .client-image{background:#e7ebf1;border:1px solid #d9dfe8;border-radius:12px;padding:22px 20px;text-align:center;-webkit-box-shadow:0 2px 10px rgba(23,53,99,.05);box-shadow:0 2px 10px rgba(23,53,99,.05);}
.client-item .client-image img,
.client-item-style2 .client-image img{max-height:56px;width:auto;}

/* Clients cards have a duplicate hover-swap logo (same image) -> show one only */
.client-item-style2 .client-image img.hover{display:none!important;}

/* ---------- Contact page revamp ---------- */
.cg-contact-info{margin:34px 0 0;}
.cg-contact-quick{margin:34px 0 0;padding:22px 24px;background:#f6f9fb;border:1px solid #e6edf3;border-radius:12px;}
.cg-contact-quick-title{margin:0 0 12px;font-size:16px;font-weight:700;color:#2f2c2c;}
.cg-contact-quick ul{margin:0;padding:0;list-style:none;}
.cg-contact-quick li{margin:0 0 10px;}
.cg-contact-quick li:last-child{margin-bottom:0;}
.cg-contact-quick a{font-size:14.5px;color:#4b5563;display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;gap:10px;-webkit-transition:color .15s ease;transition:color .15s ease;}
.cg-contact-quick a:hover{color:#29abe2;}
.cg-contact-quick a .fa{color:#29abe2;width:18px;text-align:center;}
.cg-contact-portals{margin-top:30px;}
.cg-contact-panel{background:#fff;border:1px solid #e6edf3;border-radius:16px;padding:36px 38px 40px;-webkit-box-shadow:0 14px 40px rgba(21,20,20,.07);box-shadow:0 14px 40px rgba(21,20,20,.07);}
.cg-contact-panel-title{margin:0 0 24px;font-size:20px;font-weight:700;color:#2f2c2c;}
.cg-contact-field{margin-bottom:20px;}
.cg-contact-form .cg-dom-input{width:100%;}
.cg-contact-form select.cg-dom-input{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235b6472' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center;padding-right:44px;}
.cg-contact-textarea{resize:vertical;min-height:130px;font-family:inherit;line-height:1.6;}
.cg-contact-note{margin:16px 0 0;font-size:13px;color:#9aa3b2;}
.cg-contact-note .fa{color:#29abe2;margin-right:6px;}
.cg-map-wide{max-width:none;margin:0;}
.cg-map-wide iframe{height:380px;}
@media (max-width:991px){.cg-contact-panel{margin-top:40px;padding:28px 22px 32px;}}

/* ---------- Hosting FAQ ---------- */
.cg-faq-item{margin-bottom:34px;padding:24px 26px;background:#f6f9fb;border:1px solid #e6edf3;border-radius:12px;height:100%;}
.cg-faq-q{margin:0 0 10px;font-size:16.5px;font-weight:700;color:#2f2c2c;line-height:1.4;}
.cg-faq-q .fa{color:#29abe2;margin-right:8px;}
.cg-faq-item .text{margin:0;font-size:15px;line-height:1.65;}