/* New Color Palette: Blue and dark gray */
.primary-bg { background-color: #4F73C5; }
.primary-text { color: #4F73C5; }
.secondary-bg { background-color: #2C3E50; }
.secondary-text { color: #2C3E50; }
.light-bg { background-color: #ECF0F1; }
.accent-text { color: #f093fb; } /* Keeping the accent for highlights */

body {
    font-family: 'Inter', sans-serif;
    background: #f8fafc;
    color: #334155;
    overflow-x: hidden;
}

.custom-card {
    background-color: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border-radius: 1rem;
    transition: transform 0.3s ease;
}

.custom-card:hover {
    transform: translateY(-5px);
}

.navbar a:hover {
    color: #f093fb;
    transition: color 0.3s ease;
}

.interactive-image-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    border-radius: 1rem;
    overflow: hidden;
    background-color: #e2e8f0;
}

.interactive-image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(44, 62, 80, 0.8);
    color: white;
    padding: 1rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.interactive-image-container:hover .overlay-text {
    transform: translateY(0);
}

/* Image Slider styles */
.slider-container {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
}

.slider-wrapper {
    display: flex;
    /* SLOW, SMOOTH transition */
    transition: transform 1.2s ease-in-out;
}

.slider-item {
    min-width: 100%;
    display: flex;                 /* center image horizontally/vertically */
    justify-content: center;
    align-items: center;
    height: 600px;                 /* fixed uniform height (adjust as needed) */
    background-color: #f8fafc;     /* light background behind images */
}

.slider-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;           /* keep aspect ratio, no cropping */
    border-radius: 1rem;
}

.slider-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #4F73C5;
    color: white;
    border: none;
    cursor: pointer;
    padding: 0.75rem;
    border-radius: 9999px;
    z-index: 10;
}

.slider-nav .prev-btn {
    left: 1rem;
}

.slider-nav .next-btn {
    right: 1rem;
}

/* Responsive tweaks */
@media (max-width: 768px) {
    .slider-item {
        height: 250px;   /* shorter on tablets */
    }
}

@media (max-width: 480px) {
    .slider-item {
        height: 200px;   /* shorter on mobile */
    }
}

/* Smooth scroll for anchor links */
html {
    scroll-behavior: smooth;
}

[id] {
scroll-margin-top: 80px; /* adjust based on header height */
}

/* Globe look (gradient + shading) */

#hero-sepsis360 {
margin-top: 0.0rem; /* reduce space from navbar */
}

.globe-container {
height: 2.0rem; /* tighten vertical space */
}

/* Orbit ring container */
.orbit-ring {
position: absolute;
top: 50%;
left: 50%;
transform-style: preserve-3d;
animation: spinRing 12s linear infinite;
}

.orbit-ring span {
position: absolute;
font-size: 1.5rem;
font-weight: bold;
color: #333;
text-shadow: 1px 1px 6px rgba(0,0,0,0.3);
transform-origin: 0 8rem;
backface-visibility: hidden;   /* Prevent mirror flipping */
}

/* Distribute characters evenly in circle */
.orbit-ring span:nth-child(1) { transform: rotateY(0deg) translateZ(8rem); }
.orbit-ring span:nth-child(2) { transform: rotateY(18deg) translateZ(8rem); }
.orbit-ring span:nth-child(3) { transform: rotateY(36deg) translateZ(8rem); }
.orbit-ring span:nth-child(4) { transform: rotateY(54deg) translateZ(8rem); }
.orbit-ring span:nth-child(5) { transform: rotateY(72deg) translateZ(8rem); }
.orbit-ring span:nth-child(6) { transform: rotateY(90deg) translateZ(8rem); }
.orbit-ring span:nth-child(7) { transform: rotateY(108deg) translateZ(8rem); }
.orbit-ring span:nth-child(8) { transform: rotateY(116deg) translateZ(8rem); }
.orbit-ring span:nth-child(9) { transform: rotateY(134deg) translateZ(8rem); }
.orbit-ring span:nth-child(10){ transform: rotateY(152deg) translateZ(8rem); }

/* Animation for orbiting text */
@keyframes spinRing {
from { transform: rotateY(0deg); }
to   { transform: rotateY(360deg); }
}

/* Gradient Animation for Header Text */
.gradient-text {
    background: linear-gradient(270deg, #4F73C5, #10b981, #f59e0b, #dc2626); /* use SAFE colors */
    background-size: 600% 600%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 8s ease infinite;
    font-weight: 700;
}

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

/* Simple text rotation without fade */
.tagline-animation::before {
    content: 'Better Understanding..';
    animation: taglineSwitch 6s step-end infinite;
}

@keyframes taglineSwitch {
    0%, 49% { 
        content: 'Better Understanding..';
    }
    50%, 100% { 
        content: 'Critical insights..';
    }
}

/* Custom class for the Timeline Link Buttons, matching the 'Send Message' button color */
.timeline-link-button {
    /* Base style matching the 'Send Message' button's custom color */
    background-color: #4F73C5;
    color: white;
    font-weight: 600; 
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    /* Ensure the span element also displays correctly */
    display: inline-flex;
    align-items: center;
    white-space: nowrap; /* Prevent wrapping in a small button */
}

/* Hover/Active state matching the 'Send Message' button's hover color */
.timeline-link-button:hover {
    background-color: #3d5aa0;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); 
}