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

:root {
  --primary-color: #0c4a54;
  --primary-hover: #08353d;
  --secondary-color: #10b981;
  --danger-color: #ef4444;
  --text-dark: #1f2937;
  --text-light: #f3f4f6;
  --border-color: #e5e7eb;
}

/* Base styles */
body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  color: var(--text-dark);
  background-color: #fdfbfa;
  overflow-x: hidden;
}

/* Typography constraint: NEVER apply letter-spacing to Poppins font */
*, *::before, *::after {
  letter-spacing: 0px !important;
}

h1 {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(2.5rem, 6.5vw, 4rem) !Important;
  line-height: 1.0625;
  color: #FFFFFF;
  text-shadow: 0px 1px 24.7px rgba(15, 105, 83, 0.1);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.3;
}

h3 {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  line-height: 1.4;
}

.breadcrumb {
  font-size: clamp(0.75rem, 1vw, 0.875rem);
}

/* Spacing and borders rules */
/* Spacing uses rem, borders use px */
.card-premium {
	box-shadow: 0px 16px 32px -4px rgba(12, 12, 13, 0.1), 0px 4px 4px -4px rgba(12, 12, 13, 0.05);
	border-radius:16px;
	background-color: #ffffff;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	padding-bottom:7px;
}
.card-premium:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px -5px rgba(12, 74, 84, 0.1), 0 8px 10px -6px rgba(12, 74, 84, 0.1);
  border-color: rgba(12, 74, 84, 0.2);
  height:100%;
}
.card-premium .card-inner{
	background:#FFFFFF;
	border-radius:16px;
	border:1px solid #EAEAF2;
}


/* Required field asterisk */
.required {
  color: var(--danger-color);
  margin-left: 4px;
}

/* Form inputs */
.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  border: 1px solid var(--border-color);
  background-color: #ffffff;
  color: var(--text-dark);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(12, 74, 84, 0.1);
}

.form-control.error {
  border: 1px solid var(--danger-color);
}

.form-error {
  font-size: 0.75rem;
  color: var(--danger-color);
  margin-top: 0.25rem;
  min-height: 1.2rem;
}

/* Buttons and loaders */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border-radius: 0.375rem;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.btn-primary {
  color: #ffffff;
  background-color: var(--primary-color);
}

.btn-primary:hover {
  background-color: var(--primary-hover);
}

.btn-loader {
  display: none;
  position: absolute;
}

.btn.loading .btn-text {
  visibility: hidden;
}

.btn.loading .btn-loader {
  display: inline-flex;
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #ffffff;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Custom premium styles */
.gradient-hero {
  background:linear-gradient(107.27deg, #08519B 16.05%, #377D96 42.23%, #5DA291 66.78%);
}

.gradient-card-dark {
  background: linear-gradient(135deg, #05262c 0%, #0a3641 100%);
}

.signal-box {
  background: #ffffff;
  border: 1px solid var(--border-color);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.signal-box::after {
  content: attr(data-letter);
  position: absolute;
  right: -0.5rem;
  bottom: -1rem;
  font-size: 8rem;
  font-weight: 900;
  color: rgba(229, 231, 235, 0.25);
  line-height: 1;
  pointer-events: none;
  font-family: 'Poppins', sans-serif;
}

.signal-box:hover {
  transform: scale(1.03);
  border-color: var(--primary-color);
  box-shadow: 0 10px 20px -10px rgba(12, 74, 84, 0.15);
}

/* Animations */
.animate-fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Analytics That Drive Action box*/
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(32px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.stats-card{
    opacity:0;
    transform:translateY(40px);
    transition:
        opacity .7s ease,
        transform .7s ease,
        box-shadow .3s ease;
}

.stats-card.show{
    opacity:1;
    transform:translateY(0);
}

/* Custom logo sizing from Figma */
.logo-custom {
  height: 4rem;
  width: auto;
}

 @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(80px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .animate-slide-in-right {
    animation: slideInRight 1s ease-out forwards;
  }

/* color class */
.blueText{color:#08519B;}
.orangeText{color:#EC7E62;}
.greenText{color:#5DA291;}

/* Figma-based Request a Demo Button */
.btn-request-demo {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 1px;
  gap: 6px;
  width: 167px;
  height: 48px;
  background: linear-gradient(132.06deg, #3771C8 22.45%, #08519B 75.14%);
  box-shadow: 0px 1px 8.7px rgba(255, 255, 255, 0.16);
  border-radius: 8px; /* Borders and border-radius must use px */
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.btn-request-demo:hover {
  opacity: 0.92;
  box-shadow: 0px 4px 12px rgba(8, 81, 155, 0.3);
}

.btn-request-demo:active {
  transform: scale(0.98);
}

/* Custom Hero Badge Styles */
.hero-badge {
  background: linear-gradient(266.49deg, rgba(8, 81, 155, 0.4) 4.39%, rgba(93, 162, 145, 0.4) 94.2%);
  border: 0.5px solid rgba(241, 242, 249, 0.5);
  box-shadow: 1px 0px 10px rgba(202, 239, 249, 0.25);
  border-radius: 200px;
}

/* Header Navigation Links */
header nav a,
#mobileMenu a,
header a.open-demo-trigger {
  color: #100f0f;
  font-size: 1rem;
  font-weight: 400;
}

/* platform page >> Better Visibility image animation*/
.animate-loop-rotate {
    animation: loopRotate 40s linear infinite;
}
.animate-loop-rotate:hover {
    animation-play-state: paused;
}
/*
@keyframes loopRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}*/

.grecaptcha-badge {
    visibility: hidden !important;
}