/* Google Fonts loaded in HTML header for better performance */

/* CSS Variables */
:root {
  --gold: #FFBF52;
  --gold-accent: #E1A641;
  --navy: #01017E;
  --gray-dark: #525252;
  --gray-medium: #777777;
  --light-gray: #E6E6E6;
  --white: #ffffff;
  --black: #000000;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --header-height: 72px;
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  max-width: 100%;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--white);
  color: var(--black);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  max-width: 100%;
}

/* Touch-friendly improvements */
button, a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Sticky Navigation Wrapper */
.sticky-nav-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10002;
  background-color: rgba(255, 255, 255, 0);
  transition: background-color 0.3s ease;
}

.sticky-nav-wrapper.scrolled {
  background-color: rgba(255, 255, 255, 1);
}

/* Header Styles */
.header {
  width: 100%;
  background-color: transparent;
  border-bottom: 1px solid var(--navy);
  transition: background-color 0.3s ease;
}

.sticky-nav-wrapper.scrolled .header {
  background-color: var(--white);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem;
}

@media (min-width: 640px) {
  .header-container {
    padding: 1.5rem 2rem;
  }
}

@media (min-width: 768px) {
  .header-container {
    padding: 1.5rem 3rem;
  }
}

@media (min-width: 1024px) {
  .header-container {
    padding: 1.5rem 6rem;
  }
}

@media (min-width: 1280px) {
  .header-container {
    padding: 1.5rem 8rem;
  }
}





.icon-button {
  padding: 0.375rem;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 0.5rem;
  color: var(--navy);
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ensure icon links don't show underline and remain clickable above overlays */
.icon-button, .icon-button:link, .icon-button:visited {
  text-decoration: none;
  -webkit-text-decoration: none;
  -moz-text-decoration: none;
  pointer-events: auto;
  position: relative;
  z-index: 10003;
}

@media (min-width: 640px) {
  .icon-button {
    padding: 0.5rem;
  }
}

.icon-button svg {
  width: 20px;
  height: 20px;
}

@media (min-width: 640px) {
  .icon-button svg {
    width: 24px;
    height: 24px;
  }
}

.icon-button:hover:not(.burger-menu-btn) {
  background-color: var(--gray-100);
}

.logo-container {
  flex: 1;
  display: flex;
  justify-content: flex-start;
}

@media (min-width: 768px) {
  .logo-container {
    justify-content: center;
  }
}

.logo-container a {
  display: inline-block;
}

.logo {
  height: 2.5rem;
  object-fit: contain;
}

@media (min-width: 640px) {
  .logo {
    height: 3rem;
  }
}

.menu-icon-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Header panel close button (appears to the right of the logo) */
.panel-close-header {
  display: none; /* toggled via JS */
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.25rem;
}

@media (min-width: 768px) {
  .panel-close-header { display: none !important; }
}

/* Navigation Menu */
.nav-menu {
  width: 100%;
  background-color: transparent;
  border-bottom: none;
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  transition: background-color 0.3s ease, max-height 0.3s ease, opacity 0.3s ease;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  display: none;
}

/* Desktop: Show navbar by default */
@media (min-width: 768px) {
  .nav-menu {
    display: block;
    max-height: none;
    opacity: 1;
    overflow-x: auto;
    padding: 0.75rem 0;
    visibility: visible;
  }
}

/* Mobile: Hide navbar by default, only show when menu-open */
@media screen and (max-width: 767px) {
  .sticky-nav-wrapper .nav-menu:not(.menu-open) {
    display: none !important;
    visibility: hidden !important;
    max-height: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  
  .sticky-nav-wrapper .nav-menu.menu-open {
    display: block !important;
    visibility: visible !important;
    max-height: none !important;
    opacity: 1 !important;
    padding: 0 !important;
    /* position the full-screen mobile menu below the header so the logo/burger stay visible */
    top: var(--header-height);
    height: calc(100vh - var(--header-height)) !important;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed !important;
    background-color: var(--white);
    z-index: 9997;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Make the menu behave like the services panel: full-height column with bottom icons */
  .sticky-nav-wrapper .nav-menu.menu-open {
    display: flex !important;
    flex-direction: column;
    padding: 0 !important;
  }

  .sticky-nav-wrapper .nav-menu.menu-open .nav-container {
    display: flex;
    flex-direction: column;
    gap: 0.35rem; /* tighter spacing for mobile menu */
    padding: 1rem 1.25rem; /* slightly reduced padding */
    flex: 1 1 auto; /* take available space so icons can sit at bottom */
    overflow-y: auto;
  }

  .sticky-nav-wrapper .nav-menu.menu-open .nav-item {
    padding: 0.6rem 1rem; /* reduced vertical padding for tighter spacing */
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--navy);
    background: transparent;
    border-radius: 9999px;
    text-align: left;
  }

  .sticky-nav-wrapper .nav-menu.menu-open .mobile-social-icons {
    margin-top: 0;
    padding: 1rem 0 1.5rem 0;
    border-top: 1px solid var(--light-gray);
    display: flex;
    justify-content: center;
    gap: 1rem;
  }

  /* make icons slightly smaller like services panel */
  .sticky-nav-wrapper .nav-menu.menu-open .mobile-social-icons .icon-button svg {
    width: 18px;
    height: 18px;
  }
}

/* Desktop menu-open styling */
@media (min-width: 768px) {
  .nav-menu.menu-open {
    display: block;
    max-height: none;
    opacity: 1;
    padding: 0.75rem 0;
    background-color: var(--white);
  }
}

.sticky-nav-wrapper.scrolled .nav-menu {
  background-color: var(--white);
}

@media (min-width: 640px) {
  .nav-menu.menu-open {
    padding: 0.75rem 0;
  }
}

.nav-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  padding: 1rem;
  flex-wrap: nowrap;
  min-width: 0;
}

@media (min-width: 640px) {
  .nav-container {
    flex-direction: row;
    justify-content: center;
    padding: 0 2rem;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
  }
}

@media (min-width: 768px) {
  .nav-container {
    padding: 0 3rem;
  }
}

@media (min-width: 1024px) {
  .nav-container {
    padding: 0 6rem;
  }
}

@media (min-width: 1280px) {
  .nav-container {
    padding: 0 8rem;
  }
}

.nav-item {
  padding: 0.625rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--navy);
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 9999px;
  transition: background-color 0.2s;
  white-space: nowrap;
  width: 100%;
  text-align: left;
  text-decoration: none;
  display: inline-block;
}

.nav-item:visited {
  color: var(--navy);
}

/* Hide elements by default that should only appear on mobile */
.mobile-only { display: none !important; }

@media screen and (max-width: 767px) {
  .mobile-only { display: inline-block !important; }
}

@media (min-width: 640px) {
  .nav-item {
    font-size: 1.0625rem;
    padding: 0.75rem 1.5rem;
    width: auto;
    text-align: center;
  }
}

/* Burger Menu Button */
.burger-menu-btn {
  position: relative;
  background: transparent !important;
}

.burger-menu-btn:hover, .burger-menu-btn:active, .burger-menu-btn:focus, .burger-menu-btn.active {
  background: transparent !important;
  background-color: transparent !important;
}

.share-icon-btn {
  display: none;
}

@media (min-width: 768px) {
  .burger-menu-btn {
    display: none;
  }
  
  .share-icon-btn {
    display: flex;
  }
}

.nav-item:hover {
  background-color: var(--gray-100);
}

/* Services full-screen panel (mobile) */
.panel-overlay {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms ease;
  z-index: 9998;
}

.services-panel {
  position: fixed;
  top: var(--header-height);
  right: 0;
  left: 0;
  width: 100vw;
  height: calc(100vh - var(--header-height));
  background: var(--white);
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(.2,.9,.2,1);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}





.services-panel-close {
  background: transparent;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--navy);
  padding: 0.5rem;
  border-radius: 0.5rem;
}

.services-panel-links {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.25rem;
  gap: 0.75rem;
  overflow-y: auto;
  align-items: flex-start;
}

.services-panel-links a {
  padding: 0.85rem 1rem;
  border-radius: 9999px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy);
  background: transparent;
  display: inline-block;
  width: 100%;
  text-align: left;
  text-decoration: none;
}

.services-panel-links a:hover {
  background: var(--gray-100);
}





/* Mobile nav footer social icons */
.nav-menu .mobile-social-icons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--light-gray);
}

.nav-menu .mobile-social-icons .icon-button svg, .panel-social-icons .icon-button svg {
  width: 20px;
  height: 20px;
}

/* Hide mobile/footer social icons on desktop; show only on small screens */
/* Strongly hide mobile/footer social icons on desktop; show only on small screens */
.sticky-nav-wrapper .nav-menu .mobile-social-icons {
  display: none !important;
}

@media screen and (max-width: 767px) {
  .sticky-nav-wrapper .nav-menu .mobile-social-icons {
    display: flex !important;
  }
}

.services-panel.open {
  transform: translateX(0);
}

.panel-overlay.show {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 768px) {
  .services-panel, .panel-overlay {
    display: none;
  }
}

/* Hero Section */
.hero-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: var(--white);
  overflow: hidden;
  margin-top: -30px;
  padding-top:70px;
}

.hero-background {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero-content {
    position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-top: 2.5rem;
  padding-bottom: 6rem;
  padding-left: 2rem;
  padding-right: 2rem;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  max-width: 1400px;
}

@media (min-width: 640px) {
  .hero-content {
    gap: 2rem;
    padding-top: 12rem;
    padding-bottom: 10rem;
    padding-left: 7.8rem;
    padding-right: 7.8rem;
  }
}

@media (min-width: 768px) {
  .hero-content {
    gap: 2.5rem;
    padding-top: 13rem;
    padding-bottom: 12rem;
    padding-left: 9rem;
    padding-right: 9rem;
  }
}

@media (min-width: 1024px) {
  .hero-content {
    padding-left: 13rem;
    padding-right: 13rem;
    padding-top: 14rem;
  }
}

@media (min-width: 1280px) {
  .hero-content {
    padding-left: 18rem;
    padding-right: 18rem;
    padding-top: 15rem;
  }
}

.hero-subtitle {
  width: 100%;
}

.subtitle-text {
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--navy);
  text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8), 
               0 0 15px rgba(255, 255, 255, 0.6),
               -1px -1px 2px rgba(255, 255, 255, 0.5);
  margin-bottom: 0.5rem;
}

@media (min-width: 640px) {
  .subtitle-text {
    font-size: 2rem;
  }
}

.hero-heading {
  width: 100%;
}

.main-heading {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1.2;
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.8), 0 0 25px rgba(0, 0, 0, 0.6);
  margin-bottom: 0.5rem;
}

@media (min-width: 640px) {
  .main-heading {
    font-size: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .main-heading {
    font-size: 3rem;
  }
}

@media (min-width: 1280px) {
  .main-heading {
    font-size: 3.75rem;
  }
}

.hero-cta {
  padding-top: 1rem;
}

.cta-button, .cta-button:link, .cta-button:visited {
  background-color: var(--navy);
  color: var(--white);
  text-decoration: none;
  -webkit-text-decoration: none;
  -moz-text-decoration: none;
  font-weight: 700;
  padding: 1.125rem 2.25rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 1.0625rem;
  width: 100%;
  max-width: 220px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 640px) {
  .cta-button {
    padding: 1.375rem 2.75rem;
    font-size: 1.1875rem;
    width: auto;
  }
}

.cta-button:hover {
  opacity: 0.9;
}

/* Portfolio Section */
.portfolio-section {
  width: 100%;
  background-color: var(--white);
  overflow: hidden;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .portfolio-grid {
    min-height: 38rem;
  }
}

@media (min-width: 1024px) {
  .portfolio-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
}



.portfolio-left {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .portfolio-left {
    display: grid;
    grid-template-columns: 1fr;
    height: 100%;
  }
}

.portfolio-inner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0;
  min-height: 40rem;
}

@media (min-width: 640px) {
  .portfolio-inner-grid {
    min-height: 38rem;
  }
}

@media (min-width: 768px) {
  .portfolio-inner-grid {
    min-height: 38rem;
  }
}

@media (min-width: 1024px) {
  .portfolio-inner-grid {
    min-height: 38rem;
    height: auto;
  }
}

.portfolio-block {
  min-height: 10rem;
  border-radius: 0;
  overflow: hidden;
}

@media (min-width: 640px) {
  .portfolio-block {
    min-height: 12.5rem;
  }
}

@media (min-width: 768px) {
  .portfolio-block {
    min-height: 15rem;
  }
}

@media (min-width: 1024px) {
  .portfolio-block {
    height: 100%;
    min-height: 0;
  }
}

.navy-block {
  background-color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gold-block {
  background-color: var(--gold-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-block {
  position: relative;
  background-color: var(--white);
  overflow: hidden;
}

.portfolio-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.portfolio-block, .portfolio-right {
  transform: scaleY(-1);
  transition: transform 0.8s ease-in-out;
}

.portfolio-section.in-view .portfolio-block, .portfolio-section.in-view .portfolio-right {
  transform: scaleY(1);
}

/* Staggered animation delays for each block - one by one */
.portfolio-inner-grid .portfolio-block:nth-child(1) {
  transition-delay: 0s;
}

.portfolio-inner-grid .portfolio-block:nth-child(2) {
  transition-delay: 0.15s;
}

.portfolio-inner-grid .portfolio-block:nth-child(3) {
  transition-delay: 0.3s;
}

.portfolio-inner-grid .portfolio-block:nth-child(4) {
  transition-delay: 0.45s;
}

.portfolio-right {
  transition-delay: 0.6s;
}

.portfolio-image-center {
  object-position: center center;
}

.portfolio-image-right {
  object-position: right center;
}

.portfolio-image-left {
  object-position: left center;
}

.color-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  pointer-events: none;
}





.portfolio-right {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  background-color: var(--white);
  min-height: 40rem;
}

@media (min-width: 640px) {
  .portfolio-right {
    min-height: 38rem;
  }
}

@media (min-width: 768px) {
  .portfolio-right {
    min-height: 38rem;
  }
}

@media (min-width: 1024px) {
  .portfolio-right {
    height: auto;
    min-height: 38rem;
  }
}

/* Mobile: keep the right-column image natural size and prevent it stretching/cropping */
@media (max-width: 767px) {
  .portfolio-right {
    min-height: 0;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .portfolio-right .portfolio-image {
    width: auto;
    max-width: 100%;
    height: auto; /* preserve aspect ratio, don't fill container height */
    max-height: 60vh; /* prevent extremely tall images on small screens */
    object-fit: contain; /* show full image without cropping */
    object-position: center center;
    display: block;
  }
}

/* Extra small phones: reduce hero footprint so it doesn't cover full screen */
@media (max-width: 480px) {
  .get-started-hero {
    min-height: 60vh; /* don't fill whole screen on small phones */
    padding-top: 0.5rem;
    padding-bottom: 0.75rem;
    align-items: flex-start;
  }

  .hero-container {
    gap: 1rem;
  }

  .hero-title-gs {
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
  }

  .hero-subtitle-gs {
    font-size: 0.95rem;
    margin-bottom: 1rem;
    max-width: none;
    padding: 0 0.75rem;
  }

  .hero-cta-buttons {
    gap: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .hero-visual-grid {
    grid-template-rows: 110px 110px 90px;
    gap: 0.5rem;
  }

  .grid-item {
    border-radius: 10px;
  }

  .grid-item.item-2 {
    /* slightly narrower large image on very small screens */
    grid-column: 2 / 3;
    grid-row: 1 / 3;
  }

  .hero-right {
    margin-top: 0.8rem;
  }
}

/* Who We Are Section */
.who-we-are-section {
  position: relative;
  width: 100%;
  background-color: var(--white);
  overflow: hidden;
}

.who-we-are-background {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.who-we-are-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 2.8% 96.4%;
  transform: scale(1.1);
}

.who-we-are-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 640px) {
  .who-we-are-content {
    gap: 1.25rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 768px) {
  .who-we-are-content {
    padding-top: 5rem;
    padding-bottom: 5rem;
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

@media (min-width: 1024px) {
  .who-we-are-content {
    padding-left: 6rem;
    padding-right: 6rem;
  }
}

@media (min-width: 1280px) {
  .who-we-are-content {
    padding-left: 10rem;
    padding-right: 10rem;
  }
}

.who-we-are-label {
  display: flex;
  flex-direction: column;
}

.label-text {
  font-size: 15px;
  font-weight: 600;
  color: rgb(82, 82, 82);
  text-align: left;
  line-height: 1em;
}

.who-we-are-heading {
  display: flex;
  flex-direction: column;
}

.who-we-are-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold-accent);
  line-height: 1.3em;
  text-align: left;
  text-shadow: rgb(255, 255, 255) 2px 2px 0px;
}

@media (min-width: 640px) {
  .who-we-are-title {
    font-size: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .who-we-are-title {
    font-size: 48px;
  }
}

.who-we-are-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 42rem;
}

.body-text {
  font-size: 1.25rem;
  font-weight: 500;
  color: rgb(119, 119, 119);
  line-height: 1.3em;
  text-align: left;
}

/* Carousel Section */
.carousel-section {
  width: 100%;
  background-color: var(--white);
  position: relative;
  padding: 2rem 0;
}

.carousel-section-title {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto 2rem;
  padding: 0 1rem;
  font-size: 24px;
  font-weight: 700;
  color: var(--gold-accent);
  text-align: center;
  line-height: 1em;
}

@media (min-width: 768px) {
  .carousel-section-title {
    font-size: 32px;
  }
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #374151;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s;
}

.carousel-btn:hover {
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.carousel-btn-left {
  left: 1rem;
}

.carousel-btn-right {
  right: 1rem;
}

@media (min-width: 640px) {
  .carousel-btn {
    width: 56px;
    height: 56px;
  }
  
  .carousel-btn-left {
    left: 1.5rem;
  }
  
  .carousel-btn-right {
    right: 1.5rem;
  }
}

.carousel-btn svg {
  width: 24px;
  height: 24px;
}

.carousel-list {
  display: flex;
  gap: 0;
  padding: 0 4rem;
  margin: 0;
  list-style: none;
  overflow-x: hidden;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  align-items: center;
  height: 100%;
  scroll-behavior: smooth;
  width: 100%;
}

@media (min-width: 768px) {
  .carousel-list {
    gap: 20px;
    padding: 0 1rem;
    overflow-x: auto;
  }
}

/* Show scrollbar like Framer */
.carousel-list::-webkit-scrollbar {
  height: 8px;
}

.carousel-list::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 4px;
}

.carousel-list::-webkit-scrollbar-thumb {
  background: #9ca3af;
  border-radius: 4px;
}

.carousel-list::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

.carousel-item {
  flex-shrink: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 1rem;
}

@media (min-width: 768px) {
  .carousel-item {
    width: auto;
    padding: 0;
  }
}

.carousel-card {
  position: relative;
  width: 100%;
  max-width: 307px;
  height: 340px;
  border-radius: 16px;
  overflow: hidden;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .carousel-card {
    max-width: 340px;
    height: 374px;
  }
  
  .carousel-list {
    padding: 0 5rem;
  }
}

@media (min-width: 768px) {
  .carousel-card {
    width: 307px;
    max-width: none;
    margin: 0;
  }
  
  .carousel-list {
    padding: 0 1rem;
  }
}

@media (min-width: 1024px) {
  .carousel-card {
    width: 340px;
    height: 374px;
  }
}

@media (min-width: 1280px) {
  .carousel-card {
    width: 360px;
    height: 408px;
  }
}

.carousel-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.carousel-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--gold);
  color: #0b0b0b;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  z-index: 3;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

.carousel-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /* soft dark background to improve legibility on busy images */
  background: linear-gradient(rgba(0,0,0,0.68), rgba(0,0,0,0.28));
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 2;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: inset 0 10px 30px rgba(0,0,0,0.35);
}

.carousel-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--white);
  line-height: 1em;
  text-align: left;
}

.carousel-description {
  font-size: 18px;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  line-height: 1em;
  text-align: left;
}

@media (max-width: 640px) {
  .carousel-text {
    padding: 0.9rem;
  }

  .carousel-title {
    font-size: 18px;
  }

  .carousel-description {
    font-size: 14px;
  }
}























/* Responsive text sizes */
@media (min-width: 640px) {
  .sm\:text-3xl { font-size: 1.875rem; }
  .sm\:text-4xl { font-size: 2.25rem; }
}










.flex { display: flex; }



.relative { position: relative; }






@keyframes pulse-diagonal {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}





.services-label {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0;
  margin-bottom: 1.5rem;
}



@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

.services-label span {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}







@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}



@keyframes float-in {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}















@keyframes float-circle {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(20px, -20px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
}

/* Marketing Showcase Section - Unique Minimal Design */
.marketing-showcase {
  width: 100%;
  background: linear-gradient(to bottom, #fafbfc 0%, var(--white) 100%);
  padding: 3.5rem 2rem;
  overflow: hidden;
}

.marketing-content-wrapper {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

.marketing-left-section {
  width: 100%;
}

.marketing-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  background: linear-gradient(135deg, rgba(255, 191, 82, 0.12) 0%, rgba(255, 191, 82, 0.05) 100%);
  border-radius: 30px;
  margin-bottom: 1.5rem;
  border: none;
}

.marketing-badge-icon {
  width: 16px;
  height: 16px;
  color: var(--gold);
}

.marketing-badge span {
  color: var(--navy);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.marketing-main-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.15;
  margin-bottom: 1.5rem;
}

.marketing-highlight {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.marketing-services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
}

.marketing-service-item {
  position: relative;
  padding: 1.5rem;
  background: var(--white);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.marketing-service-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(1, 1, 126, 0.08);
  border-left-width: 4px;
}



.service-content {
  position: relative;
  z-index: 1;
}

.service-item-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.service-item-desc {
  font-size: 0.875rem;
  color: #666;
  line-height: 1.55;
  font-weight: 400;
}

.marketing-right-section {
  width: 100%;
}

.marketing-image-container {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 
    0 10px 30px rgba(1, 1, 126, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.06);
  position: relative;
  border: 1px solid rgba(1, 1, 126, 0.06);
}

.marketing-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.marketing-image-container:hover .marketing-img {
  transform: scale(1.03);
}

/* Services Section (for other sections below) */
.services-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  background-color: var(--white);
  overflow: hidden;
}

.services-section.services-reverse {
  flex-direction: column-reverse;
}

.services-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 3rem 1.5rem;
  width: 100%;
}

.services-label {
  font-size: 1.25rem;
  font-weight: bolder;
  color: rgb(82, 82, 82);
  text-align: left;
  line-height: 1em;
  margin: 0;
}

.services-heading {
  font-size: 28px;
  font-weight: 700;
  color: var(--gold-accent);
  line-height: 1.3em;
  text-align: left;
  margin: 0;
}

.services-body {
  font-size: 1.15rem;
  font-weight: 500;
  color: rgb(119, 119, 119);
  line-height: 1.3em;
  text-align: left;
  margin: 0;
  max-width: 42rem;
}

.services-btn {
  display: inline-block;
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  color: rgb(255, 255, 255);
  background-color: var(--gold-accent);
  border: none;
  padding: 1rem 2rem;
  cursor: pointer;
  transition: opacity 0.2s;
  width: fit-content;
}


.services-btn:hover {
  opacity: 0.9;
}

.services-image {
  width: 100%;
  position: relative;
  min-height: 350px;
  background-color: var(--white);
}

.services-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: cover;
}


/* Button Styles */
.btn {
  background-color: var(--navy);
  color: var(--white);
  font-weight: 600;
  padding: 1.25rem 2.5rem;
  border: none;
  border-radius: 0;
  transition: opacity 0.2s;
  cursor: pointer;
  font-size: 1rem;
  width: 100%;
  max-width: 250px;
}

/* Floating contact button */
.floating-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-accent) 100%);
  color: #fff;
  border: none;
  box-shadow: 0 8px 20px rgba(16,24,40,0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 12000;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.floating-btn:active { transform: translateY(1px) scale(0.99); }
.floating-btn .floating-icon { font-size: 2.5rem; line-height: 1; }

@media (min-width: 1280px) {
  .floating-btn { right: 40px; bottom: 40px; }
}

/* Floating modal */
.floating-modal { display: none; position: fixed; inset: 0; z-index: 12100; align-items: center; justify-content: center; padding: 24px; }
.floating-modal.show { display: flex; }
.floating-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.floating-modal-content { position: relative; width: 100%; max-width: 980px; background: transparent; border-radius: 18px; box-shadow: 0 30px 80px rgba(2,6,23,0.45); z-index: 2; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; }
.floating-modal-left {
  /* layered background: blue->gold gradient on top of the image */
  /* gold -> navy gradient layered over the background image */
  background-image: linear-gradient(135deg, var(--gold) 0%, var(--navy) 100%), url('images/past-work/seo-sh.png');
  background-position: center right, center right;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: overlay;
  display:flex; align-items:center; justify-content:center; padding: 2rem;
}
.floating-left-inner { max-width: 320px; }
.floating-left-brand img { display:block; margin-bottom: 1rem; height: 84px; width: auto; }




.left-contact-details { margin-top: 1rem; color: #fff; }
.left-contact-details p { margin: 0 0 0.6rem 0; color: rgba(255,255,255,0.95); font-size: 0.95rem; }
.left-contact-details a { color: #fff; text-decoration: underline; }

/* Ensure all text in the left modal panel is white for readability */
.floating-modal-left, .floating-modal-left .floating-left-inner {
  color: #ffffff;
}
.floating-modal-left h2, .floating-modal-left h3, .floating-modal-left p, .floating-modal-left strong, .floating-modal-left a {
  color: #ffffff !important;
}
.floating-modal-right { background: linear-gradient(90deg, var(--gold) 0%, var(--gold-accent) 100%); padding: 1.5rem 1.5rem 2rem 1.5rem; position:relative; }
.floating-modal-close { position: absolute; right: 12px; top: 12px; background: transparent; border: none; font-size: 20px; cursor: pointer; color: rgba(0,0,0,0.7); }
.right-title { color: var(--navy); margin: 0 0 12px; font-size: 1.25rem; font-weight:700; }
.floating-contact-form { display: flex; flex-direction: column; gap: 0.75rem; }
.floating-contact-form .form-row { display: flex; gap: 0.75rem; }
.floating-contact-form .half-group { flex: 1; }
.floating-contact-form label { font-size: 0.875rem; color: rgba(0,0,0,0.85); font-weight: 600; }
.floating-contact-form input, .floating-contact-form textarea { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid rgba(0,0,0,0.06); border-radius: 8px; font-size: 0.95rem; }
.floating-contact-form textarea { min-height: 92px; resize: vertical; }
.floating-contact-form .submit-btn { background: var(--navy); color: var(--white); border: none; padding: 0.9rem 1rem; border-radius: 8px; font-weight: 700; cursor: pointer; align-self: flex-start; }
.floating-contact-form .submit-btn:hover { opacity: 0.95; }

@media (max-width: 640px) {
  .floating-modal { align-items: flex-start; padding: 12px; }
  .floating-modal-content { grid-template-columns: 1fr; max-width: 600px; width: calc(100% - 24px); max-height: calc(100vh - 24px); overflow-y: auto; border-radius: 12px; }
  /* On small screens, show the form panel first, then the image/description panel */
  .floating-modal-content > .floating-modal-right { order: 1; }
  .floating-modal-content > .floating-modal-left { order: 2; }
  .floating-left-inner { padding: 1rem 0; }
  .floating-modal-right { padding: 1rem; }
  .floating-btn { width: 65px; height: 65px; right: 14px; bottom: 14px; }

  
  
  .floating-modal-close { right: 10px; top: 10px; font-size: 26px; padding: 6px 8px; }
}



@media (min-width: 640px) {
  .btn {
    width: auto;
  }
}

.btn:hover {
  opacity: 0.9;
}



/* Values Section */
.values-section {
  width: 100%;
  background-color: var(--navy);
  padding: 3rem 1.5rem;
  overflow: hidden;
}

@media (min-width: 768px) {
  .values-section {
    padding: 4rem 3rem;
  }
}

@media (min-width: 1024px) {
  .values-section {
    padding: 100px;
  }
}

.values-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 100%;
}

@media (min-width: 768px) {
  .values-grid {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .value-card {
    flex: 1 1 calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
}

@media (min-width: 1024px) {
  .values-grid {
    flex-wrap: nowrap;
  }
  
  .value-card {
    flex: 1;
    max-width: none;
  }
}

.value-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.value-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--gold-accent);
  margin-bottom: 1rem;
}

.value-icon svg {
  width: 100%;
  height: 100%;
}

.value-text {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3em;
  text-align: center;
  color: rgb(230, 230, 230);
}

.value-text strong {
  display: block;
  margin-bottom: 0;
}























































/* Get Started Page Styles */
.get-started-hero {
  background: linear-gradient(135deg, var(--navy) 0%, #1a1a8e 40%, #2d3a9f 70%, #4056b8 100%);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  padding: 2rem 1.5rem;
  position: relative;
  overflow: hidden;
  min-height: 65vh;
  display: flex;
  align-items: center;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero-container {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 768px) {
  .hero-container {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
  }
}

.hero-left {
  z-index: 2;
}

@media (max-width: 1023px) {
  .hero-left {
    text-align: center;
  }
}

.hero-badge-gs {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 191, 82, 0.2);
  color: var(--gold);
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 2rem;
  border: 2px solid var(--gold);
}

.hero-title-gs {
  font-size: 2rem;
  font-weight: 900;
  color: var(--white);
  margin-bottom: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .hero-title-gs {
    font-size: 2.75rem;
  }
}

@media (min-width: 1024px) {
  .hero-title-gs {
    font-size: 3.25rem;
    text-align: left;
  }
}

.gradient-text-hero {
  background: linear-gradient(135deg, var(--gold) 0%, #ffd700 50%, var(--gold-accent) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 3s ease infinite;
  display: inline-block;
}

.hero-subtitle-gs {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 2.5rem;
  line-height: 1.7;
  max-width: 500px;
}

@media (min-width: 768px) {
  .hero-subtitle-gs {
    font-size: 1.25rem;
  }
}

@media (max-width: 1023px) {
  .hero-subtitle-gs {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Hero Visual Grid */
.hero-right {
  display: block; /* show on mobile — stacks below left column */
  margin-top: 1.5rem;
}

@media (min-width: 768px) {
  .hero-right {
    display: block;
    margin-top: 0;
  }
}

.hero-visual-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 150px);
  gap: 1rem;
  transform: perspective(1000px) rotateY(-5deg);
  transition: transform 0.3s ease;
}

.hero-visual-grid:hover {
  transform: perspective(1000px) rotateY(0deg);
}

/* Mobile adjustments: make the visual grid readable on small screens */
@media (max-width: 767px) {
  .hero-visual-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 140px 140px 120px; /* top, middle, bottom rows */
    gap: 0.75rem;
    transform: none;
    align-items: stretch;
  }

  .hero-visual-grid img,
  .grid-item {
    height: 100%;
  }

  .grid-item {
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    border-radius: 12px;
  }

  /* Layout to mimic reference: large image right spanning top+middle, stacked cards left */
  .grid-item.item-2 {
    grid-column: 2 / 3;
    grid-row: 1 / 3; /* big right image */
  }

  .grid-item.item-1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  .grid-item.item-3 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  .grid-item.item-4 {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }

  .grid-item.item-5 {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }
}

.grid-item {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.grid-item:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.item-1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-accent) 100%);
}

.item-2 {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  background: var(--navy);
}

.item-3 {
  grid-column: 1 / 2;
  grid-row: 2 / 4;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.1) 100%);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.item-4 {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
  background: var(--gold);
}

.item-5 {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
  background: linear-gradient(135deg, var(--gold-accent) 0%, var(--gold) 100%);
}

.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.grid-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 1.5rem;
  text-align: center;
  color: var(--navy);
}

.item-3 .grid-content {
  color: var(--white);
}

.item-3 .grid-content svg {
  stroke: var(--gold);
}

.grid-content svg {
  margin-bottom: 0.75rem;
  opacity: 0.9;
}

.grid-content h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
}













.hero-cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

@media (min-width: 640px) {
  .hero-cta-buttons {
    flex-direction: row;
    justify-content: center;
  }
}

@media (min-width: 1024px) {
  .hero-cta-buttons {
    justify-content: flex-start;
  }
}

.btn-primary-gs, .btn-secondary-gs {
  padding: 1.125rem 2.5rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 2px solid transparent;
}

.btn-primary-gs {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
  box-shadow: 0 4px 20px rgba(255, 191, 82, 0.3);
}

.btn-primary-gs:hover {
  background: var(--gold-accent);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(255, 191, 82, 0.5);
}

.btn-primary-gs svg {
  transition: transform 0.3s ease;
}

.btn-primary-gs:hover svg {
  transform: translateX(4px);
}

.btn-secondary-gs {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}

.btn-secondary-gs:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-3px);
}

/* How It Works Section */
.how-it-works-section {
  padding: 4rem 1.5rem;
  background: linear-gradient(to bottom, #ffffff 0%, #f9fafb 100%);
  margin-top: -50px;
}

@media (min-width: 768px) {
  .how-it-works-section {
    padding: 6rem 3rem;
  }
}

@media (min-width: 1024px) {
  .how-it-works-section {
    padding: 8rem 6rem;
  }
}

.how-it-works-container {
  max-width: 1400px;
  margin: 0 auto;
}

.section-header-center {
  text-align: center;
  margin-bottom: 4rem;
}

.section-badge {
  display: inline-block;
  background: var(--navy);
  color: var(--gold);
  padding: 0.5rem 1.5rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

.section-title-dark {
  font-size: 2rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .section-title-dark {
    font-size: 2.5rem;
  }
}

.section-description {
  font-size: 1rem;
  color: var(--gray-dark);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

/* .process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
} */

.process-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3rem;
  margin-top: 4rem;
  align-items: start;
}
.process-step:last-child {
  transform: translateY(12px); /* subtle emphasis */
}
@media (max-width: 1200px) {
  .process-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

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



/* @media (min-width: 768px) {
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .process-steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
} */

.process-step {
  text-align: center;
  position: relative;
}

.step-number {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  background: var(--gold);
  color: var(--navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 800;
  z-index: 2;
}

.step-icon-circle {
  width: 100px;
  height: 100px;
  background: white;
  border: 3px solid var(--navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  transition: all 0.3s ease;
}

.step-icon-circle svg {
  width: 40px;
  height: 40px;
  color: var(--navy);
}

.process-step:hover .step-icon-circle {
  background: var(--navy);
  transform: scale(1.1);
}

.process-step:hover .step-icon-circle svg {
  color: var(--gold);
}

.step-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1rem;
}

.step-description {
  font-size: 1rem;
  color: var(--gray-dark);
  line-height: 1.6;
}

/* Services Options Section */
.services-options-section {
  padding: 4rem 1.5rem;
  background: linear-gradient(135deg, var(--navy) 0%, #02028f 100%);
}

@media (min-width: 768px) {
  .services-options-section {
    padding: 6rem 3rem;
  }
}

@media (min-width: 1024px) {
  .services-options-section {
    padding: 8rem 6rem;
  }
}

.services-options-container {
  max-width: 1400px;
  margin: 0 auto;
}

.services-options-section .section-badge {
  background: rgba(255, 191, 82, 0.2);
  color: var(--gold);
  border: 2px solid var(--gold);
}

.services-options-section .section-title-dark {
  color: var(--white);
}

.services-options-section .section-description {
  color: rgba(255, 255, 255, 0.9);
}

/* Package Category Wrapper */
.package-category-wrapper {
  margin: 5rem 0;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2rem;
  padding: 3rem 1.5rem;
  border: 1px solid rgba(255, 191, 82, 0.2);
}

@media (min-width: 768px) {
  .package-category-wrapper {
    padding: 4rem 3rem;
  }
}

.package-category-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 3rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid rgba(255, 191, 82, 0.3);
}

.category-icon-box {
  width: 70px;
  height: 70px;
  background: var(--gold);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.category-icon-box svg {
  width: 36px;
  height: 36px;
  color: var(--navy);
}

.category-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--white);
  margin: 0 0 0.25rem 0;
}

@media (min-width: 768px) {
  .category-title {
    font-size: 2.5rem;
  }
}

.category-subtitle {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}


/* pricing grid done */
.pricing-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  width: 100%;
  align-items: stretch;
}

@media (min-width: 768px) {
  .pricing-cards-grid {
    gap: 1.5rem;
  }
}
/* pricing grid done */


/* Pricing Card */
.pricing-card {
  background: white;
  border-radius: 1.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.4s ease;
  position: relative;
  border: 2px solid rgba(1, 1, 126, 0.1);
}

.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  border-color: var(--gold);
}

.pricing-card.featured-pricing {
  border: 3px solid var(--gold);
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, #fffdf8 100%);
}

.featured-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--gold), var(--gold-accent), var(--gold));
  background-size: 200% 100%;
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.popular-ribbon {
  position: absolute;
  top: 20px;
  right: -35px;
  background: var(--gold);
  color: var(--navy);
  padding: 0.5rem 2.5rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1px;
  transform: rotate(45deg);
  box-shadow: 0 4px 12px rgba(255, 191, 82, 0.4);
  z-index: 10;
}

/* Pricing Card Header */
.pricing-card-header {
  padding: 2.5rem 2rem 1.5rem;
  text-align: center;
  border-bottom: 1px solid rgba(1, 1, 126, 0.1);
}

.plan-badge {
  display: inline-block;
  padding: 0.4rem 1rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

.plan-badge.plan-basic {
  background: rgba(1, 1, 126, 0.1);
  color: var(--navy);
}

.plan-badge.plan-popular {
  background: var(--gold);
  color: var(--navy);
}

.plan-badge.plan-ultimate {
  background: linear-gradient(135deg, var(--navy), #02028f);
  color: var(--gold);
}

.plan-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 1rem 0;
}

.plan-price {
  margin-bottom: 1rem;
}

.price-amount {
  font-size: 3rem;
  font-weight: 800;
  color: var(--navy);
  display: block;
  line-height: 1;
}

.price-period {
  font-size: 0.95rem;
  color: var(--gray-dark);
  font-weight: 500;
}

.plan-description {
  font-size: 0.95rem;
  color: var(--gray-dark);
  line-height: 1.5;
  margin: 0;
}

/* Pricing Card Body */
.pricing-card-body {
  padding: 2rem;
  flex-grow: 1;
}

.features-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.features-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
  color: var(--gray-dark);
  line-height: 1.5;
  border-bottom: 1px solid rgba(1, 1, 126, 0.05);
}

.features-list li:last-child {
  border-bottom: none;
}

.features-list li svg {
  width: 20px;
  height: 20px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
}

.features-list li.feature-unavailable {
  opacity: 0.4;
}

.features-list li.feature-unavailable svg {
  color: var(--gray-dark);
}

.features-list li span {
  flex: 1;
}

.features-list li strong {
  color: var(--navy);
  font-weight: 700;
}

/* Pricing Card Footer */
.pricing-card-footer {
  padding: 1.5rem 2rem 2.5rem;
}

.btn-pricing {
  display: block;
  width: 100%;
  padding: 1rem 2rem;
  background: var(--navy);
  color: var(--gold);
  border: 2px solid var(--navy);
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-pricing:hover {
  background: transparent;
  color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(1, 1, 126, 0.2);
}

.btn-pricing-featured {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
}

.btn-pricing-featured:hover {
  background: var(--gold-accent);
  border-color: var(--gold-accent);
  box-shadow: 0 8px 20px rgba(255, 191, 82, 0.4);
}





















/* Custom Package Banner */
.custom-package-banner {
  margin-top: 4rem;
  background: linear-gradient(135deg, rgba(255, 191, 82, 0.15) 0%, rgba(255, 191, 82, 0.05) 100%);
  border: 2px solid var(--gold);
  border-radius: 2rem;
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
}

.custom-package-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 50%, rgba(255, 191, 82, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 80% 50%, rgba(255, 191, 82, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.banner-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  z-index: 1;
}

@media (min-width: 768px) {
  .banner-content {
    flex-direction: row;
    text-align: left;
    justify-content: space-between;
  }
}

.banner-icon {
  width: 70px;
  height: 70px;
  background: var(--gold);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.banner-icon svg {
  width: 36px;
  height: 36px;
  color: var(--navy);
}

.banner-text {
  flex: 1;
}

.banner-text h3 {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--white);
  margin: 0 0 0.5rem 0;
}

.banner-text p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  line-height: 1.6;
}

.btn-banner {
  padding: 1rem 2.5rem;
  background: var(--gold);
  color: var(--navy);
  border: 2px solid var(--gold);
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-banner:hover {
  background: transparent;
  color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 191, 82, 0.3);
}

/* FAQ Section */
.faq-section {
  padding: 4rem 1.5rem;
  background: white;
}

@media (min-width: 768px) {
  .faq-section {
    padding: 6rem 3rem;
  }
}

@media (min-width: 1024px) {
  .faq-section {
    padding: 8rem 6rem;
  }
}

.faq-container {
  max-width: 1200px;
  margin: 0 auto;
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

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

.faq-item {
  background: #f9fafb;
  padding: 2rem;
  border-radius: 1rem;
  border-left: 4px solid var(--gold);
  transition: all 0.3s ease;
}

.faq-item:hover {
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateX(5px);
}

.faq-question {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.75rem;
}

.faq-answer {
  font-size: 1rem;
  color: var(--gray-dark);
  line-height: 1.6;
  margin: 0;
}





.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .form-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
}

.form-group input, .form-group select, .form-group textarea {
  padding: 1rem;
  border: 2px solid var(--light-gray);
  border-radius: 0.75rem;
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  transition: all 0.3s ease;
  background: white;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255, 191, 82, 0.1);
}

.form-group textarea {
  resize: vertical;
}





/* Final CTA Banner */
.final-cta-banner {
  background: linear-gradient(135deg, var(--navy) 0%, #02028f 100%);
  padding: 4rem 1.5rem;
  text-align: center;
}

@media (min-width: 768px) {
  .final-cta-banner {
    padding: 5rem 3rem;
  }
}

.final-cta-content {
  max-width: 800px;
  margin: 0 auto;
}

.final-cta-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .final-cta-title {
    font-size: 3rem;
  }
}

.final-cta-text {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.btn-final-cta {
  display: inline-block;
  padding: 1rem 2.5rem;
  background: var(--gold);
  color: var(--navy);
  border: 2px solid var(--gold);
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-final-cta:hover {
  background: var(--gold-accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(255, 191, 82, 0.4);
}

/* Footer Styles */
footer {
  width: 100%;
  background-color: var(--white);
  box-sizing: border-box;
  overflow-x: hidden;
}

.footer-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem 1rem;
  max-width: 100vw;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .footer-container {
    flex-direction: row;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 3rem 1.5rem;
    width: 100%;
    box-sizing: border-box;
  }
}

@media (min-width: 1024px) {
  .footer-container {
    padding: 4rem 2rem;
    gap: 2.5rem;
  }
}

/* Footer Top Mobile - Shapes and Icons */
.footer-top-mobile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

@media (min-width: 768px) {
  .footer-top-mobile {
    display: none;
  }
}

.footer-shapes {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  position: relative;
}

.footer-shapes-desktop {
  display: none;
}

@media (min-width: 768px) {
  .footer-shapes-desktop {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    position: relative;
  }
}





.footer-spacer {
  display: none;
}

@media (min-width: 768px) {
  .footer-spacer {
    flex: 1 0 0px;
    height: min-content;
    min-height: 17px;
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    position: relative;
  }
}

.footer-columns-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .footer-columns-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

@media (min-width: 768px) {
  .footer-columns-wrapper {
    display: flex;
    flex-direction: row;
    gap: 3rem;
    width: auto;
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  position: relative;
}

@media (min-width: 768px) {
  .footer-column {
    width: auto;
    min-width: 180px;
    max-width: 100%;
  }
}

.footer-column-title {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 15px;
  color: rgb(0, 0, 0);
  white-space: pre;
  margin: 0;
}

.footer-link {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 15px;
  color: rgb(153, 153, 153);
  white-space: pre;
  cursor: pointer;
  transition: color 150ms;
  text-decoration: none;
}

.footer-link:hover {
  color: var(--gold-accent);
}

.footer-text {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 15px;
  color: rgb(153, 153, 153);
  white-space: pre;
  margin: 0;
}

.footer-icons {
  display: flex;
  align-items: center;
  gap: 10px;
  height: min-content;
  justify-content: flex-end;
  overflow: hidden;
  position: relative;
}

.footer-icons-desktop {
  display: none;
}

@media (min-width: 768px) {
  .footer-icons {
    display: none;
  }
  
  .footer-icons-desktop {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 0 0px;
    height: min-content;
    justify-content: flex-end;
    overflow: hidden;
    position: relative;
  }
}

.footer-spacer-desktop {
  display: none;
}

@media (min-width: 768px) {
  .footer-spacer-desktop {
    flex: 1 0 0px;
    height: 100px;
    position: relative;
    display: block;
  }
}







/* Responsive Styles for New Sections */
@media (min-width: 640px) {
  .text-3xl { font-size: 2.25rem; }
  .text-4xl { font-size: 3rem; }
  .text-5xl { font-size: 3.5rem; }
  
  .services-content {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  
  .footer-container {
    padding: 4rem 2rem;
    gap: 2rem;
  }
}

@media (min-width: 768px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .services-section {
    flex-direction: row;
    align-items: stretch;
  }
  
  .services-section.services-reverse {
    flex-direction: row-reverse;
  }
  
  .services-image {
    width: 40%;
    flex-shrink: 0;
    min-height: 500px;
  }
  
  .services-content {
    padding: 3rem;
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .services-heading {
    font-size: 32px;
  }
  
  .footer-container {
    padding: 5rem 3rem;
    gap: 2.5rem;
  }
}

@media (min-width: 1024px) {
  
  
  .services-content {
    padding: 4rem 6rem;
  }
  
  .services-image {
    min-height: 600px;
  }
  
  .services-heading {
    font-size: 36px;
  }
  
  .footer-container {
    padding: 6rem 6rem;
    gap: 2.5rem;
    flex-wrap: nowrap;
  }
}

































.pricing-card {
  position: relative;
  background-color: var(--white);
  border: 2px solid var(--light-gray);
  border-radius: 1rem;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: visible;
}

.pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.pricing-card.pricing-featured {
  border-color: var(--gold-accent);
  border-width: 3px;
  transform: scale(1.05);
  padding-top: 2.5rem;
}

@media (min-width: 768px) {
  .pricing-card.pricing-featured {
    transform: scale(1.05);
  }
}



























main {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

/* Reduce padding-top on mobile since navbar is hidden */
@media screen and (max-width: 767px) {
  main {
    padding-top: 80px !important;
  }
}

section {
  max-width: 100vw;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Mobile Responsive Fixes */
@media (max-width: 768px) {
  /* Values Grid - Stack to single column */
  .values-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Fix stats grid in services content */
  .services-content > div[style*="display: grid"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Fix values grid with inline styles */
  .values-grid[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Fix stats grid with 2 columns */
  .values-grid[style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Ensure all cards fit */
  .value-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Fix services section */
  .services-section {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  
  .services-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .services-image {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .services-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Fix who-we-are section */
  .who-we-are-section {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  
  .who-we-are-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  /* Further reduce gaps on very small screens */
  .values-grid {
    gap: 1rem !important;
  }
  
  .services-content > div[style*="display: grid"] {
    gap: 1rem !important;
  }
  
  /* Reduce font sizes on very small screens */
  .services-heading {
    font-size: 1.5rem !important;
  }
  
  .who-we-are-title {
    font-size: 2rem !important;
  }
  
  /* Fix large font sizes in stats */
  .value-text strong[style*="font-size: 2.5rem"] {
    font-size: 2rem !important;
  }
}

/* Tablet Styles for Core Services */
@media (min-width: 768px) {
  
  .services-unique-container {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}

/* Large Desktop Styles for Core Services */
@media (min-width: 1440px) {
  
  .marketing-main-title {
    font-size: 3.5rem;
  }
  
  .marketing-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Marketing Showcase Responsive */
@media (max-width: 768px) {
  .marketing-showcase {
    padding: 2.5rem 1.25rem;
  }
  
  .marketing-main-title {
    font-size: 1.75rem;
  }
  
  .marketing-services-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .marketing-service-item {
    padding: 1.25rem;
  }
  
  .service-number {
    font-size: 2rem;
    top: 0.75rem;
    right: 0.75rem;
  }
  
  .service-item-title {
    font-size: 1rem;
  }
  
  .service-item-desc {
    font-size: 0.8125rem;
  }
  
  .marketing-image-container {
    margin-top: 1.5rem;
  }
}

@media (min-width: 768px) {
  .marketing-main-title {
    font-size: 2rem;
  }
  
  .marketing-services-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .marketing-showcase {
    padding: 4rem 2.5rem;
  }
  
  .marketing-content-wrapper {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3.5rem;
    align-items: center;
  }
  
  .marketing-main-title {
    font-size: 2.25rem;
  }
  
  .marketing-services-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1280px) {
  .marketing-main-title {
    font-size: 2.5rem;
  }
  
  .marketing-service-item {
    padding: 1.75rem;
  }
}

/* Marketing Packages Features Grid Responsive */
@media (max-width: 768px) {
  .services-section div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

/* ===============================
   SERVICES DROPDOWN – HOVER ONLY
   =============================== */

.services-dropdown {
  position: relative;
}

.nav-menu, .nav-container {
  overflow: visible !important;
}

.services-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--gold-accent);
  border-radius: 12px;
  padding: 0.75rem 0;
  min-width: 260px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.2s ease;
  z-index: 1000;
}

.services-dropdown.active .services-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.services-dropdown:hover .services-toggle {
  color: inherit;
}

.services-dropdown:hover .services-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.services-menu:hover {
  display: flex;
}

.services-menu a {
  display: block;
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;

  transition: background 0.15s ease;
}

.services-menu a::after {
  content: "";
  font-size: 0.75rem;
  color: var(--white);
  opacity: 0.7;
}

.services-menu a:hover {
  background: rgba(0,0,0,0.06);
}

.services-menu a + a {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.services-dropdown:hover .services-caret {
  transform: rotate(180deg);
}


.services-dropdown.active .services-caret {
  transform: rotate(180deg);
}

.services-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.services-toggle:hover {
  background-color: var(--gray-100);
}


/* ================================
   Graphic Design Section (FINAL)
================================ */

.graphic-design-section {
  width: 100%;
  background: #faf9f7;
  padding: 6rem 0;
  overflow: hidden;
}

.gd-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 6rem;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 4rem;
}

.gd-content {
  max-width: 620px;
}

.gd-label {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--navy);
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.gd-title {
  font-size: 3rem;
  font-weight: 800;
  color: #FFBF52;;
  margin-bottom: 1.5rem;
}

.gd-desc {
  max-width: 520px;
  font-size: 1.25rem;
  line-height: 1.7;
  color: #6b7280;
  margin-bottom: 3rem;
}

.gd-icons-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
}

.gd-icon-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.gd-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.gd-icon-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #374151;
  line-height: 1.3;
}

.gd-image-stack {
  position: relative;
  width: 100%;
  height: 520px;
}

.gd-image-bg {

  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.7);
  left: 80px;
  width: 600px;
  
}

.gd-image-bg::after {
  content: "";
  position: absolute;
  inset: 0;
}

.gd-image-fg {
  position: absolute;
  width: 300px;
  height: 420px;
  top: 50%;
  left: -10px;
  transform: translateY(-50%);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,0.25);
}

.gd-image-fg::after {
  content: "";
  position: absolute;
  inset: 0;
}

.gd-image-fg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .gd-container {
    grid-template-columns: 1fr;
    padding: 0 2rem;
  }

  .gd-image-stack {
    height: 420px;
    margin-top: 3rem;
  }

  .gd-image-fg {
    left: -40px;
  }

  .gd-icons-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablet: improve two-column balance and image sizing for 768px–1024px */
@media (min-width: 768px) and (max-width: 1024px) {
  .gd-container {
    grid-template-columns: 1fr 1fr;
    padding: 0 2.5rem;
    gap: 2rem;
    align-items: center;
  }

  .gd-content {
    max-width: 520px;
  }

  .gd-title {
    font-size: 2.6rem;
    margin-bottom: 1rem;
  }

  .gd-desc {
    font-size: 1.1rem;
    margin-bottom: 2rem;
  }

  .gd-icons-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .gd-image-stack {
    height: 460px;
  }

  .gd-image-bg {
    left: 40px;
    width: 480px;
    background-position: center;
  }

  .gd-image-fg {
    width: 260px;
    height: 380px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* Mobile: reduce top padding and stack content to remove large gap */
@media (max-width: 767px) {
  .graphic-design-section {
    padding: 2rem 0;
  }

  .gd-container {
    padding: 0 1.25rem;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
  }

  .gd-image-stack {
    height: auto;
    margin-top: 1rem;
  }

  .gd-title {
    font-size: 2rem;
    line-height: 1.05;
  }

  .gd-image-bg {
    left: 0;
    width: 100%;
    background-position: center;
  }

  .gd-image-fg {
    position: relative;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    transform: none;
    margin-top: 1rem;
  }
}

/* ================================
   Graphic Design CTA Section
================================ */

.gd-cta-section {
  width: 100%;
  background: #051e8f; /* clean white */
  padding: 6rem 1rem;
  text-align: center;
}

.gd-cta-container {
  max-width: 900px;
  margin: 0 auto;
}

.gd-cta-text {
  font-size: 1.35rem;
  line-height: 1.7;
  color: #ffffff; /* navy */
  font-weight: 600;
  margin-bottom: 3rem;
}

/* CTA BUTTON */
.gd-cta-button {
  display: inline-block;
  padding: 1rem 2.5rem;
  background: #dcb109; /* brand orange / accent */
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 6px;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(11, 31, 58, 0.25);
  transition: all 0.25s ease;
}

.gd-cta-button:hover {
  background: #eac11f;
  transform: translateY(-2px);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .gd-cta-text {
    font-size: 1.1rem;
  }

  .gd-cta-button {
    padding: 0.9rem 2rem;
  }
}









    /* ===== DESKTOP LARGE TYPE SCALE ===== */
@media (min-width: 1200px) {

  /* Label */
  .label-text {
    font-size: 1.25rem;
  }

  /* Stats */
  .stat-number {
    font-size: 3rem;
  }

  .stat-label {
    font-size: 1.05rem;
    line-height: 1.4;
  }

  .stats {
    gap: 3rem;
    margin-top: 2.5rem;
  }
}

/* ======================SCHEDULE PAGE========================= */

.split-contact-section { position:relative; overflow:hidden; background: linear-gradient(135deg, var(--gold) 0%, var(--navy) 100%); }
.split-contact-section::before { content: ""; position:absolute; left:0; right:0; top:0; height:75vh; background-image: url('../images/defyned_services.jpg'); background-size: cover; background-position: center; opacity: 0.18; z-index:0; pointer-events:none; }
.split-contact-container { position:relative; z-index:1; max-width:1200px; margin:0 auto; display:grid; grid-template-columns:55% 45%; gap:2rem; align-items:stretch; padding:0 2rem; }
.contact-left { background:transparent; color:white; padding:4rem 3rem; display:flex; align-items:center; }
.contact-left .inner { max-width:520px; }
.contact-left h2 { font-size: clamp(2rem,4.5vw,3rem); line-height:1.02; margin:0 0 1rem; font-weight:800; }
.contact-left p { color: rgba(255,255,255,0.9); line-height:1.7; }
.contact-left .signature { margin-top:2.25rem; color: rgba(255,255,255,0.85); font-style:italic; }

.contact-right { display:flex; align-items:center; justify-content:center; }
.contact-card {
  background: #fff;
  padding: 3.5rem;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  max-width: 520px;
  width: 100%;
  border: 1.5px solid #e5e7eb;
  margin: 0 2rem;
  box-sizing: border-box;
}
.contact-card h3 { color: var(--gold); font-size:2rem; margin:0 0 0.5rem; font-weight:800; }
.contact-card p.lead { color: #4a4a4a; margin:0 0 1rem; font-size:1rem; }
.contact-card .meta { color:#6b6b6b; margin:0.6rem 0; }
.contact-card a.contact-cta { color: var(--gold); text-decoration:none; display:inline-block; margin-top:1rem; }

@media (max-width:900px) { .split-contact-container { grid-template-columns:1fr; } .contact-left { padding:2.5rem; } .contact-card { margin: 1rem 0 0 0; } }
  /* Mobile-specific tweaks: reduce top spacing and scale down large text */
  @media (max-width:767px) {
    main { padding-top: calc(var(--header-height) + 8px) !important; }
    .split-contact-section { padding: 2rem 0; }
    .split-contact-container { padding: 0 1rem; gap: 1rem; }
    .contact-left { padding: 1.5rem; }
    .contact-left h2 { font-size: 1.8rem !important; line-height: 1.05; }
    .contact-left p { font-size: 1rem; }
    .contact-card {
      padding: 1.25rem;
      max-width: 420px;
      box-shadow: 0 12px 24px rgba(0,0,0,0.06);
      border-radius: 10px;
      border: 1.5px solid #e5e7eb;
      margin: 0 1rem;
    }
    .contact-card h3 { font-size: 1.125rem; }
  }

  /* === MOBILE RIGHT-SCROLL FIX (PASTE ALL OF THIS) === */

/* Hero section safety */
.hero-content, .hero-background, .hero-bg-image {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Navigation safety (mobile) */
@media (max-width: 767px) {
  .nav-container {
    min-width: 0 !important;
    width: 100%;
  }
}
/* === HARD SCROLL LOCK WHEN MOBILE MENU IS OPEN === */
body.menu-open {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
}

  .services-section {
    align-items: center;
  }

  .services-image {
  display: flex;
  align-items: center;
  justify-content: center;

  /* DO NOT let container crop */
  overflow: visible;

  /* DO NOT force height */
  height: auto;
  min-height: unset;
}

.services-image img {
  width: 100%;
  height: auto;          /* 👈 image controls height */
  max-width: 100%;
  max-height: none;

  object-fit: contain;  /* 👈 NEVER crop */
  object-position: center;

  display: block;
}

:root {
  --nav-height: 0px;
}

main {
  padding-top: var(--nav-height);
}

@media (max-width: 500px) {
  .split-contact-container {
    padding: 0 0.5rem;
    gap: 0.5rem;
  }
  .contact-left {
    padding: 0.75rem;
  }
  .contact-card {
    padding: 0.5rem;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .contact-card h3 {
    font-size: 1rem;
  }
  .contact-card p.lead, .contact-card .meta {
    font-size: 0.95rem;
    word-break: break-word;
  }
}

/* ================================
   PROCESS FLOW SECTION (SCOPED)
   ================================ */

   /* DONE BELOW */

.process-flow-section {
  background: white;
  padding: 3rem 0;
}

/* grid layout */
.process-flow-section .process-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
}

/* tablet */
@media (max-width: 1024px) {
  .process-flow-section .process-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 1rem;
  }
}

/* mobile */
@media (max-width: 640px) {
  .process-flow-section .process-grid {
    grid-template-columns: 1fr;
    padding: 0 1rem;
  }
}

.half-split-container { display:grid; grid-template-columns:50% 50%; width:100%; height:50vh; min-height:320px; }
.half-split-left { display:flex; align-items:center; justify-content:flex-start; padding:4rem; }
.half-split-right { position:relative; overflow:hidden; }
.half-split-right img { width:100%; height:100%; max-height:100vh; object-fit:cover; display:block; }
.half-split-left .content { max-width:560px; }
.half-split-left h2 { font-size:2.25rem; color:var(--navy); margin-bottom:1rem; }
.half-split-left p { color:var(--gray-dark); line-height:1.6; }
@media (max-width:900px) { .half-split-container { grid-template-columns:1fr; grid-auto-rows:auto; height:auto; } .half-split-right img { height:320px; max-height:none; } .half-split-left { padding:2rem; justify-content:center; text-align:left; } }


.swal2-container,
.swal2-popup {
  z-index: 200000 !important;
}

/* Leadership Section Styles */
.leadership-section {
  padding: 5rem 2rem;
  background: #01017E;
}

.leadership-container {
  max-width: 100%;
  margin: 0 auto;
}

.leadership-header {
  text-align: center;
  margin-bottom: 4rem;
}

.leadership-label {
  color: #FFBF52;
  font-size: 0.95rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.leadership-title {
  color: white;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.leadership-description {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
}

.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 3rem;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

.team-member {
  background: rgba(255, 255, 255, 0.03);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.team-member-left {
  border-right: 2px solid #FFBF52;
}

.team-member-right {
  border-left: 2px solid #FFBF52;
}

.team-image-container {
  position: relative;
  overflow: hidden;
  max-width: 500px;
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.team-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.team-image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(1, 1, 126, 0.95) 0%, rgba(1, 1, 126, 0.75) 25%, rgba(1, 1, 126, 0.3) 50%, transparent 70%);
  padding: 2rem;
}

.team-name-badge-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.team-badge {
  display: inline-block;
  background: #FFBF52;
  color: #01017E;
  padding: 0.6rem 1.5rem;
  border-radius: 25px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  box-shadow: 0 4px 15px rgba(255, 191, 82, 0.4);
}

.team-name {
  color: white;
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.team-bio {
  padding: 2.5rem;
  max-width: 550px;
}

.team-bio-intro {
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.8;
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  font-weight: 500;
}

.team-bio-intro .highlight {
  color: #FFBF52;
  font-weight: 600;
}

.team-bio-highlight-box {
  background: rgba(255, 191, 82, 0.08);
  border-left: 3px solid #FFBF52;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  border-radius: 4px;
}

.team-bio-highlight-text {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.8;
  font-size: 1.1rem;
  margin: 0;
}

.team-bio-highlight-text strong {
  color: rgba(255, 255, 255, 1);
}

.team-bio-paragraph {
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.8;
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}

.team-bio-paragraph strong {
  color: #FFBF52;
}

.team-bio-paragraph-last {
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.8;
  font-size: 1.1rem;
  margin: 0;
}

.team-bio-paragraph-last em {
  color: rgba(255, 255, 255, 0.95);
  font-style: normal;
  font-weight: 600;
}

.team-bio-paragraph-no-margin {
  margin-bottom: 0;
}

/* Leadership Section Responsive Styles */
@media (max-width: 1024px) {
  .leadership-section {
    padding: 4rem 1.5rem;
  }

  .leadership-title {
    font-size: 2rem;
  }

  .leadership-description {
    font-size: 1rem;
  }

  .team-image {
    height: 350px;
  }

  .team-bio {
    padding: 2rem;
  }

  .team-name {
    font-size: 1.5rem;
  }
}

@media (max-width: 768px) {
  .leadership-section {
    padding: 3rem 1rem;
  }

  .leadership-header {
    margin-bottom: 3rem;
  }

  .leadership-label {
    font-size: 0.85rem;
  }

  .leadership-title {
    font-size: 1.75rem;
    margin-bottom: 1rem;
  }

  .leadership-description {
    font-size: 0.95rem;
    padding: 0 1rem;
  }

  .team-grid {
    grid-template-columns: 1fr;
    margin-top: 2rem;
  }

  .team-member {
    padding: 1.5rem;
  }

  .team-member-left {
    border-right: none;
    border-bottom: 2px solid #FFBF52;
  }

  .team-member-right {
    border-left: none;
    border-top: 2px solid #FFBF52;
  }

  .team-image {
    height: 300px;
  }

  .team-image-overlay {
    padding: 1.5rem;
  }

  .team-name-badge-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
  }

  .team-badge {
    padding: 0.5rem 1rem;
    font-size: 0.65rem;
    letter-spacing: 1px;
  }

  .team-name {
    font-size: 1.15rem;
  }

  .team-bio {
    padding: 1.5rem 1rem;
    max-width: 100%;
  }

  .team-bio-intro {
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
  }

  .team-bio-highlight-box {
    padding: 1rem;
    margin-bottom: 1.25rem;
  }

  .team-bio-highlight-text {
    font-size: 0.9rem;
  }

  .team-bio-paragraph {
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
  }

  .team-bio-paragraph-last {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .leadership-section {
    padding: 2.5rem 0.75rem;
  }

  .leadership-header {
    margin-bottom: 2rem;
  }

  .leadership-title {
    font-size: 1.5rem;
  }

  .leadership-description {
    font-size: 0.9rem;
  }

  .team-member {
    padding: 1rem;
  }

  .team-image {
    height: 250px;
    border-radius: 12px;
  }

  .team-image-container {
    border-radius: 12px;
  }

  .team-image-overlay {
    padding: 1rem;
  }

  .team-badge {
    padding: 0.4rem 1rem;
    font-size: 0.7rem;
    letter-spacing: 1px;
  }

  .team-name {
    font-size: 1rem;
  }

  .team-bio {
    padding: 1.25rem 0.75rem;
  }

  .team-bio-intro {
    font-size: 0.9rem;
  }

  .team-bio-highlight-box {
    padding: 0.875rem;
  }

  .team-bio-highlight-text {
    font-size: 0.85rem;
  }

  .team-bio-paragraph {
    font-size: 0.85rem;
  }

  .team-bio-paragraph-last {
    font-size: 0.85rem;
  }
}

/* Styles extracted for contact CTA */
.contact-cta-section {
  padding: 2rem 1rem;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.contact-cta-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: center;
}

.contact-cta-row {
  width: 100%;
  max-width: 1100px;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: flex-start;
  padding: 0 0.25rem;
  flex-wrap: wrap;
}

.contact-cta-col {
  flex: 1;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.contact-cta-item {
  display: flex;
  gap: 0.9rem;
  align-items: center;
}

.contact-cta-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gold-accent,#F2B33B);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 8px;
}

.contact-cta-icon svg { 
  color: inherit; 
  width: 100%; 
  height: 100%; 
  display: block; 
  stroke: currentColor; 
  stroke-width: 2px; 
  vector-effect: non-scaling-stroke;
}

.contact-cta-icon svg * {
  stroke: currentColor;
  fill: none;
}

.contact-cta-text {
  font-size: 1.25rem;
  color: #111;
  line-height: 1.1;
}

.contact-cta-text strong {
  display: inline-block;
  font-size: 1.1rem;
  margin-right: 0.45rem;
  vertical-align: middle;
  font-weight: 700;
}

.contact-cta-text span {
  vertical-align: middle;
  font-weight: 800;
}

.contact-cta-button { display:block; width:calc(100% + 320px); max-width:none; margin:0 -160px; background:var(--navy,#07107a); color:#fff; padding:1rem 1.25rem; border-radius:14px; border:none; cursor:pointer; font-weight:800; font-size:2rem; text-transform:uppercase; letter-spacing:0.6px; box-shadow:0 6px 18px rgba(7,16,122,0.12); text-align:center; }
@media (max-width:1200px) { .contact-cta-button { width:calc(100% + 240px); margin:0 -120px; } }
@media (max-width:900px) { .contact-cta-button { width:calc(100% + 80px); margin:0 -40px; font-size:1.6rem; } }
@media (max-width:520px) { .contact-cta-button { width:100%; margin:0; border-radius:12px; box-shadow:none; font-size:1.05rem; padding:0.75rem 1rem; } }
@media (max-width:360px) { .contact-cta-button { font-size:0.95rem; padding:0.6rem 0.9rem; } }

/* Mobile-specific adjustments for CTA icons and text */
@media (max-width:600px) {
  .contact-cta-icon {
    width: 44px;
    height: 44px;
    padding: 6px;
  }

  .contact-cta-icon svg {
    stroke-width: 1.6px;
  }

  .contact-cta-text {
    font-size: 1rem;
    line-height: 1.05;
  }

  .contact-cta-text strong {
    font-size: 1rem;
  }

  .contact-cta-row {
    gap: 1rem;
  }
}

@media (max-width:420px) {
  .contact-cta-icon {
    width: 40px;
    height: 40px;
    padding: 5px;
  }

  .contact-cta-text {
    font-size: 0.95rem;
  }
}

/* Defyned Solutions Suite */
.values-section-mp { padding: 3.5rem 2rem; background: var(--navy,#06124a); color: #fff; }
.solutions-inner { max-width: 1200px; margin: 0 auto; }
.values-header-mp { text-align: center; margin-bottom: 2rem; }
.values-header-mp h2 { margin: 0; font-size: 2.25rem; font-weight: 800; letter-spacing: 0.4px; }
.values-header-mp p { margin: 0.5rem 0 0; opacity: 0.95; font-size: 1rem; }
.values-grid-mp { display: flex; gap: 1.25rem; justify-content: space-between; align-items: stretch; flex-wrap: wrap; }
.value-card-mp { background: #ffffff; border-radius: 24px; box-shadow: 0 10px 30px rgba(5,20,60,0.18); padding: 2rem 1.75rem; width: 360px; display: flex; flex-direction: column; gap: 0.5rem; align-items: center; text-align: center; transition: transform 200ms ease, box-shadow 200ms ease; border: 1px solid rgba(5,20,60,0.06); }
.value-card-mp:hover { transform: translateY(-8px); box-shadow: 0 14px 30px rgba(10,30,70,0.12); }
.value-icon-mp { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.96); color: #F2B33B; margin-bottom: 0; }
.value-icon-mp svg { width: 36px; height: 36px; }
.value-text-mp { color: #052f91; font-size: 1.1rem; line-height: 1.45; }
.value-text-mp strong { display: block; font-size: 1.40rem; color: #052f91; margin-bottom: 0; font-weight: 800; }
.value-subtitle-mp { color: #9aa0a8; font-size: 1rem; margin-bottom: 1rem; font-weight: 500; }
.value-body-mp { margin: 0; color: #052f91; font-size: 0.95rem; line-height: 1.5; padding: 0 0.5rem; margin-top: 0.45rem; max-width: 86%; margin-left: auto; margin-right: auto; }
@media (max-width: 860px) { .values-grid-mp { flex-direction: column; align-items: center; } .value-card-mp { width: 92%; } }