body {
    background-color: #021124;
    /* Dark theme by default for About */
    color: #e8eaed;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #021124;
}

::-webkit-scrollbar-thumb {
    background: #0a4280;
    border-radius: 4px;
}

/* Hero Portal Clip */
.portal-container {
    clip-path: inset(30% 35% 30% 35% round 20px);
    transition: filter 0.5s ease;
}

/* Skewed Values Panels */
.skew-container {
    transform: skewX(-10deg);
}

.skew-content {
    transform: skewX(10deg);
    /* Un-skew the content inside */
}

.value-panel {
    flex: 1;
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.4s;
}

.value-panel:hover {
    flex: 2.5;
    background-color: #052a5a;
}

/* Milestones Responsive Grid & Visibility Rules */
.milestones-desktop-track {
    display: block !important;
}

.milestones-mobile-track {
    display: none !important;
}

.milestones-grid-4 {
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
}

/* Tablet View: 2 Cards (640px - 1023px) */
@media (min-width: 640px) {
    .milestones-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Desktop View: 4 Cards (>= 1024px) */
@media (min-width: 1190px) {
    .milestones-grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* Milestones Card Effects */
.milestone-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Floating WhatsApp Pulse */
.wa-pulse {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Mobile & Tablet View: Ensure adequate height on hover/touch so card content displays properly */
@media (max-width: 1023px) {
    .skew-container {
        transform: none !important;
        height: auto !important;
        min-height: 580px !important;
    }
    .skew-content {
        transform: none !important;
        padding: 1rem !important;
    }
    .value-panel {
        min-height: 110px !important;
        transition: flex 0.5s ease, min-height 0.5s ease !important;
    }
    .value-panel:hover,
    .value-panel:active,
    .value-panel:focus {
        flex: 2.5 !important;
        min-height: 230px !important;
    }
    .value-panel p {
        opacity: 0 !important;
        transition: opacity 0.4s ease 0.1s !important;
    }
    .value-panel:hover p,
    .value-panel:active p,
    .value-panel:focus p {
        opacity: 1 !important;
    }
}

/* Section 2: Pinned Split Screen Sticky Narrative */
@media (min-width: 1024px) {

    #legacy-trigger .lg\:sticky,
    .legacy-sticky-panel {
        position: sticky !important;
        top: 0 !important;
        height: 100vh !important;
        z-index: 20 !important;
    }
}