@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

:root {
	--ink: #1b2430;
	--muted: #757575;
	--brand: #2c00a5;
	--font: 'Quicksand', sans-serif;
  --navbar-height: 8vh;
  --laptop-size: 1550px
}

@media (max-width: 1540px) {
  :root { --navbar-height: 47px; }
}

.bg-light-gray {
  background-color: #f8f9fa;  /* Bootstrap's default light gray */
  border-radius: 0.5rem;
  width: 100%;
}

.section-divider {
	width: 120px;
	height: 1px;
	background: linear-gradient(90deg,#f7f7f7,var(--brand));
	border-radius: 6px;
	margin: 1rem auto
}

/* spacers to mirror legacy layout */

.spacer {
	padding: calc(var(--navbar-height) * 2) 0
}

.spacer-nav {
	padding: var(--navbar-height) 0 0 0
}

.spacer-nav-3x {
	padding: calc(var(--navbar-height) * 3) 0
}

.spacer1 {
	padding: 2vh 0
}

.spacer2 {
	padding: 4vh 0
}

.spacer2-5 {
	padding: 6vh 0
}

.spacer3 {
	padding: 8vh 0
}
    
.text-muted-2 {
	color: var(--muted)!important
}


html {
  scroll-behavior: smooth;
}

body {
	color: var(--ink);
	font-family: var(--font)
}

/* Navigation bar */

.navbar {  
  height: var(--navbar-height);
}

.navbar-brand img {
	height: 45px
}

.nav-item {
  display: block;
  color: var(--muted);
  white-space: nowrap;
  font-size: 22px;
  padding: 10px 25px 10px;
  transition: 0.2s;
  margin: 0 5px;
}

#mainNav {
  transition: all 0.3s ease-in-out;
}

#mainNav.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  animation: slideDown 0.35s ease-out;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@media (max-width: 1540px) {
  .navbar-brand img {
    height: 40px
  }  
}

@media (max-width: 984px) {
  .navbar-brand img {
    height: 27px
  }  
}

.fullscreen {
  min-height: calc(100vh - var(--navbar-height)); 
  padding-top: calc(var(--navbar-height) * 0.5);
  padding-bottom: calc(var(--navbar-height) * 2);
  box-sizing: border-box;
}

/* Home (fullscreen) */
.home-fullscreen {
  min-height: calc(100vh - var(--navbar-height)); 
  padding-top: calc(var(--navbar-height) * 0.5);
  padding-bottom: calc(var(--navbar-height) * 2);
  box-sizing: border-box;
}

.home-fullscreen .hero-img img {
  max-width: 100%;
  height: auto;
  max-height: calc( (100vh - var(--navbar-height)) * 0.6 );
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

.partner-logo {
  display: flex;
  gap: 8rem;
  max-width: 75%;
  margin: 0 auto;
  padding: 0.35rem 0.6rem;
  box-sizing: border-box;
  flex-wrap: nowrap;     /* keep single row */
  overflow: hidden;      /* hide any overflow while images shrink */
}

/* scale images proportionally to always fit the container */
.partner-logo img {
  object-fit: contain;
  display: block;
  flex-shrink: 1;
}

@media (max-width: 1550px) {
  .partner-logo {
    gap: 10rem;
    padding: 0.25rem 0.4rem;
  }
}

/* tighter spacing & smaller caps on very small screens */
@media (max-width: 984px) {
  
  .home-fullscreen .hero-img img {
    max-height: calc( (100vh - var(--navbar-height)) * 0.5 );
  }

  .partner-logo {
    max-width: 92%;
    gap: 0.1rem;
    padding: 0.25rem 0.4rem;
  }
}



/* Solution tabs styling */

#solutionTabs .nav-link {
  color: var(--ink);
  font-weight: 500;
  border: none;
  padding: 1rem 2rem;
  position: relative;
}

#solutionTabs .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 1px;
	background: linear-gradient(90deg,white,var(--brand));
  opacity: 0;
  transition: opacity 0.3s ease;
}

#solutionTabs .nav-link:hover::after {
  opacity: 1;
}

#solutionTabs .nav-link.active::after {
  opacity: 1;
  background: linear-gradient(90deg,white,var(--brand));
}

@media (max-width: 984px) {
  #solutionTabs {
    display: flex;
    flex-wrap: nowrap;                 /* do not wrap to next line */
    overflow-x: auto;                  /* allow horizontal scroll if needed */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;             /* hide scrollbar in Firefox */
    -ms-overflow-style: none;          /* hide scrollbar in IE/Edge */
    gap: 0.25rem;
    box-sizing: border-box;
  }

  #solutionTabs::-webkit-scrollbar {
    display: none; /* hide scrollbar in WebKit browsers */
  }

  /* allow each tab to shrink/grow equally so all fit on one line */
  #solutionTabs .nav-item {
    flex: 1 1 0;
    min-width: 0;    /* permits shrinking below intrinsic width */
    white-space: nowrap;
  }

  #solutionTabs .nav-link {
    padding: 0.5rem 0.6rem;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

}

.tab-pane {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* Logo carousel animation */
.logo-carousel {
  overflow: hidden;
  display: flex;  
  width: 100%;
  height: 80px;
  position: relative;
  padding: 1rem 0;
}

.logo-track {
  padding: 0 5vh 0 0;
  display: flex;
  animation: scroll 80s linear infinite;
  gap: 6rem;
}

.logo-track:hover {
  animation-play-state: paused;
}

.logo-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-item img {
  height: 70px;
  width: auto;
  /* filter: grayscale(100%); */
  object-fit: contain;
  transition: opacity 0.2s ease;
}

.logo-item img:hover {
  opacity: 1;
  filter: none;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100% - 2rem));
  }
}

@media (max-width: 984px) {
  .logo-track {
    animation-duration: 40s; /* Faster animation on mobile */
  }
}

/* Add gradient masks to fade edges */
.logo-carousel::before,
.logo-carousel::after {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 100px;
  z-index: 2;
}

.logo-carousel::before {
  left: 0;
  background: linear-gradient(to right, #f8f9fa 0%, transparent 100%);
}

.logo-carousel::after {
  right: 0;
  background: linear-gradient(to left, #f8f9fa 0%, transparent 100%);
}

.quote-diagonal {
    padding: 1.5rem;
    position: relative;
    font-style: italic;
    margin: 1.5rem 0;
}

.quote-diagonal::before,
.quote-diagonal::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    border: 1px solid #333;
}

.quote-diagonal::before {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
}

.quote-diagonal::after {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
}



footer {
	border-top: 1px solid #e9eef5
}