body,
p,
span:not(.material-symbols-outlined),
a,
li,
button {
  letter-spacing: -0.5px !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
.font-headline-xl,
.font-headline-lg,
.font-headline-md,
.font-headline-sm {
  letter-spacing: -1px !important;
}
body {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
}
/* Restore heading font sizes which were overridden */
h1,
.font-headline-xl {
  font-size: clamp(2.75rem, 5vw, 4rem) !important;
}
h2,
.font-headline-lg {
  font-size: clamp(2.5rem, 4vw, 3.25rem) !important;
}
h3 {
  font-size: 1.75rem !important;
}

@media (min-width: 768px) {
  h3 {
    font-size: 2rem !important;
  }
}

#solutions h3,
.solutions-subheading {
  font-size: 1.75rem !important;
}

@media (min-width: 768px) {
  #solutions h3,
  .solutions-subheading {
    font-size: 2rem !important;
  }
}

/* Solutions Section Mobile Column Reverse for Image On Top */
@media (max-width: 767px) {
  .solutions-row-reverse {
    display: flex !important;
    flex-direction: column-reverse !important;
  }
}
h4 {
  font-size: var(--font-size-headline-sm, 1.25rem) !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
button,
a.bg-primary,
a.bg-white,
a.border-primary,
.font-headline-xl,
.font-headline-lg,
.font-headline-md,
.font-headline-sm,
.font-label-md {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 600 !important;
}
button,
a.bg-primary,
a.bg-white,
a.border-primary,
.btn {
  font-size: 16px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
button:hover,
a.bg-primary:hover,
a.bg-white:hover,
a.border-primary:hover,
.btn:hover {
  transform: translateY(-2px) !important;
}
/* Hover animations for primary red buttons */
button.bg-primary:hover,
a.bg-primary:hover {
  background-color: #900016 !important; /* Slightly darker crimson red */
  box-shadow: 0 10px 20px -2px rgba(180, 6, 31, 0.3) !important;
}
/* Hover animations for white buttons */
button.bg-white:hover,
a.bg-white:hover {
  background-color: #faf0d7 !important; /* Cream transition */
  box-shadow: 0 10px 20px -2px rgba(0, 0, 0, 0.1) !important;
  color: #b4061f !important;
}
/* Hover animations for outline buttons */
button.border-primary:hover,
a.border-primary:hover {
  background-color: rgba(180, 6, 31, 0.05) !important;
  box-shadow: 0 10px 20px -2px rgba(180, 6, 31, 0.1) !important;
}
/* Click active compression state */
button:active,
a.bg-primary:active,
a.bg-white:active,
a.border-primary:active,
.btn:active {
  transform: translateY(0px) !important;
}
.premium-shadow {
  box-shadow: 0 4px 20px -2px rgba(180, 6, 31, 0.15);
  transition: all 0.3s ease;
}
.premium-shadow:hover {
  box-shadow: 0 20px 40px -4px rgba(180, 6, 31, 0.2);
  transform: translateY(-4px);
}
.active-accordion-content {
  max-height: 500px;
  opacity: 1;
}
.inactive-accordion-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}
header nav div a {
  font-family: "Montserrat", sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  color: rgb(255, 255, 255) !important;
  font-size: 18px !important;
  line-height: 27px !important;
}
@media (min-width: 768px) {
  .py-section-gap-desktop {
    padding-top: 4% !important;
    padding-bottom: 4% !important;
  }
}
.tag-pill {
  display: inline-block;
  background-color: rgba(180, 6, 31, 0.1);
  color: #b4061f;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: "Montserrat", sans-serif;
}
.faq-item button:hover {
  background-color: #b4061f !important;
  color: #ffffff !important;
  transform: none !important;
}
.faq-item button:hover .faq-icon {
  color: #ffffff !important;
}
.faq-content {
  border-top-width: 0px !important;
}
.faq-item button.bg-primary + .faq-content {
  border-top-width: 1px !important;
}

/* Logo Marquee Animation */
@keyframes logoMarquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.logo-marquee-container {
  display: flex;
  overflow: hidden;
  width: 100%;
  position: relative;
  padding: 2.75rem 0;
}
.logo-marquee-track {
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: logoMarquee 25s linear infinite;
}
.logo-marquee-track:hover {
  animation-play-state: paused;
}
.logo-marquee-item {
  width: 0.5% !important;
  max-width: 100%;
  object-fit: contain;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.logo-marquee-item:hover {
  transform: scale(1.08);
}

/* ============================================
   Global page width
   - Default (desktop): content spans 80% of the viewport, centered
   - Mobile (< 768px): full width with 4% padding on the left and right
   ============================================ */
.max-w-container-max-width {
  width: 80% !important;
  max-width: 80% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 767px) {
  .max-w-container-max-width {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* 4% side padding across the entire page on mobile */
  .px-gutter {
    padding-left: 4% !important;
    padding-right: 4% !important;
  }
}

/* "Areas We Serve in Mumbai" card titles */
.area-card-title {
  font-size: 18px !important;
  font-weight: 500 !important;
}

/* ===================== Lead form controls =====================
   The global button rules above (16px, weight 600, hover lift) would
   otherwise make the custom Occasion dropdown look bigger and bolder
   than the real inputs beside it. This forces every control in the
   lead form to render identically: same height, size and weight. */
.tbgc-field {
  font-family: "Montserrat", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  height: 48px !important;
  letter-spacing: -0.5px !important;
}

/* Kill the global button hover/active animation on the Occasion toggle. */
button.tbgc-field:hover,
button.tbgc-field:active {
  transform: none !important;
  box-shadow: none !important;
  background-color: #ffffff !important;
  color: inherit !important;
}

/* Grey placeholder look until the user picks a value. */
.tbgc-placeholder {
  color: #9ca3af !important;
}
.tbgc-value {
  color: #201a1a !important;
}

/* Same chevron the Tailwind forms plugin draws on <select>, so the
   Occasion toggle and the Team Size select match exactly. */
.tbgc-chevron {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
  padding-right: 2.5rem !important;
}

/* Options inside the Occasion list. */
.tbgc-option {
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: -0.5px !important;
}
button.tbgc-option:hover,
button.tbgc-option:active {
  transform: none !important;
  box-shadow: none !important;
}

/* Occasion list: hide the scrollbar but keep it scrollable, so it looks
   like a native <select> dropdown. */
.tbgc-occasion-list {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tbgc-occasion-list::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* ===================== Footer location links =====================
   Values copied from the live Elementor footer export
   (elementor-22845, nav-menu widgets "new-location-2" / "dubai-location-2")
   so the static page matches the real site exactly.
   The !important flags are needed to beat the global a/li rules above. */
.tbgc-loc-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Elementor align_items: justify */
}

.tbgc-loc-item {
  display: flex;
  align-items: center;
  border: 1px solid #dbdbdb;
  border-radius: 5px;
  margin: 5px;
  padding: 9px 10px; /* li 1px + menu item 0.5rem */
  font-family: "Open Sans", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5em !important;
  letter-spacing: 0.5px !important;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.tbgc-loc-item:hover,
.tbgc-loc-item:focus-visible {
  background: #ffffff;
  color: #b4061f;
}

/* ============ Live Elementor footer compatibility ============
   This page sets `a, li, button { letter-spacing: -0.5px !important }`
   globally. Inside the real Elementor footer that squashes every location
   pill and makes the rows break in the wrong place. These rules restore
   Elementor's own spacing, scoped to the footer only so the rest of the
   page is untouched. Higher specificity is what lets them win. */
.tbgc-live-footer a,
.tbgc-live-footer li,
.tbgc-live-footer button,
.tbgc-live-footer p,
.tbgc-live-footer span {
  letter-spacing: normal !important;
}

/* The location menus use +0.5px on the live site. */
.tbgc-live-footer .elementor-nav-menu a {
  letter-spacing: 0.5px !important;
}

/* Kill this page's global button hover lift inside the footer. */
.tbgc-live-footer button:hover,
.tbgc-live-footer button:active,
.tbgc-live-footer a:hover,
.tbgc-live-footer a:active {
  transform: none !important;
}

/* Elementor sizes its own buttons and inputs. */
.tbgc-live-footer button,
.tbgc-live-footer input {
  font-size: inherit !important;
}

/* ---- Footer heading sizes ----
   This page forces `h2 { font-size: clamp(2.5rem,4vw,3.25rem) !important }`
   on every h2. Elementor renders the footer's section headings as <h2>, so
   that rule beat Elementor's own 1.25rem and made "EXPERIENCE", "COMPANY",
   "GET IN TOUCH", "India's Location" and "Dubai Location" huge and
   overlapping. Values below are the real ones from post-22845.css. The
   descendant selector gives higher specificity, so these win. */
.tbgc-live-footer h1,
.tbgc-live-footer h2,
.tbgc-live-footer h3,
.tbgc-live-footer h4,
.tbgc-live-footer h5,
.tbgc-live-footer h6 {
  font-family: "Open Sans", sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  line-height: 1.25em !important;
}

/* "Ready to Transform Your Team?" is the one large heading: 60px / 800. */
.tbgc-live-footer .elementor-element-c86c004 .elementor-heading-title {
  font-family: "Montserrat", sans-serif !important;
  font-size: 60px !important;
  font-weight: 800 !important;
  line-height: 1.1em !important;
}

@media (max-width: 767px) {
  .tbgc-live-footer .elementor-element-c86c004 .elementor-heading-title {
    font-size: 34px !important;
  }
}

/* Location Cards Grid - Custom CSS */
.location-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .location-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .location-cards-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.location-card-link {
  display: block;
  text-decoration: none;
}

.location-card-wrapper {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  aspect-ratio: 16 / 10;
  transition: transform 0.3s ease;
  /* min-height: 22vh !important; */
}

.location-card-link:hover .location-card-wrapper {
  transform: scale(1.05);
}

.location-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.location-card-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.2) 50%,
    transparent 100%
  );
}

.location-card-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px !important;
}

.location-card-title {
  font-size: 20px !important;
  font-weight: 500 !important;
  color: white !important;
  margin: 0 !important;
}

/* Hero Section with Navbar Overlap */
.hero-with-navbar {
  padding-top: 140px; /* Space for navbar + equal top padding */
  padding-bottom: 60px;
}

@media (min-width: 768px) {
  .hero-with-navbar {
    padding-top: 160px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1024px) {
  .hero-with-navbar {
    padding-top: 180px;
    padding-bottom: 120px;
  }
}

/* Breadcrumb Navigation */
.breadcrumb-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 14px;
}

.breadcrumb-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.3s ease;
}

.breadcrumb-link:hover {
  color: #FAF0D7;
  text-decoration: underline;
}

.breadcrumb-separator {
  color: rgba(255, 255, 255, 0.5);
}

.breadcrumb-current {
  color: white;
  font-weight: 600;
}

/* Expert CTA Section */
.expert-cta-section {
  padding-top: 2.5rem !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  position: relative;
  overflow: hidden;
}

.expert-cta-container {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Mobile: stack vertically */
.expert-cta-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 2rem !important;
}

/* Desktop: side-by-side 50/50 */
@media (min-width: 768px) {
  .expert-cta-grid {
    flex-direction: row !important;
    align-items: flex-end !important;
  }
  .expert-left-col {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  .expert-right-col {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

.expert-left-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding-top: 1rem;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden;
}

.expert-team-img-wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  margin-top: 0.5rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  line-height: 0;
  overflow: hidden;
  width: 100%;
}

.expert-team-img {
  display: block !important;
  width: 90% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: bottom center !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  vertical-align: bottom !important;
  transform: none !important;
  filter: drop-shadow(0 -8px 20px rgba(0, 0, 0, 0.2));
}

.expert-right-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 1rem;
  padding-bottom: 2.5rem;
}