/* ==========================================
   APSAE SUMMIT 2027
   GLOBAL BRAND COLOR SYSTEM
========================================== */

:root {
    /* Official Brand Colors */
    --apsae-navy: #132b4d;
    --apsae-pink: #f04e6a;
    --apsae-slate: #394555;
    --apsae-charcoal: #20201f;
    --apsae-white: #ffffff;

    /* Supporting Colors */
    --apsae-pink-light: #ff8095;
    --apsae-light-bg: #f5f7fa;
    --apsae-border: rgba(19, 43, 77, 0.14);

    /* Gradients */
    --apsae-gradient-primary:
        linear-gradient(135deg, #132b4d, #20201f);

    --apsae-gradient-accent:
        linear-gradient(135deg, #f04e6a, #d83c5a);

    --apsae-gradient-soft:
        linear-gradient(135deg, #132b4d, #394555);

    /* Shadows */
    --apsae-shadow:
        0 12px 35px rgba(19, 43, 77, 0.12);

    --apsae-pink-shadow:
        0 10px 30px rgba(240, 78, 106, 0.22);

    /* Border Radius */
    --apsae-radius-sm: 8px;
    --apsae-radius-md: 16px;
    --apsae-radius-lg: 24px;
}

body, html
{
    padding: 0px;
    margin: 0px; 
}

/* =====================================
   SMOOTH SCROLLING THROUGHOUT THE PAGE
===================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

/* Prevent unwanted horizontal overflow */
body {
    margin: 0;
    overflow-x: hidden;
}

/* Smooth horizontal scrolling for scrollable sections */
.horizontal-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
}

/* Optional: Hide scrollbar */
.horizontal-scroll::-webkit-scrollbar {
    display: none;
}

/* Smoothly align individual horizontal items */
.horizontal-scroll > * {
    scroll-snap-align: start;
}

/* Optional: Smooth horizontal movement for anchor links */
a[href^="#"] {
    scroll-behavior: smooth;
}

/* Respect reduced-motion accessibility settings */
@media (prefers-reduced-motion: reduce) {
    html,
    .horizontal-scroll {
        scroll-behavior: auto;
    }
}

/* ==========================================
   GLOBAL SECTION UTILITIES
========================================== */

.apsae-section {
    position: relative;
    background: var(--apsae-white);
    color: var(--apsae-charcoal);
}

.apsae-section-dark {
    background: var(--apsae-navy);
    color: var(--apsae-white);
}

.apsae-section-slate {
    background: var(--apsae-slate);
    color: var(--apsae-white);
}

.apsae-section-light {
    background: var(--apsae-light-bg);
    color: var(--apsae-charcoal);
}

/* ==========================================
   HEADINGS
========================================== */

.apsae-section h1,
.apsae-section h2,
.apsae-section h3,
.apsae-section h4 {
    color: var(--apsae-navy);
}

.apsae-section-dark h1,
.apsae-section-dark h2,
.apsae-section-dark h3,
.apsae-section-dark h4,
.apsae-section-slate h1,
.apsae-section-slate h2,
.apsae-section-slate h3,
.apsae-section-slate h4 {
    color: var(--apsae-white);
}

.apsae-accent {
    color: var(--apsae-pink);
}

/* ==========================================
   GLOBAL BUTTONS
========================================== */

.apsae-btn,
.apsae-section .elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 14px 26px;

    background: var(--apsae-gradient-accent);
    color: var(--apsae-white);

    border: 1px solid var(--apsae-pink);
    border-radius: 50px;

    font-weight: 700;
    text-decoration: none;

    box-shadow: var(--apsae-pink-shadow);

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.apsae-btn:hover,
.apsae-section .elementor-button:hover {
    background: var(--apsae-navy);
    color: var(--apsae-white);
    border-color: var(--apsae-pink);

    transform: translateY(-3px);

    box-shadow: var(--apsae-shadow);
}

/* ==========================================
   GLOBAL CARDS
========================================== */

.apsae-card {
    padding: 28px;

    background: var(--apsae-white);
    color: var(--apsae-charcoal);

    border: 1px solid var(--apsae-border);
    border-radius: var(--apsae-radius-md);

    box-shadow: var(--apsae-shadow);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

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

    border-color: var(--apsae-pink);

    box-shadow: 0 18px 40px rgba(19, 43, 77, 0.16);
}

.apsae-card-icon {
    color: var(--apsae-pink);
    font-size: 32px;
}

/* ==========================================
   GLOBAL LINKS
========================================== */

.apsae-section a:not(.apsae-btn):not(.elementor-button) {
    transition: color .25s ease;
}

.apsae-section a:not(.apsae-btn):not(.elementor-button):hover {
    color: var(--apsae-pink);
}

/* ==========================================
   DIVIDERS
========================================== */

.apsae-divider {
    width: 70px;
    height: 4px;

    margin: 15px 0;

    background: var(--apsae-pink);
    border: 0;
    border-radius: 10px;
}

.apsae-divider-center {
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================
   GLOBAL BADGES
========================================== */

.apsae-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 14px;

    background: rgba(240, 78, 106, 0.10);
    color: var(--apsae-pink);

    border: 1px solid rgba(240, 78, 106, 0.25);
    border-radius: 50px;

    font-size: 12px;
    font-weight: 700;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 767px) {
    .apsae-card {
        padding: 22px;
    }

    .apsae-btn,
    .apsae-section .elementor-button {
        padding: 13px 22px;
    }
}