:root {
--primary: hsl(38 92% 50%);
--primary-foreground: hsl(0 0% 100%);
--primary-glow: hsl(38 92% 65%);
--background: hsl(0 0% 100%);
--foreground: hsl(220 20% 10%);
--card: hsl(0 0% 100%);
--card-foreground: hsl(220 20% 10%);
--secondary: hsl(220 14% 96%);
--secondary-foreground: hsl(220 20% 10%);
--muted: hsl(220 14% 96%);
--muted-foreground: hsl(220 10% 45%);
--destructive: hsl(0 72% 51%);
--destructive-foreground: hsl(0 0% 100%);
--border: hsl(220 13% 91%);
--success: hsl(142 76% 36%);
--destructive-cross: hsl(0 72% 51%);
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', system-ui, sans-serif;
background-color: var(--background);
color: var(--foreground);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.bg-primary {
background-color: var(--primary) !important;
}
.text-primary {
color: var(--primary) !important;
}
.text-primary-foreground {
color: var(--primary-foreground) !important;
}
.bg-muted {
background-color: var(--muted) !important;
}
.text-muted-foreground {
color: var(--muted-foreground) !important;
}
.border-primary {
border-color: var(--primary) !important;
}
/*.btn-primary {
background-color: var(--primary);
color: var(--primary-foreground);
border-color: var(--primary);
}
.btn-primary:hover {
background-color: hsl(38 92% 45%);
border-color: hsl(38 92% 45%);
}*/
.bg-destructive {
background-color: var(--destructive) !important;
}
.text-destructive {
color: var(--destructive) !important;
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
@keyframes bounce {
0%,
100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
@keyframes ping {
75%,
100% {
transform: scale(2);
opacity: 0;
}
}
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.animate-bounce {
animation: bounce 1s infinite;
}
.animate-ping {
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.nav-tabs .nav-link.active {
background: var(--primary);
color: var(--primary-foreground);
box-shadow: 0 10px 15px -3px rgba(234, 157, 18, 0.25);
border-color: var(--primary);
}
.feature-btn.active {
border-color: var(--primary);
box-shadow: 0 20px 25px -5px rgba(234, 157, 18, 0.1);
transform: scale(1.02);
background-color: white !important;
}
.feature-btn {
transition: all .3s ease;
}
.group:hover .group-hover-text-primary {
color: var(--primary) !important;
}
.group:hover .group-hover-translate-x-1 {
transform: translateX(0.25rem);
}
.challenge-card:hover {
border-color: rgba(220, 53, 69, 0.3) !important;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
transform: translateY(-2px);
}
.who-card:hover {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
transform: translateY(-4px);
}
.who-card:hover .arrow-icon {
opacity: 1 !important;
}
.hidden {
display: none !important;
}
/* Platform Features Carousel */
.carousel-container {
scrollbar-width: none;
-ms-overflow-style: none;
scroll-snap-type: x mandatory;
padding-bottom: 1rem;
}
.carousel-container::-webkit-scrollbar {
display: none;
}
.feature-card-carousel {
min-width: 340px;
max-width: 340px;
scroll-snap-align: start;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid var(--border);
background: white;
}
.feature-card-carousel:hover {
transform: translateY(-8px);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}
.feature-label {
font-size: 12px !important;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.carousel-nav-btn {
width: 3rem;
height: 3rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
background: white;
transition: all 0.2s ease;
color: var(--foreground);
}
.carousel-nav-btn:hover:not(:disabled) {
transform: scale(1.1);
background-color: var(--muted);
}
.carousel-nav-btn.primary {
background-color: var(--primary);
color: white;
border-color: var(--primary);
}
.carousel-nav-btn.primary:hover:not(:disabled) {
background-color: hsl(38 92% 45%);
}
.carousel-nav-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
/* v2 Styles */
.madarek-enterprise-landing {
--primary-color: #F9B52B;
--primary-color-light: #FDB863;
--secondary-color: #ffe5d7;
--third-color: #fff2e2;
--text-muted: #64748B;
--text-hover: #334155;
--amber-900: #92400e
}
.madarek-enterprise-landing body,
.madarek-enterprise-landing {
font-family: 'Inter', sans-serif !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
overflow-x: hidden !important
}
.madarek-enterprise-landing .bg-primary-custom {
background-color: var(--primary-color) !important
}
.madarek-enterprise-landing .bg-third-custom {
background-color: var(--third-color) !important
}
.madarek-enterprise-landing .bg-secondary-custom {
background-color: var(--secondary-color) !important
}
.madarek-enterprise-landing .text-primary-custom {
color: var(--primary-color) !important
}
.madarek-enterprise-landing .text-amber-900 {
color: var(--amber-900) !important
}
.madarek-enterprise-landing .btn-primary-custom {
background-color: var(--primary-color) !important;
border-color: var(--primary-color) !important;
color: white !important
}
.madarek-enterprise-landing .btn-primary-custom:hover {
background-color: var(--primary-color-light) !important;
border-color: var(--primary-color-light) !important;
color: white !important
}
.madarek-enterprise-landing .btn-outline-primary-custom {
border-color: var(--primary-color) !important;
color: var(--amber-900) !important;
background-color: var(--third-color) !important
}
.madarek-enterprise-landing .btn-outline-primary-custom:hover {
background-color: var(--secondary-color) !important;
border-color: var(--primary-color) !important;
color: var(--amber-900) !important
}
.madarek-enterprise-landing .tab-button {
transition: all .2s !important;
padding-bottom: .5rem !important;
border: none !important;
border-bottom: 3px solid transparent !important;
background: none !important;
cursor: pointer !important;
font-size: 18px !important;
color: var(--text-muted) !important
}
.madarek-enterprise-landing .tab-button.active {
border-bottom-color: var(--primary-color) !important;
color: var(--primary-color) !important;
font-weight: 600 !important
}
.madarek-enterprise-landing .tab-button:not(.active):hover {
border-bottom-color: var(--primary-color-light) !important;
color: var(--text-hover) !important
}
.madarek-enterprise-landing .chart-container {
width: 100% !important;
height: 300px !important;
max-height: 400px !important;
margin: 0 auto !important;
position: relative !important
}
@media (min-width:1024px) {
.madarek-enterprise-landing .chart-container {
height: 350px !important
}
}
.madarek-enterprise-landing .gradient-primary {
background: linear-gradient(135deg, var(--third-color) 0%, #f8f9fa 100%) !important
}
.madarek-enterprise-landing .gradient-card {
background: linear-gradient(135deg, var(--primary-color-light) 0%, var(--primary-color) 100%) !important
}
.madarek-enterprise-landing .card-hover {
transition: all .3s ease !important
}
.madarek-enterprise-landing .card-hover:hover {
transform: translateY(-8px) !important;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175) !important
}
.madarek-enterprise-landing .journey-card {
transition: all .3s ease !important
}
.madarek-enterprise-landing .journey-card:hover {
transform: translateY(-8px) !important
}
.madarek-enterprise-landing .checkmark-bg {
width: 1.5rem !important;
height: 1.5rem !important;
background-color: var(--third-color) !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important
}
.madarek-enterprise-landing .sticky-header {
position: sticky !important;
top: 0 !important;
z-index: 1050 !important;
background-color: rgba(255, 255, 255, .95) !important;
backdrop-filter: blur(8px) !important
}
.madarek-enterprise-landing .quick-setup-tabs {
background-color: #F8F9FA;
border-radius: 50px;
padding: 6px;
display: inline-flex;
border: 1px solid #E2E8F0;
margin-bottom: 3rem;
justify-content: center;
}
.madarek-enterprise-landing .quick-setup-tabs .nav-link {
border: none;
border-radius: 50px;
padding: 10px 24px;
color: #64748B;
font-weight: 500;
margin: 0;
background: transparent !important;
}
.madarek-enterprise-landing .quick-setup-tabs .nav-link:hover {
background-color: rgba(0, 0, 0, 0.02);
color: #334155;
}
.madarek-enterprise-landing .quick-setup-tabs .nav-link.active {
background-color: var(--primary-color) !important;
color: white !important;
box-shadow: 0 4px 6px -1px rgba(249, 181, 43, 0.3) !important;
}
.madarek-enterprise-landing .feature-card {
border: 1px solid transparent !important;
border-radius: 16px !important;
padding: 24px !important;
display: flex !important;
align-items: flex-start !important;
gap: 16px !important;
cursor: pointer !important;
margin-bottom: 16px !important;
background: #F8FAFC !important;
transition: all 0.25s ease !important;
}
.madarek-enterprise-landing .feature-card .feature-icon {
background: #E2E8F0 !important;
color: #64748B !important;
width: 48px !important;
height: 48px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 12px !important;
font-size: 20px !important;
padding: 0 !important;
flex-shrink: 0 !important;
}
.madarek-enterprise-landing .feature-card.active {
border: 1px solid var(--primary-color) !important;
background: white !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}
.madarek-enterprise-landing .feature-card.active .feature-icon {
background: var(--primary-color) !important;
color: white !important;
}
.madarek-enterprise-landing .info-panel {
border: 1px solid #F1F5F9 !important;
border-radius: 24px !important;
padding: 48px !important;
background: #FDFBF6 !important;
/* Creamy off-white as per design */
box-shadow: none !important;
transition: all .6s ease !important;
min-height: 460px !important;
}
.madarek-enterprise-landing .info-panel .feature-icon {
background: var(--primary-color) !important;
color: white !important;
width: 56px !important;
height: 56px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 12px !important;
font-size: 24px !important;
}
.madarek-enterprise-landing .info-panel-inner {
animation: fadeIn .6s ease !important
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.madarek-enterprise-landing .slider-dots {
display: flex !important;
justify-content: center !important;
gap: 6px !important;
margin-top: 16px !important
}
.madarek-enterprise-landing .slider-dots span {
width: 10px !important;
height: 10px !important;
border-radius: 50% !important;
background: #ddd !important;
transition: background .3s !important
}
.madarek-enterprise-landing .slider-dots span.active {
background: var(--primary-color) !important
}
.madarek-enterprise-landing .metric-box {
background-color: #FFFBEB;
border: 1px solid #FEF3C7;
}
.madarek-enterprise-landing .btn-warning {
background-color: var(--primary-color) !important;
border: none;
padding: 12px 24px;
border-radius: 8px;
}
.madarek-enterprise-landing .btn-warning:hover {
background-color: #ea9a0a !important;
}
@media (max-width:768px) {
.madarek-enterprise-landing .info-panel {
margin-top: 20px !important;
padding: 24px !important
}
}
/* Partner Logos */
.partner-logo-container {
filter: grayscale(100%);
opacity: 0.7;
transition: all 0.3s ease;
}
.partner-logo-container:hover {
filter: grayscale(0%);
opacity: 1;
}
.logo-img {
height: 3rem;
}
@media (min-width: 768px) {
.logo-img {
height: 4rem;
}
}

.hover-card {
  transition: all 0.3s ease;
  overflow: hidden;
}

.hover-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
}

/* Gradient overlay */
.hover-gradient {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hover-card:hover .hover-gradient {
  opacity: 1;
}

/* Gradients */
.gradient-cyan {
  background: linear-gradient(135deg, rgba(6,182,212,.2), rgba(168,85,247,.1));
}

.gradient-purple {
  background: linear-gradient(135deg, rgba(168,85,247,.2), rgba(236,72,153,.1));
}

.gradient-red {
  background: linear-gradient(135deg, rgba(239,68,68,.2), rgba(220,38,38,.1));
}

.gradient-amber {
  background: linear-gradient(135deg, rgba(245,158,11,.2), rgba(217,119,6,.1));
}

.madarek-enterprise-landing .text-success,
.madarek-enterprise-landing .text-success-custom {
  color: var(--success) !important;
}

.madarek-enterprise-landing .check-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  /* 0.75rem */
  font-size: 14px;
  /* 0.875rem */
  margin-bottom: 12px;
  /* 0.75rem */
}

.madarek-enterprise-landing .text-destructive-custom {
  color: var(--destructive-cross) !important;
}

@media (min-width: 1200px) {
  .madarek-enterprise-landing .display-4 {
    font-size: 40px !important;
    line-height: 1.1;
  }
}

@media (min-width: 1200px) {
  .madarek-enterprise-landing .display-5 {
    font-size: 42px !important; 
    line-height: 1.1;
  }
}

@media (min-width: 1200px) {
  .madarek-enterprise-landing .display-6 {
    font-size: 35px !important; 
    line-height: 1.1;
  }
}

@media (min-width: 1200px) {
  .madarek-enterprise-landing .fs-4 {
    font-size: 22px !important; 
    line-height: 1.1;
  }
}

@media (min-width: 1200px) {
  .madarek-enterprise-landing .fs-5 {
    font-size: 17px !important; 
    line-height: 2.1;
  }
}

@media (min-width: 1200px) {
  .madarek-enterprise-landing .slider-fs-5 {
    font-size: 17px !important; 
    line-height: 1.1;
  }
}

@media (min-width: 1200px) {
  .madarek-enterprise-landing .fs-6 {
    font-size: 16px !important; 
    line-height: 1.1;
  }
}