/*
 * Growthweb Digital home sections
 * Loaded after the existing responsive and luxury styles so these rules
 * remain stable on desktop, tablet and mobile.
 */

/* ---------- Static services: four cards per row ---------- */
.home-services-grid-section {
  position: relative;
  overflow: hidden;
}

.home-services-grid {
  align-items: stretch;
}

.home-services-grid > [class*="col-"] {
  display: flex;
}

.home-services-grid .service-card {
  width: 100%;
  min-height: 100%;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(43, 21, 63, 0.11);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(42, 18, 66, 0.08);
}

.home-services-grid .service-card-image {
  width: 100%;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  flex: 0 0 auto;
}

.home-services-grid .service-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-services-grid .service-card-content {
  width: 100%;
  flex: 1 1 auto;
  padding: 23px 22px 25px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.home-services-grid .service-card h3 {
  width: 100%;
  margin: 0 0 12px;
  font-size: 1.18rem;
  line-height: 1.3;
}

.home-services-grid .service-card-content > p {
  width: 100%;
  margin: 0 0 20px;
  font-size: 0.91rem;
  line-height: 1.65;
}

.home-services-grid .service-card-actions {
  width: 100%;
  margin-top: auto;
}

/* ---------- Best website designing company ---------- */
.best-website-company-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 7% 12%, rgba(242, 166, 43, 0.15), transparent 27%),
    radial-gradient(circle at 96% 88%, rgba(123, 53, 212, 0.13), transparent 30%),
    #fff;
}

.best-website-company-section::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  top: -225px;
  right: -125px;
  border: 44px solid rgba(123, 53, 212, 0.05);
  border-radius: 50%;
  pointer-events: none;
}

.best-website-company-section .container {
  position: relative;
  z-index: 1;
}

.website-company-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(43, 21, 63, 0.13);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 70px rgba(53, 25, 88, 0.10);
}

.website-company-card {
  grid-column: span 2;
  min-width: 0;
  min-height: 188px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 30px;
  position: relative;
  background: #fff;
  border-right: 1px solid rgba(43, 21, 63, 0.11);
  border-bottom: 1px solid rgba(43, 21, 63, 0.11);
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.website-company-card:nth-child(3) {
  border-right: 0;
}

.website-company-card:nth-child(4),
.website-company-card:nth-child(5) {
  grid-column: span 3;
  border-bottom: 0;
}

.website-company-card:nth-child(5) {
  border-right: 0;
}

.website-company-card:hover {
  z-index: 2;
  transform: translateY(-4px);
  background: linear-gradient(145deg, #fff, #faf6ff);
  box-shadow: 0 18px 45px rgba(53, 25, 88, 0.12);
}

.website-company-icon {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  display: grid;
  place-items: center;
  position: relative;
  border-radius: 22px;
  color: #fff;
  font-size: 1.8rem;
  background: linear-gradient(145deg, var(--purple), var(--purple-2));
  box-shadow: 0 16px 32px rgba(123, 53, 212, 0.24);
}

.website-company-card:nth-child(even) .website-company-icon {
  background: linear-gradient(145deg, var(--orange), #ffbf52);
  box-shadow: 0 16px 32px rgba(242, 166, 43, 0.24);
}

.website-company-icon::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 17px;
}

.website-company-icon i {
  position: relative;
  z-index: 1;
}

.website-company-card h3 {
  margin: 0 0 9px;
  font-size: 1.12rem;
  line-height: 1.3;
}

.website-company-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.62;
}

/* ---------- Advanced technologies ---------- */
.advanced-technology-section {
  position: relative;
  overflow: hidden;
}

.technology-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}

.technology-card {
  min-width: 0;
  min-height: 155px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 22px 16px;
  border: 1px solid rgba(43, 21, 63, 0.10);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 14px 36px rgba(53, 25, 88, 0.07);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.technology-card:hover {
  transform: translateY(-7px);
  border-color: var(--technology-color);
  box-shadow: 0 22px 48px rgba(53, 25, 88, 0.13);
}

.technology-logo {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(43, 21, 63, 0.06);
  border-radius: 22px;
  color: var(--technology-color);
  background: var(--technology-soft);
  font-size: 2.35rem;
}

.technology-logo span {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.05em;
}

.technology-card h3 {
  margin: 0;
  text-align: center;
  font-size: 0.96rem;
  line-height: 1.3;
}

/* ---------- Industries ---------- */
.industry-section {
  position: relative;
  overflow: hidden;
}

.product-industry-section {
  background:
    radial-gradient(circle at 0 0, rgba(242, 166, 43, 0.10), transparent 24%),
    #fff;
}

.service-industry-section {
  background:
    radial-gradient(circle at 100% 100%, rgba(123, 53, 212, 0.10), transparent 28%),
    linear-gradient(180deg, #fbf9fe 0, #f6f1fb 100%);
}

.industry-heading-copy {
  font-size: 0.96rem;
  line-height: 1.68;
}

.industry-pill-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 14px;
  align-items: stretch;
}

.industry-pill {
  width: 100%;
  min-width: 0;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  padding: 14px 16px;
  border: 1px solid rgba(123, 53, 212, 0.16);
  border-radius: 16px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 9px 24px rgba(53, 25, 88, 0.055);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.industry-pill i {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  flex: 0 0 23px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--purple-2));
  font-size: 0.62rem;
}

.product-industry-section .industry-pill:nth-child(3n) i,
.service-industry-section .industry-pill:nth-child(2n) i {
  background: linear-gradient(135deg, var(--orange), #ffbf52);
}

.industry-pill:hover {
  transform: translateY(-3px);
  border-color: rgba(123, 53, 212, 0.38);
  background: #fdfbff;
  box-shadow: 0 15px 32px rgba(53, 25, 88, 0.10);
}

/* ---------- Home contact ---------- */
.home-contact-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 18%, rgba(242, 166, 43, 0.19), transparent 30%),
    linear-gradient(135deg, #251037 0%, #442063 50%, #6d2ca7 100%);
}

.home-contact-shell {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 90px rgba(18, 6, 28, 0.30);
}

.home-contact-info {
  padding: 54px !important;
  color: rgba(255, 255, 255, 0.80);
  background:
    linear-gradient(rgba(35, 13, 53, 0.82), rgba(35, 13, 53, 0.82)),
    radial-gradient(circle at 20% 10%, rgba(242, 166, 43, 0.42), transparent 28%);
}

.home-contact-info h2 {
  margin: 0 0 20px;
  color: #fff;
  font-size: clamp(2rem, 3.5vw, 3.1rem);
}

.home-contact-info p {
  font-size: 1rem;
}

.home-contact-points {
  display: grid;
  gap: 13px;
  margin: 30px 0;
}

.home-contact-points > div {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  font-weight: 700;
}

.home-contact-points i {
  color: var(--orange);
}

.home-contact-direct {
  display: grid;
  gap: 11px;
  margin-top: 32px;
}

.home-contact-direct a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-weight: 700;
  word-break: break-word;
}

.home-contact-direct i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  border-radius: 12px;
  color: var(--purple-dark);
  background: #fff;
}

.home-contact-form-wrap {
  padding: 52px !important;
  background: #fff;
}

.home-contact-form-wrap > h2 {
  margin: 0 0 26px;
}

.home-contact-form label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
}

.home-contact-form .form-control,
.home-contact-form .form-select {
  min-height: 52px;
  border: 1px solid rgba(43, 21, 63, 0.14);
  border-radius: 12px;
  background: #fcfbfd;
}

.home-contact-form textarea.form-control {
  min-height: 132px;
  resize: vertical;
}

.home-contact-form .form-control:focus,
.home-contact-form .form-select:focus {
  border-color: rgba(123, 53, 212, 0.52);
  box-shadow: 0 0 0 0.22rem rgba(123, 53, 212, 0.10);
  background: #fff;
}

/* ---------- FAQ ---------- */
.home-faq-intro {
  position: sticky;
  top: 135px;
}

.home-faq-accordion {
  display: grid;
  gap: 14px;
}

.home-faq-accordion .accordion-item {
  overflow: hidden;
  border: 1px solid rgba(43, 21, 63, 0.10);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(53, 25, 88, 0.06);
}

.home-faq-accordion .accordion-button {
  padding: 21px 23px;
  color: var(--ink);
  background: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: none !important;
}

.home-faq-accordion .accordion-button:not(.collapsed) {
  color: var(--purple-dark);
  background: linear-gradient(135deg, #fbf7ff, #fff9ef);
}

.home-faq-accordion .accordion-button::after {
  width: 34px;
  height: 34px;
  margin-left: 18px;
  border-radius: 10px;
  background-color: #f2e9fc;
  background-position: center;
  background-size: 14px;
}

.home-faq-accordion .accordion-body {
  padding: 0 23px 23px;
  color: var(--text);
  line-height: 1.72;
}

/* ---------- Four service names in one desktop header row ---------- */
@media (min-width: 1200px) {
  .main-navbar .navbar-nav {
    flex-wrap: nowrap !important;
  }

  .navbar-service-dropdown {
    flex: 0 0 auto !important;
  }

  .main-navbar .service-primary-link {
    width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
  }

  .service-primary-text {
    white-space: nowrap !important;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .industry-pill-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .technology-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .website-company-card,
  .website-company-card:nth-child(3),
  .website-company-card:nth-child(4) {
    grid-column: span 3;
    border-right: 1px solid rgba(43, 21, 63, 0.11);
    border-bottom: 1px solid rgba(43, 21, 63, 0.11);
  }

  .website-company-card:nth-child(even) {
    border-right: 0;
  }

  .website-company-card:nth-child(5) {
    grid-column: 2 / span 4;
    border-right: 1px solid rgba(43, 21, 63, 0.11);
    border-bottom: 0;
  }
}

@media (max-width: 991px) {
  .website-company-grid {
    grid-template-columns: 1fr;
  }

  .website-company-card,
  .website-company-card:nth-child(3),
  .website-company-card:nth-child(4),
  .website-company-card:nth-child(5) {
    grid-column: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(43, 21, 63, 0.11);
  }

  .website-company-card:last-child {
    border-bottom: 0;
  }

  .technology-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-contact-info,
  .home-contact-form-wrap {
    padding: 42px !important;
  }

  .home-faq-intro {
    position: static;
  }
}

@media (max-width: 767px) {
  .technology-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
  }

  .technology-card {
    min-height: 138px;
    padding: 18px 12px;
  }

  .technology-logo {
    width: 66px;
    height: 66px;
    border-radius: 19px;
    font-size: 2rem;
  }

  .website-company-card {
    min-height: 0;
    padding: 24px;
  }

  .website-company-icon {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
    border-radius: 19px;
    font-size: 1.5rem;
  }

  .industry-pill-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .industry-pill {
    min-height: 60px;
    padding: 13px 14px;
    border-radius: 14px;
  }

  .home-contact-info,
  .home-contact-form-wrap {
    padding: 32px 24px !important;
  }

  .home-contact-shell {
    border-radius: 24px;
  }

  .home-faq-accordion .accordion-button {
    padding: 18px;
    font-size: 0.93rem;
  }

  .home-faq-accordion .accordion-body {
    padding: 0 18px 19px;
  }
}

@media (max-width: 480px) {
  .industry-pill-grid {
    grid-template-columns: 1fr;
  }

  .industry-pill {
    min-height: 56px;
  }

  .home-services-grid .service-card {
    padding: 0 !important;
  }

  .website-company-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .technology-card h3 {
    font-size: 0.86rem;
  }
}

/* ---------- Requested navbar slider, service-card and FAQ refinements ---------- */
/* Solid brand background for the moving strip; no gradient or side fades. */
.nav-services-section,
.nav-services-section-full {
  background: #2b153f !important;
}

.nav-services-marquee,
.nav-services-marquee-full {
  background: transparent !important;
  box-shadow: none !important;
}

.nav-services-marquee::before,
.nav-services-marquee::after {
  display: none !important;
}

/* Keep Explore Service and the WhatsApp icon aligned with a visible gap. */
.home-services-grid .service-card-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
}

.home-services-grid .service-card-actions .service-card-primary-link {
  min-width: 0;
  flex: 0 1 auto;
  white-space: nowrap;
}

.home-services-grid .service-card-actions .service-card-whatsapp {
  width: 42px;
  height: 42px;
  min-width: 42px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex: 0 0 42px;
}

.home-services-grid .service-card-actions .service-card-whatsapp i {
  margin: 0 !important;
  font-size: 1.18rem;
}

/* Maintain clear spacing between FAQ text and the accordion toggle icon. */
.home-faq-accordion .accordion-button {
  column-gap: 24px;
}

.home-faq-accordion .accordion-button::after {
  flex: 0 0 34px;
  margin-left: auto !important;
}

/* Compact top services strip and reliable floating call/social visibility */
.nav-services-section-full {
  padding: 6px 0 !important;
}

.nav-services-section-full .nav-services-marquee {
  padding: 1px 0 !important;
}

.nav-services-section-full .nav-service-pill {
  min-height: 40px !important;
  padding: 6px 14px 6px 8px !important;
}

.nav-services-section-full .nav-service-icon {
  width: 27px !important;
  height: 27px !important;
  flex-basis: 27px !important;
}

.nav-services-section-full .nav-service-icon i {
  font-size: 0.8rem;
}

.gw-floating-actions {
  z-index: 1075 !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.gw-floating-actions .gw-floating-social,
.gw-floating-actions .gw-enquiry-trigger {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.gw-floating-actions .gw-floating-social {
  display: grid !important;
}

.gw-floating-call {
  background: #16883f !important;
}

@media (max-width: 575px) {
  .nav-services-section-full {
    padding: 5px 0 !important;
  }

  .nav-services-section-full .nav-service-pill {
    min-height: 36px !important;
    padding: 5px 12px 5px 7px !important;
  }

  .nav-services-section-full .nav-service-icon {
    width: 25px !important;
    height: 25px !important;
    flex-basis: 25px !important;
  }
}

/* Final compact service strip and stacked Call + WhatsApp buttons */
.nav-services-section,
.nav-services-section-full {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.nav-services-section .nav-services-marquee,
.nav-services-section-full .nav-services-marquee,
.nav-services-section .nav-services-marquee-full,
.nav-services-section-full .nav-services-marquee-full {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.nav-services-section .nav-service-pill,
.nav-services-section-full .nav-service-pill {
  min-height: 34px !important;
  padding: 4px 11px 4px 6px !important;
  gap: 7px !important;
  font-size: 0.78rem !important;
}

.nav-services-section .nav-service-icon,
.nav-services-section-full .nav-service-icon {
  width: 23px !important;
  height: 23px !important;
  flex: 0 0 23px !important;
}

.nav-services-section .nav-service-icon i,
.nav-services-section-full .nav-service-icon i {
  font-size: 0.7rem !important;
}

.floating-contact-stack {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1076;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
}

.floating-contact-stack .floating-whatsapp,
.floating-contact-stack .floating-call-button {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  font-size: 1.65rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.22);
  transform-origin: center;
}

.floating-contact-stack .floating-call-button {
  background: #0058AB;
}

.floating-contact-stack .floating-whatsapp {
  background: #25d366;
}

.floating-contact-stack .floating-call-button:hover,
.floating-contact-stack .floating-call-button:focus-visible,
.floating-contact-stack .floating-whatsapp:hover,
.floating-contact-stack .floating-whatsapp:focus-visible {
  color: #fff;
  filter: brightness(1.08);
}

.floating-vibration-button {
  animation: gw-floating-vibration 3.4s ease-in-out infinite;
}

.floating-contact-stack .floating-whatsapp {
  animation-delay: 0.18s;
}

@keyframes gw-floating-vibration {
  0%, 80%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  82% { transform: translate3d(-2px, 0, 0) rotate(-4deg); }
  84% { transform: translate3d(2px, 0, 0) rotate(4deg); }
  86% { transform: translate3d(-2px, 0, 0) rotate(-3deg); }
  88% { transform: translate3d(2px, 0, 0) rotate(3deg); }
  90% { transform: translate3d(-1px, 0, 0) rotate(-2deg); }
  92% { transform: translate3d(1px, 0, 0) rotate(2deg); }
  94% { transform: translate3d(0, 0, 0) rotate(0); }
}

@media (max-width: 575px) {
  .nav-services-section,
  .nav-services-section-full {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }

  .nav-services-section .nav-service-pill,
  .nav-services-section-full .nav-service-pill {
    min-height: 32px !important;
    padding: 3px 10px 3px 5px !important;
    font-size: 0.74rem !important;
  }

  .nav-services-section .nav-service-icon,
  .nav-services-section-full .nav-service-icon {
    width: 22px !important;
    height: 22px !important;
    flex-basis: 22px !important;
  }

  .floating-contact-stack {
    right: 16px;
    bottom: 16px;
    gap: 9px;
  }

  .floating-contact-stack .floating-whatsapp,
  .floating-contact-stack .floating-call-button {
    width: 52px;
    height: 52px;
    font-size: 1.48rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-vibration-button {
    animation: none !important;
  }
}