:root {
    --primary: #d10000;
    --primary-dark: #a30000;
    --primary-light: #ffd1d1;
    --dark: #1f2937;
    --bg: #fff;
    --nav-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    --radius: 0.75rem;
    --transition: 0.25s cubic-bezier(.56, -0.06, .52, 1.19);
    --z-header: 1050;

    --card-bg: #fff;
    --card-bg-dark: #1d232b;
    --card-shadow: 0 4px 28px 0 rgba(31, 41, 55, 0.09), 0 2px 8px rgba(209, 0, 0, 0.03);
    --card-shadow-hover: 0 8px 40px 0 rgba(21, 21, 35, 0.16), 0 6px 20px rgba(209, 0, 0, 0.06);
    --card-radius: 1.3rem;
    --card-border: 1.3px solid #f0f2f3;
    --card-border-dark: 1.5px solid #222734;
    --space: 2.2rem;
    --muted: #757f95;
    --muted-dark: #bdc3c8;
    --title: #181d24;
    --title-dark: #fafbff;
    --excerpt: #384165;
    --excerpt-dark: #dde4f0;
    --meta-font: 0.97rem;
}

body {
    margin: 0;
    font-family: 'Poppins', Arial, sans-serif;
    background: var(--bg);
    color: var(--dark);
}

.ad-container {
    width: 100%;        
    max-width: 1200px; 
    margin: 0 auto;    
}

.main-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: clamp(0.5rem, 2vw, 1.25rem) clamp(1rem, 5vw, 3rem);
    background: rgba(255, 255, 255, 0.85);
    /* translucent */
    /* Modern glass effect */
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    -webkit-box-shadow: 0 8px 32px 0 rgba(31, 41, 55, 0.07), 0 1.5px 8px rgba(209, 0, 0, 0.05);
            box-shadow: 0 8px 32px 0 rgba(31, 41, 55, 0.07), 0 1.5px 8px rgba(209, 0, 0, 0.05);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.32);
    border-radius: 0 0 1.8rem 1.8rem;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    min-height: 74px;
    -webkit-transition: background 0.27s cubic-bezier(.56, -.06, .52, 1.19);
    -o-transition: background 0.27s cubic-bezier(.56, -.06, .52, 1.19);
    transition: background 0.27s cubic-bezier(.56, -.06, .52, 1.19);
}

/* Logo */
.header-logo img {
    height: 100px;
    max-width: 170px;
    width: auto;
    display: block;
}

/* Nav - super structure */
.main-nav {
    position: relative;
    z-index: 2;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

/* Menu List */
.nav-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 2.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}

.nav-menu li {
    position: relative;
}

.nav-menu li a {
    color: var(--dark);
    text-decoration: none;
    font-weight: 500;
    padding: 0.65rem 0.95rem;
    border-radius: 0.33em;
    font-size: 1.08rem;
    -webkit-transition: background var(--transition), color var(--transition);
    -o-transition: background var(--transition), color var(--transition);
    transition: background var(--transition), color var(--transition);
    outline-color: var(--primary);
}

.nav-menu li a:focus,
.nav-menu li a:active {
    background: var(--primary-light);
    color: var(--primary);
}

.nav-menu li a:hover {
    color: var(--primary);
    background: var(--primary-light);
}

/* --- 1. Submenu styles (dropdowns) --- */
.has-submenu {
    position: relative;
}

.has-submenu>a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.3em;
    cursor: pointer;
    position: relative;
    -webkit-transition: color var(--transition);
    -o-transition: color var(--transition);
    transition: color var(--transition);
}

.has-submenu>a:after {
    content: '';
    display: inline-block;
    width: 0.48em;
    /* smaller arrow size */
    height: 0.48em;
    /* smaller arrow size */
    border-right: 1.7px solid var(--dark);
    /* slightly thinner */
    border-bottom: 1.7px solid var(--dark);
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    margin-left: 0.22em;
    /* reduce space to fit better */
    -webkit-transition: border-color var(--transition), -webkit-transform 0.22s cubic-bezier(.62, .08, .36, 1.56);
    transition: border-color var(--transition), -webkit-transform 0.22s cubic-bezier(.62, .08, .36, 1.56);
    -o-transition: border-color var(--transition), transform 0.22s cubic-bezier(.62, .08, .36, 1.56);
    transition: border-color var(--transition), transform 0.22s cubic-bezier(.62, .08, .36, 1.56);
    transition: border-color var(--transition), transform 0.22s cubic-bezier(.62, .08, .36, 1.56), -webkit-transform 0.22s cubic-bezier(.62, .08, .36, 1.56);
    position: relative;
    top: -1px;
    /* nudges it slightly lower for better vertical alignment */
    pointer-events: none;
    vertical-align: middle;
}

.has-submenu.open>a:after,
.has-submenu:hover>a:after {
    border-color: var(--primary);
    -webkit-transform: rotate(-135deg) translateY(2px) scale(1.08);
        -ms-transform: rotate(-135deg) translateY(2px) scale(1.08);
            transform: rotate(-135deg) translateY(2px) scale(1.08);
}

.submenu {
    display: none;
    min-width: 240px;
    max-width: 300px;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(12px) scale(.98);
        -ms-transform: translateX(-50%) translateY(12px) scale(.98);
            transform: translateX(-50%) translateY(12px) scale(.98);
    /* top: calc(100% + 0.45em); */
    background: #fff;
    -webkit-box-shadow: 0 14px 36px -8px rgba(0, 0, 0, 0.11), 0 1.5px 4px 0 rgba(0, 0, 0, .07);
            box-shadow: 0 14px 36px -8px rgba(0, 0, 0, 0.11), 0 1.5px 4px 0 rgba(0, 0, 0, .07);
    border-radius: var(--radius);
    padding: 0.42rem 0.4rem;
    z-index: 33;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    opacity: 0;
    pointer-events: none;
    -webkit-transition:
        opacity 0.21s cubic-bezier(.65, .09, .53, .95),
        -webkit-transform 0.20s cubic-bezier(.65, .09, .53, .95);
    transition:
        opacity 0.21s cubic-bezier(.65, .09, .53, .95),
        -webkit-transform 0.20s cubic-bezier(.65, .09, .53, .95);
    -o-transition:
        opacity 0.21s cubic-bezier(.65, .09, .53, .95),
        transform 0.20s cubic-bezier(.65, .09, .53, .95);
    transition:
        opacity 0.21s cubic-bezier(.65, .09, .53, .95),
        transform 0.20s cubic-bezier(.65, .09, .53, .95);
    transition:
        opacity 0.21s cubic-bezier(.65, .09, .53, .95),
        transform 0.20s cubic-bezier(.65, .09, .53, .95),
        -webkit-transform 0.20s cubic-bezier(.65, .09, .53, .95);
}

.has-submenu.open>.submenu,
.has-submenu:hover>.submenu,
.has-submenu:focus-within>.submenu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translateX(-50%) translateY(0) scale(1);
        -ms-transform: translateX(-50%) translateY(0) scale(1);
            transform: translateX(-50%) translateY(0) scale(1);
}

/* Submenu pseudo-arrow */
.has-submenu>.submenu::before {
    content: '';
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    top: -11px;
    width: 15px;
    height: 15px;
    background: #fff;
    border-radius: 0 0 4px 4px;
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
    z-index: 5;
    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* Submenu links refinement */
.submenu li {
    width: 100%;
}

.submenu li a {
    display: block;
    font-weight: 400;
    padding: 0.65rem 1.12rem;
    border-radius: 0.38em;
    font-size: 1.04rem;
    color: var(--dark);
    -webkit-transition: background var(--transition), color var(--transition), padding-left 0.18s;
    -o-transition: background var(--transition), color var(--transition), padding-left 0.18s;
    transition: background var(--transition), color var(--transition), padding-left 0.18s;
    outline: none;
    margin: 1px 0;
    white-space: pre-line;
}

.submenu li a:hover,
.submenu li a:focus {
    background: var(--primary-light);
    color: var(--primary);
    padding-left: 1.35em;
}

/* Optional: add a faint hover border on parent if dropdown is open */
.has-submenu.open>a,
.has-submenu:hover>a {
    background: var(--primary-light);
    color: var(--primary);
}

/* Social Icons */
.header-social-icons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0.6rem;
}

.header-social-icons a {
    color: #fff;
    background: var(--primary);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 15px;
    -webkit-transition: background var(--transition), color var(--transition);
    -o-transition: background var(--transition), color var(--transition);
    transition: background var(--transition), color var(--transition);
}

.header-social-icons a:hover,
.header-social-icons a:focus {
    background: var(--primary-dark);
    color: #fff;
    outline: 2px solid var(--primary-light);
}

/* CTA Button */
.header-button .button {
    background: var(--primary);
    color: #fff;
    border-radius: 2em;
    padding: 0.60rem 1.3rem;
    font-weight: 600;
    border: none;
    text-decoration: none;
    font-size: 1rem;
    -webkit-transition: background var(--transition), color var(--transition), -webkit-box-shadow var(--transition);
    transition: background var(--transition), color var(--transition), -webkit-box-shadow var(--transition);
    -o-transition: background var(--transition), box-shadow var(--transition), color var(--transition);
    transition: background var(--transition), box-shadow var(--transition), color var(--transition);
    transition: background var(--transition), box-shadow var(--transition), color var(--transition), -webkit-box-shadow var(--transition);
    -webkit-box-shadow: 0 2px 8px rgba(209, 0, 0, 0.06);
            box-shadow: 0 2px 8px rgba(209, 0, 0, 0.06);
    display: inline-block;
    margin-left: 0.75rem;
    cursor: pointer;
}

.header-button .button:hover,
.header-button .button:focus {
    background: var(--primary-dark);
    color: #fff;
    outline: 2px solid var(--primary-light);
}


/* --- Mobile Styles --- */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 2rem;
    margin-left: 1.5rem;
    cursor: pointer;
    color: var(--primary);
    z-index: 100;
}

.menu-toggle i {
    pointer-events: none;
}

.menu-toggle .icon-close {
    display: none;
}

/* ==== HERO SECTION WITH VIDEO ==== */

.hero-section {
    position: relative;
    width: 100vw;
    min-height: 62vw;
    /* Responsive height, or set a min-height in px if you want */
    min-height: clamp(540px, 70vw, 820px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    overflow: hidden;
    z-index: 1;
    isolation: isolate;
}

.hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    z-index: 0;
    min-width: 100%;
    min-height: 100%;
    -webkit-filter: brightness(0.84) contrast(1.06) saturate(1.18);
            filter: brightness(0.84) contrast(1.06) saturate(1.18);
    -webkit-transition: -webkit-filter 0.38s cubic-bezier(.55, .08, .38, 1.08);
    transition: -webkit-filter 0.38s cubic-bezier(.55, .08, .38, 1.08);
    -o-transition: filter 0.38s cubic-bezier(.55, .08, .38, 1.08);
    transition: filter 0.38s cubic-bezier(.55, .08, .38, 1.08);
    transition: filter 0.38s cubic-bezier(.55, .08, .38, 1.08), -webkit-filter 0.38s cubic-bezier(.55, .08, .38, 1.08);
    background: #333;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        -webkit-gradient(linear, left top, left bottom, color-stop(3%, rgba(21, 21, 35, 0.70)), color-stop(60%, rgba(21, 21, 35, 0.45)), color-stop(98%, rgba(21, 21, 35, 0.85))),
        radial-gradient(ellipse at 60% 16%, rgba(209, 0, 0, 0.07) 0%, transparent 58%);
    background:
        -o-linear-gradient(top, rgba(21, 21, 35, 0.70) 3%, rgba(21, 21, 35, 0.45) 60%, rgba(21, 21, 35, 0.85) 98%),
        -o-radial-gradient(60% 16%, ellipse, rgba(209, 0, 0, 0.07) 0%, transparent 58%);
    background:
        linear-gradient(180deg, rgba(21, 21, 35, 0.70) 3%, rgba(21, 21, 35, 0.45) 60%, rgba(21, 21, 35, 0.85) 98%),
        radial-gradient(ellipse at 60% 16%, rgba(209, 0, 0, 0.07) 0%, transparent 58%);
    pointer-events: none;
    /* Glass-like subtle effect: */
    backdrop-filter: blur(2px) saturate(110%);
    -webkit-backdrop-filter: blur(2px) saturate(110%);
}

.hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    text-align: center;
    width: min(95vw, 760px);
    margin: 0 auto;
    padding: clamp(2.2rem, 7vw, 4.6rem) 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 2.1rem;
    /* To enhance clarity/glass feel: */
    background: rgba(21, 21, 35, 0.22);
    border-radius: var(--radius);
    -webkit-box-shadow: 0 6px 28px rgba(30, 0, 0, 0.10);
            box-shadow: 0 6px 28px rgba(30, 0, 0, 0.10);
    -webkit-backdrop-filter: blur(0.4px) saturate(120%);
            backdrop-filter: blur(0.4px) saturate(120%);
}

.hero-content h1 {
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    letter-spacing: -0.015em;
    font-weight: 700;
    line-height: 1.09;
    margin: 0 0 1.0rem 0;
    color: #fff;
    text-shadow: 0 4px 28px rgba(21, 21, 34, 0.1);
}

.hero-content h1 span {
    color: var(--primary);
    background: -o-linear-gradient(5deg, var(--primary-light) 5%, var(--primary) 70%);
    background: linear-gradient(85deg, var(--primary-light) 5%, var(--primary) 70%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-content p {
    font-size: clamp(1.25rem, 2.6vw, 1.8rem);
    font-weight: 400;
    line-height: 1.44;
    color: #f3f4f8;
    text-shadow: 0 2px 8px rgba(10, 0, 0, 0.13);
    margin-bottom: 0;
}

.hero-cta.button {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.4em;
    font-size: 1.1rem;
    font-weight: 600;
    background: var(--primary);
    color: #fff;
    border-radius: 2em;
    padding: 0.77em 2.2em;
    -webkit-box-shadow: 0 4px 22px 0 rgba(209, 0, 0, 0.11);
            box-shadow: 0 4px 22px 0 rgba(209, 0, 0, 0.11);
    text-decoration: none;
    -webkit-transition: background 0.21s cubic-bezier(.56, -.06, .52, 1.19), -webkit-box-shadow 0.22s;
    transition: background 0.21s cubic-bezier(.56, -.06, .52, 1.19), -webkit-box-shadow 0.22s;
    -o-transition: background 0.21s cubic-bezier(.56, -.06, .52, 1.19), box-shadow 0.22s;
    transition: background 0.21s cubic-bezier(.56, -.06, .52, 1.19), box-shadow 0.22s;
    transition: background 0.21s cubic-bezier(.56, -.06, .52, 1.19), box-shadow 0.22s, -webkit-box-shadow 0.22s;
}

.hero-cta.button:hover,
.hero-cta.button:focus {
    background: var(--primary-dark);
    color: #fff;
    -webkit-transform: translateY(-2px) scale(1.03);
        -ms-transform: translateY(-2px) scale(1.03);
            transform: translateY(-2px) scale(1.03);
    outline: 2px solid var(--primary-light);
}

/* --- HERO MODERN ANIMATIONS --- */

/* Zoom video background gently */
.hero-bg-video {
    -webkit-animation: hero-video-zoom 14s cubic-bezier(.22, 0, .46, 1.08) infinite alternate;
            animation: hero-video-zoom 14s cubic-bezier(.22, 0, .46, 1.08) infinite alternate;
}

@-webkit-keyframes hero-video-zoom {
    0% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }

    100% {
        -webkit-transform: scale(1.055);
                transform: scale(1.055);
    }
}

@keyframes hero-video-zoom {
    0% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }

    100% {
        -webkit-transform: scale(1.055);
                transform: scale(1.055);
    }
}

/* Fade the overlay in gently */
.hero-overlay {
    opacity: 0;
    -webkit-animation: hero-overlay-fade 1.7s cubic-bezier(.45, .05, .1, 1) 0.15s forwards;
            animation: hero-overlay-fade 1.7s cubic-bezier(.45, .05, .1, 1) 0.15s forwards;
}

@-webkit-keyframes hero-overlay-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes hero-overlay-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Staggered content entrance */
.hero-content {
    opacity: 0;
    -webkit-transform: translateY(42px) scale(.97);
        -ms-transform: translateY(42px) scale(.97);
            transform: translateY(42px) scale(.97);
    -webkit-animation: hero-content-in 1.1s cubic-bezier(.67, -0.08, .42, 1.13) forwards;
            animation: hero-content-in 1.1s cubic-bezier(.67, -0.08, .42, 1.13) forwards;
    -webkit-animation-delay: 0.36s;
            animation-delay: 0.36s;
}

@-webkit-keyframes hero-content-in {
    to {
        opacity: 1;
        -webkit-transform: translateY(0) scale(1);
                transform: translateY(0) scale(1);
    }
}

@keyframes hero-content-in {
    to {
        opacity: 1;
        -webkit-transform: translateY(0) scale(1);
                transform: translateY(0) scale(1);
    }
}

.hero-content h1,
.hero-content p,
.hero-cta.button {
    opacity: 0;
}

.hero-content h1 {
    -webkit-animation: hero-h1-in 0.94s cubic-bezier(.66, -0.06, .36, 1.17) forwards;
            animation: hero-h1-in 0.94s cubic-bezier(.66, -0.06, .36, 1.17) forwards;
    -webkit-animation-delay: 0.49s;
            animation-delay: 0.49s;
    -webkit-transform: translateY(24px) scale(.98);
        -ms-transform: translateY(24px) scale(.98);
            transform: translateY(24px) scale(.98);
}

.hero-content p {
    -webkit-animation: hero-p-in 0.87s cubic-bezier(.63, -0.01, .26, 1.13) forwards;
            animation: hero-p-in 0.87s cubic-bezier(.63, -0.01, .26, 1.13) forwards;
    -webkit-animation-delay: 0.81s;
            animation-delay: 0.81s;
    -webkit-transform: translateY(22px) scale(.98);
        -ms-transform: translateY(22px) scale(.98);
            transform: translateY(22px) scale(.98);
}

.hero-cta.button {
    -webkit-animation: hero-btn-in 0.85s cubic-bezier(.66, .02, .3, 1.09) forwards;
            animation: hero-btn-in 0.85s cubic-bezier(.66, .02, .3, 1.09) forwards;
    -webkit-animation-delay: 1.05s;
            animation-delay: 1.05s;
    -webkit-transform: translateY(20px) scale(.98);
        -ms-transform: translateY(20px) scale(.98);
            transform: translateY(20px) scale(.98);
}

@-webkit-keyframes hero-h1-in {
    to {
        opacity: 1;
        -webkit-transform: translateY(0) scale(1);
                transform: translateY(0) scale(1);
    }
}

@keyframes hero-h1-in {
    to {
        opacity: 1;
        -webkit-transform: translateY(0) scale(1);
                transform: translateY(0) scale(1);
    }
}

@-webkit-keyframes hero-p-in {
    to {
        opacity: 1;
        -webkit-transform: translateY(0) scale(1);
                transform: translateY(0) scale(1);
    }
}

@keyframes hero-p-in {
    to {
        opacity: 1;
        -webkit-transform: translateY(0) scale(1);
                transform: translateY(0) scale(1);
    }
}

@-webkit-keyframes hero-btn-in {
    to {
        opacity: 1;
        -webkit-transform: translateY(0) scale(1);
                transform: translateY(0) scale(1);
    }
}

@keyframes hero-btn-in {
    to {
        opacity: 1;
        -webkit-transform: translateY(0) scale(1);
                transform: translateY(0) scale(1);
    }
}

/* Blog / Cards Section */
/* Light/dark auto (customize as desired) */
/* TODO: Implement darkmode */
/* @media (prefers-color-scheme: dark) {
    :root {
        --card-bg: var(--card-bg-dark);
        --card-border: var(--card-border-dark);
        --card-shadow: 0 4px 28px 0 rgba(21, 21, 35, 0.20), 0 2px 14px rgba(209, 0, 0, 0.08);
        --muted: #bdc3c8;
        --title: #fafbff;
        --excerpt: #dde4f0;
    }
} */

.blog-card-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr var(--space) 1fr var(--space) 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space);
    max-width: 1200px;
    margin: 4.5rem auto 0 auto;
    padding: var(--space);
}

.blog-card {
    background: var(--card-bg);
    -webkit-box-shadow: var(--card-shadow);
            box-shadow: var(--card-shadow);
    border-radius: var(--card-radius);
    overflow: hidden;
    border: var(--card-border);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    min-width: 0;
    /* Shrinks nicely */
    min-height: 0;
    -webkit-transition: -webkit-box-shadow 0.21s cubic-bezier(.55, .13, .17, 1.15), -webkit-transform 0.18s cubic-bezier(.57, .19, .37, 1.25);
    transition: -webkit-box-shadow 0.21s cubic-bezier(.55, .13, .17, 1.15), -webkit-transform 0.18s cubic-bezier(.57, .19, .37, 1.25);
    -o-transition: box-shadow 0.21s cubic-bezier(.55, .13, .17, 1.15), transform 0.18s cubic-bezier(.57, .19, .37, 1.25);
    transition: box-shadow 0.21s cubic-bezier(.55, .13, .17, 1.15), transform 0.18s cubic-bezier(.57, .19, .37, 1.25);
    transition: box-shadow 0.21s cubic-bezier(.55, .13, .17, 1.15), transform 0.18s cubic-bezier(.57, .19, .37, 1.25), -webkit-box-shadow 0.21s cubic-bezier(.55, .13, .17, 1.15), -webkit-transform 0.18s cubic-bezier(.57, .19, .37, 1.25);
    will-change: transform, box-shadow;
    position: relative;
    cursor: pointer;
}

.blog-card:hover,
.blog-card:focus-within {
    -webkit-box-shadow: var(--card-shadow-hover);
            box-shadow: var(--card-shadow-hover);
    -webkit-transform: translateY(-5px) scale(1.022);
        -ms-transform: translateY(-5px) scale(1.022);
            transform: translateY(-5px) scale(1.022);
}

.blog-card-img-wrap {
    position: relative;
    aspect-ratio: 16/9;
    /* Modern browser support */
    overflow: hidden;
    background: #f7f8fb;
}

.blog-card-img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
    -webkit-transition: -webkit-transform 0.38s cubic-bezier(.53, .11, .41, 1.24);
    transition: -webkit-transform 0.38s cubic-bezier(.53, .11, .41, 1.24);
    -o-transition: transform 0.38s cubic-bezier(.53, .11, .41, 1.24);
    transition: transform 0.38s cubic-bezier(.53, .11, .41, 1.24);
    transition: transform 0.38s cubic-bezier(.53, .11, .41, 1.24), -webkit-transform 0.38s cubic-bezier(.53, .11, .41, 1.24);
}

.blog-card:hover .blog-card-img,
.blog-card:focus-within .blog-card-img {
    -webkit-transform: scale(1.07);
        -ms-transform: scale(1.07);
            transform: scale(1.07);
}

.blog-card-image-overlay-text {
    position: absolute;
    bottom: 0.8em;
    left: 0.85em;
    background: -webkit-gradient(linear, left top, right top, color-stop(75%, var(--primary)), to(var(--primary-dark)));
    background: -o-linear-gradient(left, var(--primary) 75%, var(--primary-dark) 100%);
    background: linear-gradient(90deg, var(--primary) 75%, var(--primary-dark) 100%);
    color: #fff;
    font-weight: 600;
    font-size: 1em;
    padding: 0.36em 1.01em 0.29em 0.95em;
    border-radius: 0.43em;
    -webkit-box-shadow: 0 3px 14px rgba(0, 0, 0, 0.15);
            box-shadow: 0 3px 14px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.02em;
    max-width: 85%;
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

/* Title */
/* Title */
.blog-card-title a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    width: 100%;
    -webkit-transition: color 0.2s ease;
    -o-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

.blog-card-title a:hover,
.blog-card-title a:focus {
    color: var(--primary);
    /* or your desired hover color */
    text-decoration: underline;
    text-underline-offset: 3px;
}

.blog-card-title {
    margin: 1.2rem 1.2rem 0.62rem 1.2rem;
    font-size: 1.33rem;
    font-weight: 700;
    color: var(--title);
    letter-spacing: -0.007em;
    line-height: 1.27;
    min-height: 2.5em;
    max-height: 2.55em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    -webkit-transition: color 0.23s;
    -o-transition: color 0.23s;
    transition: color 0.23s;
    cursor: pointer;
}

.blog-card:hover .blog-card-title,
.blog-card:focus-within .blog-card-title {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Meta Row */
.blog-card-meta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 1.2em 1.2em;
    margin: 0 1.2rem 0.56rem 1.2rem;
    font-size: var(--meta-font);
    color: var(--muted);
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.blog-card-meta span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.4em;
    white-space: nowrap;
    opacity: 0.92;
}

.blog-card-meta i {
    font-size: 1em;
    color: var(--primary);
    opacity: 0.75;
    vertical-align: middle;
    margin-right: 0.14em;
}

/* Excerpt */
.blog-card-excerpt {
    color: var(--excerpt);
    font-size: 1.04rem;
    margin: 0 1.2rem 1.4rem 1.2rem;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    line-height: 1.6;
    max-height: 4.8em;
    /* approx 3 lines x line-height */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
}


.blog-card-title-link {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    width: 100%;
}

.blog-card-title-link:hover,
.blog-card-title-link:focus {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* Services Page hero*/
.services-hero {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    min-height: 54vw;
    min-height: clamp(370px, 63vw, 680px);
    width: 100vw;
    overflow: hidden;
    isolation: isolate;
    margin-bottom: 2.8rem;
    -webkit-box-shadow: 0 8px 32px 0 rgba(31, 41, 55, 0.09);
            box-shadow: 0 8px 32px 0 rgba(31, 41, 55, 0.09);
    border-radius: 0 0 2.2rem 2.2rem;
    z-index: 1;
    background: #fff;
}

.services-hero-bg {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100%;
    background: url('https://wkainternational.com/wp-content/uploads/Muscular-kickbox-fighter-punching-in-smoke.webp') center center/cover no-repeat;
    -webkit-filter: brightness(0.84) contrast(1.08) saturate(1.11) blur(0.4px);
            filter: brightness(0.84) contrast(1.08) saturate(1.11) blur(0.4px);
    z-index: 0;
    -webkit-transition: -webkit-filter 0.33s;
    transition: -webkit-filter 0.33s;
    -o-transition: filter 0.33s;
    transition: filter 0.33s;
    transition: filter 0.33s, -webkit-filter 0.33s;
    -webkit-animation: heroServiceZoom 10s cubic-bezier(.22, 0, .46, 1.08) infinite alternate;
            animation: heroServiceZoom 10s cubic-bezier(.22, 0, .46, 1.08) infinite alternate;
}

@-webkit-keyframes heroServiceZoom {
    0% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }

    100% {
        -webkit-transform: scale(1.035);
                transform: scale(1.035);
    }
}

@keyframes heroServiceZoom {
    0% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }

    100% {
        -webkit-transform: scale(1.035);
                transform: scale(1.035);
    }
}

.services-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        -o-linear-gradient(330deg, rgba(255, 255, 255, 0.74) 30%, rgba(209, 0, 0, .17) 100%),
        -o-linear-gradient(top, rgba(255, 255, 255, 0.13) 0%, rgba(31, 41, 55, 0.08) 96%);
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.74) 30%, rgba(209, 0, 0, .17) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(31, 41, 55, 0.08) 96%);
    backdrop-filter: blur(3px) saturate(120%);
    -webkit-backdrop-filter: blur(3px) saturate(120%);
    opacity: 0.96;
    pointer-events: none;
}

.services-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    margin: 0 auto;
    width: min(93vw, 750px);
    padding: clamp(2.1rem, 7vw, 4.0rem) 1.3rem;
    background: rgba(255, 255, 255, 0.83);
    border-radius: 1.4em;
    -webkit-box-shadow: 0 10px 38px rgba(31, 41, 55, 0.10), 0 3px 16px rgba(209, 0, 0, 0.06);
            box-shadow: 0 10px 38px rgba(31, 41, 55, 0.10), 0 3px 16px rgba(209, 0, 0, 0.06);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1.4rem;
    /* Animation for polished entrance: */
    opacity: 0;
    -webkit-transform: translateY(52px) scale(.96);
        -ms-transform: translateY(52px) scale(.96);
            transform: translateY(52px) scale(.96);
    -webkit-animation: servicesHeroIn 1.2s cubic-bezier(.63, -0.06, .45, 1.13) 0.09s forwards;
            animation: servicesHeroIn 1.2s cubic-bezier(.63, -0.06, .45, 1.13) 0.09s forwards;
}

@-webkit-keyframes servicesHeroIn {
    to {
        opacity: 1;
        -webkit-transform: translateY(0) scale(1);
                transform: translateY(0) scale(1);
    }
}

@keyframes servicesHeroIn {
    to {
        opacity: 1;
        -webkit-transform: translateY(0) scale(1);
                transform: translateY(0) scale(1);
    }
}

.services-hero-content h1 {
    font-size: clamp(2.7rem, 7vw, 4.2rem);
    font-weight: 800;
    letter-spacing: -0.012em;
    margin: 0 0 0.3em 0;
    color: var(--primary);
    line-height: 1.08;
    text-shadow: 0 4px 22px rgba(209, 0, 0, 0.10);
    background: -o-linear-gradient(5deg, var(--primary-light) 7%, var(--primary) 89%);
    background: linear-gradient(85deg, var(--primary-light) 7%, var(--primary) 89%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.services-hero-content h1 span {
    color: var(--primary);
    background: none;
    -webkit-text-fill-color: initial
}

.services-hero-content .subtitle {
    font-size: clamp(1.17rem, 3vw, 1.7rem);
    font-weight: 500;
    color: #2e3035;
    margin-top: 0;
    margin-bottom: 0.2em;
    opacity: 0.97;
    text-shadow: 0 2px 8px rgba(30, 0, 0, 0.10);
    font-family: 'Poppins', Arial, sans-serif;
}

.services-hero-content .hero-cta.button {
    margin-top: 0.8em;
    background: var(--primary);
    color: #fff;
    border-radius: 2.2em;
    padding: 0.88em 2.45em;
    font-size: 1.20rem;
    font-weight: 700;
    letter-spacing: 0.019em;
    -webkit-box-shadow: 0 4px 22px 0 rgba(209, 0, 0, 0.12);
            box-shadow: 0 4px 22px 0 rgba(209, 0, 0, 0.12);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.5em;
    text-decoration: none;
    border: none;
    -webkit-transition: background 0.20s cubic-bezier(.56, -.06, .52, 1.19), -webkit-transform 0.16s, -webkit-box-shadow 0.21s;
    transition: background 0.20s cubic-bezier(.56, -.06, .52, 1.19), -webkit-transform 0.16s, -webkit-box-shadow 0.21s;
    -o-transition: background 0.20s cubic-bezier(.56, -.06, .52, 1.19), transform 0.16s, box-shadow 0.21s;
    transition: background 0.20s cubic-bezier(.56, -.06, .52, 1.19), transform 0.16s, box-shadow 0.21s;
    transition: background 0.20s cubic-bezier(.56, -.06, .52, 1.19), transform 0.16s, box-shadow 0.21s, -webkit-transform 0.16s, -webkit-box-shadow 0.21s;
    cursor: pointer;
    outline: none;
    -webkit-animation: heroBtnServiceIn 0.92s cubic-bezier(.66, .02, .32, 1.07) 0.7s forwards;
            animation: heroBtnServiceIn 0.92s cubic-bezier(.66, .02, .32, 1.07) 0.7s forwards;
    opacity: 0;
    -webkit-transform: translateY(15px) scale(.96);
        -ms-transform: translateY(15px) scale(.96);
            transform: translateY(15px) scale(.96);
}

@-webkit-keyframes heroBtnServiceIn {
    to {
        opacity: 1;
        -webkit-transform: translateY(0) scale(1);
                transform: translateY(0) scale(1);
    }
}

@keyframes heroBtnServiceIn {
    to {
        opacity: 1;
        -webkit-transform: translateY(0) scale(1);
                transform: translateY(0) scale(1);
    }
}

.services-hero-content .hero-cta.button:hover,
.services-hero-content .hero-cta.button:focus {
    background: var(--primary-dark);
    color: #fff;
    outline: 2px solid var(--primary-light);
    -webkit-transform: translateY(-2px) scale(1.055);
        -ms-transform: translateY(-2px) scale(1.055);
            transform: translateY(-2px) scale(1.055);
}

/* rest of service page / bio page */
.bio-hero {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 4.5rem 1.5rem 2.0rem 1.5rem;
    min-height: 320px;
    text-align: center;
    background: -o-linear-gradient(350deg, #fff 70%, #ffd1d1 160%);
    background: linear-gradient(100deg, #fff 70%, #ffd1d1 160%);
    border-radius: 0 0 1.8rem 1.8rem;
    -webkit-box-shadow: 0 8px 32px 0 rgba(31, 41, 55, 0.07);
            box-shadow: 0 8px 32px 0 rgba(31, 41, 55, 0.07);
}

.bio-hero h1 {
    font-weight: 800;
    font-size: clamp(2.5rem, 6vw, 4.1rem);
    margin: 0;
    color: var(--primary);
    text-shadow: 0 6px 28px rgba(209, 0, 0, 0.09);
}

.bio-hero h2 {
    color: var(--dark);
    font-size: clamp(1.2rem, 2.8vw, 1.6rem);
    margin-top: 1.2rem;
    max-width: 670px;
    font-weight: 500;
}

.bio-hero .bio-quote {
    margin-top: 1.5em;
    font-size: 1.18rem;
    color: #575;
    font-style: italic;
    letter-spacing: 0.01em;
}

/* ------ IMPROVED BIO ROW LAYOUT ------ */
.bio-section-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    position: relative;
    background: none;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 3.3rem auto;
    padding: 0 2rem;
    gap: 3rem;
}

.bio-section-row.left-image {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
}

.bio-section-row.right-image {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
}

.bio-section-content,
.bio-section-image {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
    min-width: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: relative;
}

.bio-section-content {
    padding: 2.5rem 0 2.5rem 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    max-width: 580px;
    width: 100%;
}

.bio-section-content-inner {
    background: rgba(255, 255, 255, 0.89);
    -webkit-backdrop-filter: blur(8px) saturate(125%);
            backdrop-filter: blur(8px) saturate(125%);
    border-radius: 1.5rem;
    -webkit-box-shadow: 0 6px 44px 0 rgba(209, 0, 0, 0.09);
            box-shadow: 0 6px 44px 0 rgba(209, 0, 0, 0.09);
    padding: 2rem 2rem;
    border: 1.1px solid #ffe7e7;
    -webkit-animation-duration: 1.1s;
            animation-duration: 1.1s;
    -webkit-animation-timing-function: cubic-bezier(.6, .32, .41, 1.19);
            animation-timing-function: cubic-bezier(.6, .32, .41, 1.19);
    opacity: 0;
    -webkit-transform: translateX(-38px);
        -ms-transform: translateX(-38px);
            transform: translateX(-38px);
    width: 100%;
}

.bio-section-row.inview .bio-section-content-inner {
    opacity: 1;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-name: bioContentInLeft;
            animation-name: bioContentInLeft;
}

.bio-section-row.right-image .bio-section-content-inner {
    -webkit-transform: translateX(38px);
        -ms-transform: translateX(38px);
            transform: translateX(38px);
}

.bio-section-row.right-image.inview .bio-section-content-inner {
    -webkit-animation-name: bioContentInRight;
            animation-name: bioContentInRight;
}

@-webkit-keyframes bioContentInLeft {
    from {
        opacity: 0;
        -webkit-transform: translateX(-38px);
                transform: translateX(-38px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
}

@keyframes bioContentInLeft {
    from {
        opacity: 0;
        -webkit-transform: translateX(-38px);
                transform: translateX(-38px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
}

@-webkit-keyframes bioContentInRight {
    from {
        opacity: 0;
        -webkit-transform: translateX(38px);
                transform: translateX(38px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
}

@keyframes bioContentInRight {
    from {
        opacity: 0;
        -webkit-transform: translateX(38px);
                transform: translateX(38px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
}

.bio-section-content-inner h3 {
    font-size: 1.42rem;
    color: var(--primary);
    font-weight: 700;
    margin-bottom: 1.2em;
    letter-spacing: -0.012em;
}

.bio-section-content-inner p {
    color: #23272b;
    font-size: 1.13rem;
    line-height: 1.63;
    margin-bottom: 1.25em;
    font-family: 'Poppins', Arial, sans-serif;
}

.bio-section-image-wrap {
    width: 100%;
    max-width: 350px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    min-height: 260px;
    -webkit-animation-duration: 1.1s;
            animation-duration: 1.1s;
    -webkit-animation-timing-function: cubic-bezier(.6, .32, .41, 1.19);
            animation-timing-function: cubic-bezier(.6, .32, .41, 1.19);
    opacity: 0;
    -webkit-transform: translateX(48px);
        -ms-transform: translateX(48px);
            transform: translateX(48px);
}

.bio-section-row.inview .bio-section-image-wrap {
    opacity: 1;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-name: bioImgInRight;
            animation-name: bioImgInRight;
}

.bio-section-row.right-image .bio-section-image-wrap {
    -webkit-transform: translateX(-48px);
        -ms-transform: translateX(-48px);
            transform: translateX(-48px);
}

.bio-section-row.right-image.inview .bio-section-image-wrap {
    -webkit-animation-name: bioImgInLeft;
            animation-name: bioImgInLeft;
}

@-webkit-keyframes bioImgInRight {
    from {
        opacity: 0;
        -webkit-transform: translateX(48px);
                transform: translateX(48px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
}

@keyframes bioImgInRight {
    from {
        opacity: 0;
        -webkit-transform: translateX(48px);
                transform: translateX(48px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
}

@-webkit-keyframes bioImgInLeft {
    from {
        opacity: 0;
        -webkit-transform: translateX(-48px);
                transform: translateX(-48px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
}

@keyframes bioImgInLeft {
    from {
        opacity: 0;
        -webkit-transform: translateX(-48px);
                transform: translateX(-48px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
}

.bio-section-image-wrap img {
    width: 100%;
    max-width: 340px;
    height: auto;
    border-radius: 1.3rem;
    -webkit-box-shadow: 0 6px 42px rgba(209, 0, 0, 0.12);
            box-shadow: 0 6px 42px rgba(209, 0, 0, 0.12);
    border: 2.2px solid var(--primary-light);
    background: #fff;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
}

/* Profile page */

.profile-hero {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding: 4rem 1.5rem 2.0rem 1.5rem;
    min-height: 280px;
    position: relative;
    z-index: 1;
    background: -o-linear-gradient(350deg, #fff 65%, #ffd1d1 155%);
    background: linear-gradient(100deg, #fff 65%, #ffd1d1 155%);
    border-radius: 0 0 1.7rem 1.7rem;
    -webkit-box-shadow: 0 8px 32px 0 rgba(31, 41, 55, 0.08);
            box-shadow: 0 8px 32px 0 rgba(31, 41, 55, 0.08);
    gap: 2.5rem;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.profile-avatar {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    width: 156px;
    height: 156px;
    border-radius: 50%;
    background: #fff;
    -webkit-box-shadow: 0 4px 28px rgba(209, 0, 0, 0.10);
            box-shadow: 0 4px 28px rgba(209, 0, 0, 0.10);
    border: 4px solid var(--primary-light);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    overflow: hidden;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 50%;
}

.profile-avatar .fa-user {
    color: var(--primary-light);
    font-size: 5rem;
    opacity: 0.84;
}

.profile-hero-info {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 320px;
            flex: 1 1 320px;
    min-width: 180px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0.26em;
}

.profile-hero-info h1 {
    font-size: 2.35rem;
    font-weight: 800;
    margin: 0 0 0.5em 0;
    color: var(--primary);
    letter-spacing: -0.01em;
}

.profile-field-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 2em 3em;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-weight: 600;
    font-size: 1.11rem;
}

.profile-field-row span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.62em;
    color: var(--dark);
    margin-bottom: 0.15em;
}

.profile-field-row i {
    color: var(--primary);
    font-size: 1.12em;
    opacity: 0.85;
}

.profile-meta {
    margin-top: 0.75em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1.6em;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    font-size: 1.07rem;
    color: var(--muted);
}

.profile-country-flag {
    font-size: 1.33em;
    vertical-align: middle;
    margin-right: 0.33em;
}

/* Achievements/Info Block */
.profile-detail-section {
    max-width: 880px;
    background: rgba(255, 255, 255, 0.93);
    margin: 2.6rem auto 2rem auto;
    border-radius: 1.2rem;
    -webkit-box-shadow: 0 6px 30px rgba(209, 0, 0, 0.07);
            box-shadow: 0 6px 30px rgba(209, 0, 0, 0.07);
    border: 1.1px solid #f0c2c2;
    padding: 2.1rem 2.3rem 2.1rem 2.1rem;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1.04fr 2.5rem 1fr;
    grid-template-columns: 1.04fr 1fr;
    gap: 2.8rem 2.5rem;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    -webkit-animation: fadeUpCard 0.98s cubic-bezier(.62, .1, .2, 1.06) 0.2s backwards;
            animation: fadeUpCard 0.98s cubic-bezier(.62, .1, .2, 1.06) 0.2s backwards;
}

@-webkit-keyframes fadeUpCard {
    0% {
        opacity: 0;
        -webkit-transform: translateY(36px) scale(.97);
                transform: translateY(36px) scale(.97);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0) scale(1);
                transform: translateY(0) scale(1);
    }
}

@keyframes fadeUpCard {
    0% {
        opacity: 0;
        -webkit-transform: translateY(36px) scale(.97);
                transform: translateY(36px) scale(.97);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0) scale(1);
                transform: translateY(0) scale(1);
    }
}

.profile-detail-section-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2.1em;
}

.profile-label {
    color: var(--primary);
    font-weight: 700;
    font-size: 1.09em;
    letter-spacing: 0.02em;
    margin-bottom: 0.42em;
}

.profile-belt-level {
    font-size: 1.34em;
    font-weight: 800;
    letter-spacing: -0.016em;
    margin-bottom: 0.18em;
    color: var(--primary-dark);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.45em;
    line-height: 1.1;
}

.profile-belt-type {
    color: var(--muted);
    font-weight: 600;
    font-size: 1.08em;
    margin-left: 0.44em;
    letter-spacing: -0.008em;
}

.profile-date-gained,
.profile-national-role,
.profile-profile,
.profile-instructor-status,
.profile-examiner-status {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.55em;
    font-size: 1.09em;
    color: var(--dark);
    margin-bottom: 0.22em;
}

.profile-national-role {
    font-weight: 700;
    color: var(--primary-dark);
}

.profile-instructor-status .profile-level,
.profile-examiner-status .profile-level {
    font-weight: 700;
    margin-left: 0.31em;
    color: var(--primary);
}

.profile-detail-section-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1.7em 0;
}

.profile-badges {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0.8em;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-bottom: 0.95em;
}

.profile-badge {
    background: -o-linear-gradient(359deg, var(--primary) 70%, var(--primary-light) 110%);
    background: linear-gradient(91deg, var(--primary) 70%, var(--primary-light) 110%);
    color: #fff;
    font-weight: 700;
    border-radius: 1.2em;
    font-size: 1rem;
    padding: 0.24em 1.1em 0.24em 1.02em;
    -webkit-box-shadow: 0 1.5px 8px rgba(209, 0, 0, 0.08);
            box-shadow: 0 1.5px 8px rgba(209, 0, 0, 0.08);
    letter-spacing: 0.01em;
}

.profile-contact-links {
    margin-top: 0.7em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1.2em;
}

.profile-contact-links a {
    color: #fff;
    background: var(--primary);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 1.17em;
    -webkit-box-shadow: 0 2px 10px rgba(209, 0, 0, 0.09);
            box-shadow: 0 2px 10px rgba(209, 0, 0, 0.09);
    -webkit-transition: background 0.18s, outline 0.15s;
    -o-transition: background 0.18s, outline 0.15s;
    transition: background 0.18s, outline 0.15s;
}

.profile-contact-links a:hover,
.profile-contact-links a:focus {
    background: var(--primary-dark);
    outline: 2px solid var(--primary-light);
}

/* Events page with pagination */
/* Additional minor tweaks for the events section (optional) */
.events-container {
    max-width: 1200px;
    margin: 3rem auto 0 auto;
    padding: 2rem 1rem;
}

.events-title {
    font-size: 2.3rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--primary, #d10000);
    text-align: center;
    letter-spacing: -0.01em;
}

.event-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr var(--space, 2.2rem) 1fr var(--space, 2.2rem) 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space, 2.2rem);
}



/* Pagination Controls */
.pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 0.4rem;
    margin: 2.5rem 0 1.1rem 0;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.pagination button,
.pagination .page-num {
    background: var(--card-bg, #fff);
    border: 1px solid var(--primary-light, #ffd1d1);
    color: var(--primary, #d10000);
    font-size: 1.07em;
    padding: 0.36em 1.05em;
    border-radius: 0.52em;
    margin: 0 2px;
    cursor: pointer;
    -webkit-transition: background 0.21s, color 0.18s, border 0.18s;
    -o-transition: background 0.21s, color 0.18s, border 0.18s;
    transition: background 0.21s, color 0.18s, border 0.18s;
}

.pagination .active,
.pagination button:active {
    background: var(--primary, #d10000);
    color: #fff;
    border-color: var(--primary, #d10000);
}

.pagination button[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

/* --- CONTACT PAGE SPECIAL STYLES --- */
body.contact-bg {
    min-height: 100vh;
    background: -o-linear-gradient(330deg, #fff 38%, #ffd1d1 130%);
    background: linear-gradient(120deg, #fff 38%, #ffd1d1 130%);
    background-attachment: fixed;
    font-family: 'Poppins', Arial, sans-serif;
    color: var(--dark, #23272b);
    position: relative;
}

/* Decorative SVG */
.contact-background-svg {
    position: absolute;
    top: -120px;
    right: -160px;
    width: 520px;
    height: 530px;
    pointer-events: none;
    opacity: 0.19;
    z-index: 1;
    -webkit-filter: blur(0.7px);
            filter: blur(0.7px);
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

/* Main Layout Grid */
.contact-main {
    position: relative;
    z-index: 3;
    max-width: 1150px;
    margin: 4.3rem auto 0 auto;
    padding: 0 1rem 4.5rem 1rem;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1.1fr 3.5rem 1.25fr;
    grid-template-columns: 1.1fr 1.25fr;
    gap: 3.5rem;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    background: transparent;
}


/* Left: Info card */
.contact-info-card {
    background: rgba(255, 255, 255, 0.77);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
            backdrop-filter: blur(8px) saturate(130%);
    -webkit-box-shadow: 0 12px 38px 0 rgba(31, 41, 55, 0.09), 0 2px 8px rgba(209, 0, 0, 0.06);
            box-shadow: 0 12px 38px 0 rgba(31, 41, 55, 0.09), 0 2px 8px rgba(209, 0, 0, 0.06);
    border-radius: 1.4rem;
    border: 1.6px solid #f0f2f3;
    padding: 2.4rem 2.1rem 2.3rem 2.25rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2.1rem;
    min-width: 0;
    isolation: isolate;
    position: relative;
    overflow: hidden;
    -webkit-animation: fadeUpCard 1s cubic-bezier(.57, .13, .37, 1.25) 0.07s backwards;
            animation: fadeUpCard 1s cubic-bezier(.57, .13, .37, 1.25) 0.07s backwards;
}

@keyframes fadeUpCard {
    0% {
        opacity: 0;
        -webkit-transform: translateY(36px) scale(.97);
                transform: translateY(36px) scale(.97);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0) scale(1);
                transform: translateY(0) scale(1);
    }
}

.contact-info-card .contact-badge {
    display: inline-block;
    background: -o-linear-gradient(356deg, var(--primary) 69%, var(--primary-light) 98%);
    background: linear-gradient(94deg, var(--primary) 69%, var(--primary-light) 98%);
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    border-radius: 0.9em 0.33em 1.1em 0.63em;
    padding: 0.38em 1.1em 0.28em 1em;
    margin-bottom: 1.13em;
    -webkit-box-shadow: 0 3px 18px rgba(209, 0, 0, 0.13);
            box-shadow: 0 3px 18px rgba(209, 0, 0, 0.13);
}

.contact-info-card h1 {
    font-size: clamp(2.1rem, 4vw, 2.9rem);
    margin: 0 0 .40em 0;
    color: var(--primary);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.03;
}

.contact-info-card p {
    font-size: 1.18rem;
    color: #393646;
    margin-bottom: 0.2em;
    line-height: 1.55;
}

.contact-methods {
    margin: 1.1rem 0 0 0;
    padding: 0;
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: .85em;
}

.contact-methods li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1.03em;
    font-size: 1.07rem;
    color: #334;
}

.contact-methods a {
    color: var(--primary, #d10000);
    text-decoration: none;
    border-bottom: 1.3px dotted #d10000;
    font-weight: 600;
    -webkit-transition: color 0.18s, border 0.18s;
    -o-transition: color 0.18s, border 0.18s;
    transition: color 0.18s, border 0.18s;
}

.contact-methods a:hover,
.contact-methods a:focus {
    color: var(--primary-dark);
    border-bottom: 1.8px solid var(--primary-dark);
}

.contact-methods .fa-solid,
.contact-methods .fa-brands {
    color: var(--primary);
    font-size: 1.13em;
    opacity: .8;
}

.contact-card-socials {
    margin-top: 2.1em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1.1em;
}

.contact-card-socials a {
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 1.27em;
    -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.09);
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.09);
    -webkit-transition: background 0.19s, -webkit-transform 0.16s;
    transition: background 0.19s, -webkit-transform 0.16s;
    -o-transition: background 0.19s, transform 0.16s;
    transition: background 0.19s, transform 0.16s;
    transition: background 0.19s, transform 0.16s, -webkit-transform 0.16s;
}

.contact-card-socials a:hover,
.contact-card-socials a:focus {
    background: var(--primary-dark);
    -webkit-transform: translateY(-2px) scale(1.09);
        -ms-transform: translateY(-2px) scale(1.09);
            transform: translateY(-2px) scale(1.09);
    outline: none;
}

/* Right: Form card glass/slide/fade-in */
.contact-form-card {
    background: rgba(255, 255, 255, 0.89);
    -webkit-backdrop-filter: blur(12px) saturate(128%);
            backdrop-filter: blur(12px) saturate(128%);
    -webkit-box-shadow: 0 14px 48px 0 rgba(209, 0, 0, 0.08), 0 3px 10px 0 rgba(209, 0, 0, 0.07);
            box-shadow: 0 14px 48px 0 rgba(209, 0, 0, 0.08), 0 3px 10px 0 rgba(209, 0, 0, 0.07);
    border-radius: 1.6rem;
    border: 1.8px solid #ffe8e8;
    padding: 2.55rem 2.3rem 2.3rem 2.2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2.05rem;
    min-width: 0;
    isolation: isolate;
    position: relative;
    -webkit-animation: fadeUpCard 1.1s cubic-bezier(.57, .13, .37, 1.25) 0.3s backwards;
            animation: fadeUpCard 1.1s cubic-bezier(.57, .13, .37, 1.25) 0.3s backwards;
}

.contact-form-title {
    font-size: 1.31rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.6em;
    letter-spacing: -0.008em;
}

/* Form Style: floating modern labels */
.contact-form-modern {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1.24rem;
    width: 100%;
    margin-bottom: 0.7rem;
}

.contact-form-group {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.contact-form-modern input,
.contact-form-modern textarea {
    padding: 1em 1.15em 1em 1.12em;
    border: 1.6px solid #ebc8c8;
    border-radius: 0.9em;
    font-size: 1.08rem;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.91);
    color: #23272b;
    -webkit-transition: border 0.24s, background 0.2s, -webkit-box-shadow 0.18s;
    transition: border 0.24s, background 0.2s, -webkit-box-shadow 0.18s;
    -o-transition: border 0.24s, box-shadow 0.18s, background 0.2s;
    transition: border 0.24s, box-shadow 0.18s, background 0.2s;
    transition: border 0.24s, box-shadow 0.18s, background 0.2s, -webkit-box-shadow 0.18s;
    margin-bottom: 0.07rem;
    resize: none;
}

.contact-form-modern input:focus,
.contact-form-modern textarea:focus {
    border: 1.6px solid var(--primary);
    background: #fff;
    -webkit-box-shadow: 0 1px 11px rgba(209, 0, 0, 0.10);
            box-shadow: 0 1px 11px rgba(209, 0, 0, 0.10);
    outline: none;
}

/* Floating Label Animation */
.contact-form-modern label {
    position: absolute;
    left: 1.15em;
    top: 1.06em;
    font-size: 1.08em;
    color: #b78585;
    pointer-events: none;
    background: transparent;
    -webkit-transition: font-size 0.15s, color 0.18s, -webkit-transform 0.23s;
    transition: font-size 0.15s, color 0.18s, -webkit-transform 0.23s;
    -o-transition: transform 0.23s, font-size 0.15s, color 0.18s;
    transition: transform 0.23s, font-size 0.15s, color 0.18s;
    transition: transform 0.23s, font-size 0.15s, color 0.18s, -webkit-transform 0.23s;
    z-index: 4;
    padding: 0;
    font-weight: 400;
}

.contact-form-modern input:not(:-moz-placeholder-shown)+label, .contact-form-modern textarea:not(:-moz-placeholder-shown)+label {
    transform: translateY(-1.52em) scale(0.87);
    color: var(--primary);
    background: #fff;
    padding: 0 .21em;
    border-radius: 0.12em;
    font-weight: 600;
}

.contact-form-modern input:not(:-ms-input-placeholder)+label, .contact-form-modern textarea:not(:-ms-input-placeholder)+label {
    -ms-transform: translateY(-1.52em) scale(0.87);
        transform: translateY(-1.52em) scale(0.87);
    color: var(--primary);
    background: #fff;
    padding: 0 .21em;
    border-radius: 0.12em;
    font-weight: 600;
}

.contact-form-modern input:focus+label,
.contact-form-modern input:not(:placeholder-shown)+label,
.contact-form-modern textarea:focus+label,
.contact-form-modern textarea:not(:placeholder-shown)+label {
    -webkit-transform: translateY(-1.52em) scale(0.87);
        -ms-transform: translateY(-1.52em) scale(0.87);
            transform: translateY(-1.52em) scale(0.87);
    color: var(--primary);
    background: #fff;
    padding: 0 .21em;
    border-radius: 0.12em;
    font-weight: 600;
}

/* Required asterisk */
.input-required-star {
    color: var(--primary);
    margin-left: 0.17em;
    font-size: 1.09em;
    vertical-align: top;
}

/* Button CTA */
.contact-form-modern button {
    font-size: 1.12rem;
    background: -o-linear-gradient(1deg, var(--primary) 75%, var(--primary-dark) 99%);
    background: linear-gradient(89deg, var(--primary) 75%, var(--primary-dark) 99%);
    color: #fff;
    font-weight: 700;
    border-radius: 2em;
    padding: .76em 2.82em;
    border: none;
    outline: none;
    cursor: pointer;
    margin-top: 0.7em;
    -webkit-transition: background 0.19s, -webkit-transform 0.13s, -webkit-box-shadow 0.14s;
    transition: background 0.19s, -webkit-transform 0.13s, -webkit-box-shadow 0.14s;
    -o-transition: background 0.19s, transform 0.13s, box-shadow 0.14s;
    transition: background 0.19s, transform 0.13s, box-shadow 0.14s;
    transition: background 0.19s, transform 0.13s, box-shadow 0.14s, -webkit-transform 0.13s, -webkit-box-shadow 0.14s;
    -webkit-box-shadow: 0 1.5px 8px rgba(209, 0, 0, 0.06);
            box-shadow: 0 1.5px 8px rgba(209, 0, 0, 0.06);
    position: relative;
    letter-spacing: 0.01em;
}

.contact-form-modern button:focus,
.contact-form-modern button:hover {
    background: -o-linear-gradient(356deg, var(--primary-dark) 76%, var(--primary) 99%);
    background: linear-gradient(94deg, var(--primary-dark) 76%, var(--primary) 99%);
    -webkit-box-shadow: 0 5px 25px rgba(209, 0, 0, 0.12);
            box-shadow: 0 5px 25px rgba(209, 0, 0, 0.12);
    -webkit-transform: translateY(-2px) scale(1.035);
        -ms-transform: translateY(-2px) scale(1.035);
            transform: translateY(-2px) scale(1.035);
    outline: 2px solid var(--primary-light);
}

/* Form Feedback/Success/Error Animation */
.contact-form-feedback {
    font-size: 1.06rem;
    min-height: 1.7em;
    color: var(--primary);
    font-weight: 600;
    -webkit-transition: color 0.22s, opacity 0.28s;
    -o-transition: color 0.22s, opacity 0.28s;
    transition: color 0.22s, opacity 0.28s;
    opacity: 1;
    margin-top: 0.25em;
    will-change: opacity, color;
}

.contact-form-feedback.success {
    color: #0cb368;
    -webkit-animation: successPulse 0.9s cubic-bezier(.3, .72, .38, 1.17);
            animation: successPulse 0.9s cubic-bezier(.3, .72, .38, 1.17);
}

@-webkit-keyframes successPulse {
    0% {
        -webkit-transform: scale(0.97);
                transform: scale(0.97);
    }

    60% {
        -webkit-transform: scale(1.07);
                transform: scale(1.07);
    }

    100% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
}

@keyframes successPulse {
    0% {
        -webkit-transform: scale(0.97);
                transform: scale(0.97);
    }

    60% {
        -webkit-transform: scale(1.07);
                transform: scale(1.07);
    }

    100% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
}

/* Error border */
.contact-form-modern input:invalid:not(:focus):not(:-moz-placeholder-shown), .contact-form-modern textarea:invalid:not(:focus):not(:-moz-placeholder-shown) {
    border: 1.6px solid #ff3131;
    background: #fff4f4;
    color: #b73636;
    animation: inputErrorShake 0.38s cubic-bezier(.1, .74, .37, 1);
}
.contact-form-modern input:invalid:not(:focus):not(:-ms-input-placeholder), .contact-form-modern textarea:invalid:not(:focus):not(:-ms-input-placeholder) {
    border: 1.6px solid #ff3131;
    background: #fff4f4;
    color: #b73636;
    animation: inputErrorShake 0.38s cubic-bezier(.1, .74, .37, 1);
}
.contact-form-modern input:invalid:not(:focus):not(:placeholder-shown),
.contact-form-modern textarea:invalid:not(:focus):not(:placeholder-shown) {
    border: 1.6px solid #ff3131;
    background: #fff4f4;
    color: #b73636;
    -webkit-animation: inputErrorShake 0.38s cubic-bezier(.1, .74, .37, 1);
            animation: inputErrorShake 0.38s cubic-bezier(.1, .74, .37, 1);
}

@-webkit-keyframes inputErrorShake {
    0% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }

    22% {
        -webkit-transform: translateX(-7px);
                transform: translateX(-7px);
    }

    40% {
        -webkit-transform: translateX(5px);
                transform: translateX(5px);
    }

    60% {
        -webkit-transform: translateX(-3px);
                transform: translateX(-3px);
    }

    80% {
        -webkit-transform: translateX(2px);
                transform: translateX(2px);
    }

    100% {
        -webkit-transform: translateX(0px);
                transform: translateX(0px);
    }
}

@keyframes inputErrorShake {
    0% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }

    22% {
        -webkit-transform: translateX(-7px);
                transform: translateX(-7px);
    }

    40% {
        -webkit-transform: translateX(5px);
                transform: translateX(5px);
    }

    60% {
        -webkit-transform: translateX(-3px);
                transform: translateX(-3px);
    }

    80% {
        -webkit-transform: translateX(2px);
                transform: translateX(2px);
    }

    100% {
        -webkit-transform: translateX(0px);
                transform: translateX(0px);
    }
}

.g-recaptcha {
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

/* BB / All Accordion pages */

.blackbelt-main {
    max-width: 1240px;
    margin: 3.5rem auto 0 auto;
    padding: 2rem 1.5rem 4rem 1.5rem;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 36% 3.5rem 1fr;
    grid-template-columns: 36% 1fr;
    gap: 3.5rem;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}

@media (max-width: 950px) {
    .blackbelt-main {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

@media (max-width: 600px) {
    .blackbelt-main {
        padding: 1rem 0.4rem 3rem 0.4rem;
        gap: 2rem;
    }
}

/* =========== LEFT: Accordion ===================== */
.bb-accordion {
    background: rgba(255, 255, 255, 0.66);
    -webkit-box-shadow: 0 8px 32px 0 rgba(31, 41, 55, 0.07), 0 1.5px 8px rgba(209, 0, 0, 0.04);
            box-shadow: 0 8px 32px 0 rgba(31, 41, 55, 0.07), 0 1.5px 8px rgba(209, 0, 0, 0.04);
    border-radius: 1.2rem;
    border: 1.3px solid #f0f2f3;
    padding: 1.4rem 1.2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
    -webkit-backdrop-filter: blur(2.6px) saturate(123%);
            backdrop-filter: blur(2.6px) saturate(123%);
    -webkit-transition: -webkit-box-shadow 0.25s cubic-bezier(.56, -.06, .52, 1.19);
    transition: -webkit-box-shadow 0.25s cubic-bezier(.56, -.06, .52, 1.19);
    -o-transition: box-shadow 0.25s cubic-bezier(.56, -.06, .52, 1.19);
    transition: box-shadow 0.25s cubic-bezier(.56, -.06, .52, 1.19);
    transition: box-shadow 0.25s cubic-bezier(.56, -.06, .52, 1.19), -webkit-box-shadow 0.25s cubic-bezier(.56, -.06, .52, 1.19);
    isolation: isolate;
}

.bb-accordion-block {
    background: rgba(255, 255, 255, 0.93);
    border-radius: 0.92em;
    margin-bottom: 0.22rem;
    -webkit-box-shadow: 0 2px 7px 0 rgba(31, 41, 55, 0.03);
            box-shadow: 0 2px 7px 0 rgba(31, 41, 55, 0.03);
    border: 1.1px solid #edeef2;
    -webkit-transition: border 0.19s, -webkit-box-shadow 0.17s;
    transition: border 0.19s, -webkit-box-shadow 0.17s;
    -o-transition: box-shadow 0.17s, border 0.19s;
    transition: box-shadow 0.17s, border 0.19s;
    transition: box-shadow 0.17s, border 0.19s, -webkit-box-shadow 0.17s;
    overflow: hidden;
}

.bb-accordion-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    font-size: 1.16rem;
    font-weight: 600;
    letter-spacing: 0.012em;
    color: #191b1f;
    background: -o-linear-gradient(356deg, #fff 82%, #ffd1d1 100%);
    background: linear-gradient(94deg, #fff 82%, #ffd1d1 100%);
    border: none;
    padding: 0.94em 0.95em 0.94em 0.88em;
    cursor: pointer;
    -webkit-transition: background 0.2s, color 0.2s;
    -o-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;
    outline: none;
    position: relative;
}

.bb-accordion-btn:focus {
    background: var(--primary-light);
    color: var(--primary);
}

.bb-accordion-btn .arrow {
    margin-left: auto;
    font-size: 1.08em;
    color: var(--primary);
    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transition: -webkit-transform 0.22s cubic-bezier(.57, .19, .37, 1.25);
    transition: -webkit-transform 0.22s cubic-bezier(.57, .19, .37, 1.25);
    -o-transition: transform 0.22s cubic-bezier(.57, .19, .37, 1.25);
    transition: transform 0.22s cubic-bezier(.57, .19, .37, 1.25);
    transition: transform 0.22s cubic-bezier(.57, .19, .37, 1.25), -webkit-transform 0.22s cubic-bezier(.57, .19, .37, 1.25);
}

.bb-accordion-block.open .bb-accordion-btn .arrow {
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
}

.bb-accordion-panel {
    overflow: hidden;
    /* Hidden at zero, reveal with max-height for animation */
    background: -o-linear-gradient(356deg, #fff 83%, #ffeaea 100%);
    background: linear-gradient(94deg, #fff 83%, #ffeaea 100%);
    border-top: 1px solid #f2d6d6;
    color: #30323a;
    font-size: 1.04rem;
    -webkit-transition: max-height 0.43s cubic-bezier(.53, .13, .37, 1.24), -webkit-box-shadow 0.18s;
    transition: max-height 0.43s cubic-bezier(.53, .13, .37, 1.24), -webkit-box-shadow 0.18s;
    -o-transition: max-height 0.43s cubic-bezier(.53, .13, .37, 1.24), box-shadow 0.18s;
    transition: max-height 0.43s cubic-bezier(.53, .13, .37, 1.24), box-shadow 0.18s;
    transition: max-height 0.43s cubic-bezier(.53, .13, .37, 1.24), box-shadow 0.18s, -webkit-box-shadow 0.18s;
    max-height: 0;
    padding: 0 1.22em;
}

.bb-accordion-block.open .bb-accordion-panel {
    padding: 0.77em 1.22em 1.1em 1.22em;
    max-height: 100%;
    -webkit-box-shadow: 0 6px 22px 0 rgba(209, 0, 0, 0.067);
            box-shadow: 0 6px 22px 0 rgba(209, 0, 0, 0.067);
}

/* =========== Dan Label Style =========== */
.bb-accordion-btn .dan-badge {
    display: inline-block;
    min-width: 2.1em;
    text-align: center;
    background: -o-linear-gradient(356deg, #d10000 66%, #a30000 100%);
    background: linear-gradient(94deg, #d10000 66%, #a30000 100%);
    color: #fff;
    border-radius: 0.6em;
    font-size: 0.96em;
    font-weight: 700;
    margin-right: 1.2em;
    letter-spacing: 0.07em;
    padding: 0.32em 0.5em 0.32em 0.6em;
    -webkit-box-shadow: 0 1px 7px rgba(209, 0, 0, .06);
            box-shadow: 0 1px 7px rgba(209, 0, 0, .06);
}

.bb-belt-names-list {
    margin: 0.5em 0 0 0;
    padding: 0;
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0.32em;
}

.bb-belt-names-list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.55em;
    font-size: 1.03em;
    padding: 0.11em 0;
    color: #38393b;
    border-left: 3px solid #d10000;
    padding-left: 0.65em;
    -webkit-transition: color 0.17s;
    -o-transition: color 0.17s;
    transition: color 0.17s;
    background: rgba(255, 255, 255, 0.09);
    border-radius: 0.3em;
}

.bb-belt-names-list li .fa-chess-king {
    color: #b13b16;
    opacity: 0.74;
}

/* =========== RIGHT: Info/Lead Area ============ */
.bb-info-area {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    height: 100%;
}

.bb-feature-img-wrap {
    position: relative;
    width: 100%;
    min-height: 260px;
    border-radius: 1.3rem;
    overflow: hidden;
    background: -o-linear-gradient(338deg, #efdada 24%, #ede7e7 88%);
    background: linear-gradient(112deg, #efdada 24%, #ede7e7 88%);
    -webkit-box-shadow: 0 8px 36px 0 rgba(31, 41, 55, 0.10);
            box-shadow: 0 8px 36px 0 rgba(31, 41, 55, 0.10);
    margin-bottom: 2.1rem;
    aspect-ratio: 5/3;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
}

.bb-feature-img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
    -webkit-filter: brightness(0.98) saturate(1.13) contrast(0.97);
            filter: brightness(0.98) saturate(1.13) contrast(0.97);
    -webkit-transition: -webkit-transform 0.24s cubic-bezier(.55, .10, .34, 1.19);
    transition: -webkit-transform 0.24s cubic-bezier(.55, .10, .34, 1.19);
    -o-transition: transform 0.24s cubic-bezier(.55, .10, .34, 1.19);
    transition: transform 0.24s cubic-bezier(.55, .10, .34, 1.19);
    transition: transform 0.24s cubic-bezier(.55, .10, .34, 1.19), -webkit-transform 0.24s cubic-bezier(.55, .10, .34, 1.19);
    border-radius: 1.3rem;
}

.bb-feature-img-wrap::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    background: -o-radial-gradient(85% 80%, ellipse, rgba(209, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.0) 68%);
    background: radial-gradient(ellipse at 85% 80%, rgba(209, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.0) 68%);
    z-index: 2;
    pointer-events: none;
}

.bb-feature-img-wrap .bb-feature-text-floating {
    position: absolute;
    bottom: 0.6em;
    right: 1.2em;
    background: -o-linear-gradient(356deg, #d10000bb 20%, #ffc2c2b6 94%);
    background: linear-gradient(94deg, #d10000bb 20%, #ffc2c2b6 94%);
    color: #fff;
    font-weight: 600;
    font-size: 1.12rem;
    padding: 0.6em 1.5em 0.6em 1.1em;
    border-radius: 0.60em;
    -webkit-box-shadow: 0 4px 18px rgba(0, 0, 0, 0.17);
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.17);
    letter-spacing: 0.03em;
    z-index: 3;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-backdrop-filter: blur(1.1px);
            backdrop-filter: blur(1.1px);
    pointer-events: none;
    -webkit-animation: float-bb-label 3.2s infinite alternate cubic-bezier(.2, .62, .47, 1.04);
            animation: float-bb-label 3.2s infinite alternate cubic-bezier(.2, .62, .47, 1.04);
}

@-webkit-keyframes float-bb-label {
    0% {
        -webkit-transform: translateY(0px) scale(1);
                transform: translateY(0px) scale(1);
    }

    100% {
        -webkit-transform: translateY(-10px) scale(1.055);
                transform: translateY(-10px) scale(1.055);
    }
}

@keyframes float-bb-label {
    0% {
        -webkit-transform: translateY(0px) scale(1);
                transform: translateY(0px) scale(1);
    }

    100% {
        -webkit-transform: translateY(-10px) scale(1.055);
                transform: translateY(-10px) scale(1.055);
    }
}

.bb-lead-content {
    margin: 0 0 1.9rem 0;
}

.bb-lead-content h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    margin: 0 0 0.45em 0;
    color: #d10000;
    letter-spacing: -0.015em;
}

.bb-lead-content p {
    font-size: 1.12rem;
    color: #23242a;
    margin: 0.5em 0 1.1em 0;
    line-height: 1.48;
}

.bb-lead-content blockquote {
    font-family: 'Inter', 'Poppins', Arial, sans-serif;
    margin: 0 0 1.1rem 0;
    padding: 0.64em 1.2em 0.64em 1.33em;
    border-left: 4px solid #d10000b9;
    background: rgba(255, 209, 209, 0.15);
    color: #5b2222;
    font-size: 1.07em;
    font-style: italic;
    border-radius: 0.5em;
    letter-spacing: 0.016em;
    -webkit-box-shadow: 0 2px 16px rgba(209, 0, 0, .087);
            box-shadow: 0 2px 16px rgba(209, 0, 0, .087);
}

.bb-lead-content blockquote cite {
    display: block;
    margin-top: 0.4em;
    color: #a30000b2;
    font-size: 0.97em;
    font-style: normal;
}

/* Form ========== */
.bb-lead-cta-box {
    background: rgba(255, 255, 255, 0.93);
    -webkit-box-shadow: 0 4px 28px 0 rgba(31, 41, 55, 0.11), 0 1.5px 7px 0 rgba(209, 0, 0, 0.045);
            box-shadow: 0 4px 28px 0 rgba(31, 41, 55, 0.11), 0 1.5px 7px 0 rgba(209, 0, 0, 0.045);
    border-radius: 1em;
    padding: 1.6em 1.4em 1.15em 1.4em;
    border: 1.2px solid #fac6c6;
    margin-top: 0.7em;
    position: relative;
    -webkit-animation: bb-cta-in 0.7s cubic-bezier(.67, .07, .32, 1.11) 0.1s backwards;
            animation: bb-cta-in 0.7s cubic-bezier(.67, .07, .32, 1.11) 0.1s backwards;
}

@-webkit-keyframes bb-cta-in {
    0% {
        opacity: 0;
        -webkit-transform: translateY(22px) scale(.98);
                transform: translateY(22px) scale(.98);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0) scale(1);
                transform: translateY(0) scale(1);
    }
}

@keyframes bb-cta-in {
    0% {
        opacity: 0;
        -webkit-transform: translateY(22px) scale(.98);
                transform: translateY(22px) scale(.98);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0) scale(1);
                transform: translateY(0) scale(1);
    }
}

.bb-lead-cta-title {
    font-size: 1.11rem;
    font-weight: 600;
    color: #d10000c0;
    margin-bottom: 0.58em;
    letter-spacing: 0.01em;
}

.bb-lead-cta-form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0.7em;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 0.5em;
}

.bb-lead-cta-form input[type="email"] {
    padding: 0.61em 0.98em;
    font-size: 1.04rem;
    border: 1.5px solid #eddede;
    border-radius: 2em;
    background: #fff;
    color: #222;
    outline: none;
    -webkit-transition: border 0.22s, -webkit-box-shadow 0.17s;
    transition: border 0.22s, -webkit-box-shadow 0.17s;
    -o-transition: border 0.22s, box-shadow 0.17s;
    transition: border 0.22s, box-shadow 0.17s;
    transition: border 0.22s, box-shadow 0.17s, -webkit-box-shadow 0.17s;
    -webkit-box-shadow: 0 1px 9px rgba(209, 0, 0, 0.04);
            box-shadow: 0 1px 9px rgba(209, 0, 0, 0.04);
    font-family: inherit;
}

.bb-lead-cta-form input[type="email"]:focus {
    border: 1.4px solid #d10000;
    -webkit-box-shadow: 0 4px 18px rgba(209, 0, 0, 0.13);
            box-shadow: 0 4px 18px rgba(209, 0, 0, 0.13);
}

.bb-lead-cta-form button {
    background: -o-linear-gradient(357deg, #d10000 66%, #a30000 99%);
    background: linear-gradient(93deg, #d10000 66%, #a30000 99%);
    color: #fff;
    border: none;
    padding: 0.68em 2.1em;
    border-radius: 2em;
    font-size: 1.09rem;
    font-weight: 700;
    cursor: pointer;
    -webkit-box-shadow: 0 2px 14px rgba(209, 0, 0, 0.08);
            box-shadow: 0 2px 14px rgba(209, 0, 0, 0.08);
    -webkit-transition: background 0.22s, -webkit-box-shadow 0.17s, -webkit-transform 0.11s;
    transition: background 0.22s, -webkit-box-shadow 0.17s, -webkit-transform 0.11s;
    -o-transition: background 0.22s, box-shadow 0.17s, transform 0.11s;
    transition: background 0.22s, box-shadow 0.17s, transform 0.11s;
    transition: background 0.22s, box-shadow 0.17s, transform 0.11s, -webkit-box-shadow 0.17s, -webkit-transform 0.11s;
    outline: none;
    position: relative;
    will-change: transform;
}

.bb-lead-cta-form button:focus,
.bb-lead-cta-form button:hover {
    background: -o-linear-gradient(357deg, #a30000 66%, #d10000 99%);
    background: linear-gradient(93deg, #a30000 66%, #d10000 99%);
    -webkit-box-shadow: 0 5px 28px rgba(209, 0, 0, 0.12);
            box-shadow: 0 5px 28px rgba(209, 0, 0, 0.12);
    -webkit-transform: scale(1.048);
        -ms-transform: scale(1.048);
            transform: scale(1.048);
}

.bb-lead-cta-form-button {
    background: -o-linear-gradient(357deg, #d10000 66%, #a30000 99%);
    background: linear-gradient(93deg, #d10000 66%, #a30000 99%);
    display: inline-block;
    color: #fff;
    border: none;
    padding: 0.68em 2.1em;
    border-radius: 2em;
    font-size: 1.09rem;
    font-weight: 700;
    cursor: pointer;
    -webkit-box-shadow: 0 2px 14px rgba(209, 0, 0, 0.08);
            box-shadow: 0 2px 14px rgba(209, 0, 0, 0.08);
    -webkit-transition: background 0.22s, -webkit-box-shadow 0.17s, -webkit-transform 0.11s;
    transition: background 0.22s, -webkit-box-shadow 0.17s, -webkit-transform 0.11s;
    -o-transition: background 0.22s, box-shadow 0.17s, transform 0.11s;
    transition: background 0.22s, box-shadow 0.17s, transform 0.11s;
    transition: background 0.22s, box-shadow 0.17s, transform 0.11s, -webkit-box-shadow 0.17s, -webkit-transform 0.11s;
    outline: none;
    position: relative;
    will-change: transform;
}

.bb-lead-cta-form-button:hover {
    background-color: #b91c1c;
}

.bb-lead-cta-feedback {
    font-size: 1.02rem;
    color: #d10000;
    opacity: 1;
    min-height: 1.6em;
    -webkit-transition: opacity 0.35s;
    -o-transition: opacity 0.35s;
    transition: opacity 0.35s;
    margin-top: 0.25em;
    font-weight: 500;
    letter-spacing: 0.024em;
}

.bb-lead-cta-feedback.success {
    color: #11ad6c;
}

/* =========== Scroll Animation ========== */
.fade-scroll {
    opacity: 0;
    -webkit-transform: translateY(25px) scale(.98);
        -ms-transform: translateY(25px) scale(.98);
            transform: translateY(25px) scale(.98);
    -webkit-transition: opacity 0.7s cubic-bezier(.61, .09, .41, 1.02), -webkit-transform 0.72s cubic-bezier(.58, .04, .34, 1.11);
    transition: opacity 0.7s cubic-bezier(.61, .09, .41, 1.02), -webkit-transform 0.72s cubic-bezier(.58, .04, .34, 1.11);
    -o-transition: opacity 0.7s cubic-bezier(.61, .09, .41, 1.02), transform 0.72s cubic-bezier(.58, .04, .34, 1.11);
    transition: opacity 0.7s cubic-bezier(.61, .09, .41, 1.02), transform 0.72s cubic-bezier(.58, .04, .34, 1.11);
    transition: opacity 0.7s cubic-bezier(.61, .09, .41, 1.02), transform 0.72s cubic-bezier(.58, .04, .34, 1.11), -webkit-transform 0.72s cubic-bezier(.58, .04, .34, 1.11);
    will-change: opacity, transform;
}

.fade-scroll.visible {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
        -ms-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
}

/* Grading Examiners Page */
.modern-background-geom {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
}

.modern-background-geom svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    -webkit-filter: blur(20px) brightness(1.05) opacity(.16);
            filter: blur(20px) brightness(1.05) opacity(.16);
}

.grading-examiners-wrapper {
    max-width: 900px;
    margin: 3.7rem auto 2.2rem auto;
    padding: 0 1rem;
}

.grading-examiners-section {
    background: var(--card-bg, #fff);
    border-radius: var(--card-radius, 1.3rem);
    -webkit-box-shadow: var(--card-shadow), 0 2.5px 12px rgba(209, 0, 0, 0.039);
            box-shadow: var(--card-shadow), 0 2.5px 12px rgba(209, 0, 0, 0.039);
    border: var(--card-border, 1.3px solid #f0f2f3);
    padding: 2.6rem 2.1rem 2.2rem 2.1rem;
    color: var(--dark);
    position: relative;
    font-family: 'Poppins', Arial, sans-serif;
    min-width: 0;
    -webkit-animation: course-section-in 0.7s cubic-bezier(.51, 0, .36, 1.12) 0.05s backwards;
            animation: course-section-in 0.7s cubic-bezier(.51, 0, .36, 1.12) 0.05s backwards;
    background-image: -o-linear-gradient(310deg, #fff5f8 25%, transparent 60%);
    background-image: linear-gradient(140deg, #fff5f8 25%, transparent 60%);
}

@-webkit-keyframes course-section-in {
    from {
        opacity: 0;
        -webkit-transform: translateY(38px) scale(.98);
                transform: translateY(38px) scale(.98);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
    }
}

@keyframes course-section-in {
    from {
        opacity: 0;
        -webkit-transform: translateY(38px) scale(.98);
                transform: translateY(38px) scale(.98);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
    }
}

.grading-examiners-section h1 {
    font-size: clamp(2.1rem, 4vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.027em;
    color: var(--primary, #d10000);
    margin-top: 0.03em;
    margin-bottom: 1.1em;
    text-align: left;
    line-height: 1.12;
    background: -webkit-gradient(linear, left top, right top, from(var(--primary)), color-stop(70%, #c91e1e));
    background: -o-linear-gradient(left, var(--primary), #c91e1e 70%);
    background: linear-gradient(90deg, var(--primary), #c91e1e 70%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 14px rgba(209, 0, 0, 0.07);
    position: relative;
    z-index: 1;
}

.grading-examiners-section h5 {
    font-size: 1.19rem;
    color: var(--primary-dark, #a30000);
    font-weight: 700;
    letter-spacing: 0.013em;
    margin-bottom: 0.68em;
    margin-top: 0.08em;
}

.grading-examiners-section p,
.grading-examiners-section li {
    font-size: 1.09rem;
    color: var(--excerpt, #384165);
    line-height: 1.6;
    margin-bottom: 1.07em;
    font-weight: 400;
}

.grading-examiners-section p strong,
.grading-examiners-section li strong {
    color: var(--primary, #d10000);
    font-weight: 600;
}

.grading-examiners-section ul {
    margin-left: 2em;
    margin-bottom: 1em;
    padding-left: 0.4em;
}

.grading-examiners-section a {
    color: var(--primary, #d10000);
    text-decoration: underline;
    font-weight: 500;
    -webkit-transition: color 0.16s;
    -o-transition: color 0.16s;
    transition: color 0.16s;
}

.grading-examiners-section a:hover,
.grading-examiners-section a:focus {
    color: var(--primary-dark, #a30000);
    -webkit-text-decoration: underline wavy var(--primary-dark, #a30000) 1.5px;
            text-decoration: underline wavy var(--primary-dark, #a30000) 1.5px;
}

/* Share choose-date-section style */
.choose-date-section {
    margin-top: 1.8em;
    background: -o-linear-gradient(346deg, #fff7f7 75%, #ffe8e8 100%);
    background: linear-gradient(104deg, #fff7f7 75%, #ffe8e8 100%);
    border-radius: 1.02em;
    padding: 2.2em 1em 2.3em 1em;
    text-align: center;
    -webkit-box-shadow: 0 2.5px 22px 0 rgba(209, 0, 0, 0.07);
            box-shadow: 0 2.5px 22px 0 rgba(209, 0, 0, 0.07);
    position: relative;
    -webkit-animation: fadein-up 0.7s cubic-bezier(.51, 0, .36, 1.13) 0.2s backwards;
            animation: fadein-up 0.7s cubic-bezier(.51, 0, .36, 1.13) 0.2s backwards;
    overflow: visible;
}

.choose-date-section h2 {
    font-size: 1.36rem;
    font-weight: 700;
    color: var(--primary, #d10000);
    margin-bottom: 1.5em;
    letter-spacing: 0.01em;
}

.choose-date-section img {
    width: 100%;
    max-width: 530px;
    border-radius: 0.38em;
    -webkit-box-shadow: 0 16px 40px 0 rgba(31, 41, 55, 0.13), 0 1.5px 8px rgba(209, 0, 0, 0.03);
            box-shadow: 0 16px 40px 0 rgba(31, 41, 55, 0.13), 0 1.5px 8px rgba(209, 0, 0, 0.03);
    margin: 0em auto 0.7em auto;
    display: block;
    border: 1.5px solid #fdecec;
    opacity: 0.97;
}

@-webkit-keyframes fadein-up {
    from {
        opacity: 0;
        -webkit-transform: translateY(34px) scale(.983);
                transform: translateY(34px) scale(.983);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
    }
}

@keyframes fadein-up {
    from {
        opacity: 0;
        -webkit-transform: translateY(34px) scale(.983);
                transform: translateY(34px) scale(.983);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
    }
}

/* Instructor course */
.instructor-course-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 2.5rem;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    max-width: 1120px;
    margin: 3.7rem auto 2.2rem auto;
    padding: 0 1rem;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.instructor-course-section {
    -webkit-box-flex: 2;
        -ms-flex: 2 1 510px;
            flex: 2 1 510px;
    background: var(--card-bg);
    border-radius: var(--card-radius, 1.3rem);
    -webkit-box-shadow: var(--card-shadow), 0 2.5px 12px rgba(209, 0, 0, 0.039);
            box-shadow: var(--card-shadow), 0 2.5px 12px rgba(209, 0, 0, 0.039);
    border: var(--card-border);
    padding: 2.6rem 2.1rem 2.2rem 2.1rem;
    color: var(--dark);
    position: relative;
    font-family: 'Poppins', Arial, sans-serif;
    min-width: 0;
    -webkit-animation: course-section-in 0.7s cubic-bezier(.51, 0, .36, 1.12) 0.05s backwards;
            animation: course-section-in 0.7s cubic-bezier(.51, 0, .36, 1.12) 0.05s backwards;
    background-image: -o-linear-gradient(310deg, #fff5f8 25%, transparent 60%);
    background-image: linear-gradient(140deg, #fff5f8 25%, transparent 60%);
}

@keyframes course-section-in {
    from {
        opacity: 0;
        -webkit-transform: translateY(38px) scale(.98);
                transform: translateY(38px) scale(.98);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
    }
}

.highlight-badge {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 0.98rem;
    background: -o-linear-gradient(358deg, var(--primary-light) 60%, #fff6f6 100%);
    background: linear-gradient(92deg, var(--primary-light) 60%, #fff6f6 100%);
    color: var(--primary-dark, #a30000);
    padding: 0.32em 1.08em 0.32em 0.99em;
    border-radius: 2em;
    margin-bottom: 1.3em;
    font-weight: 600;
    -webkit-box-shadow: 0 2px 12px 0 rgba(209, 0, 0, 0.05);
            box-shadow: 0 2px 12px 0 rgba(209, 0, 0, 0.05);
    letter-spacing: 0.01em;
    gap: 0.54em;
    border: 1.2px solid var(--primary-light);
}

.instructor-course-section h1 {
    font-size: clamp(2.49rem, 4vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.027em;
    color: var(--primary, #d10000);
    margin-top: 0.03em;
    margin-bottom: 1.1em;
    text-align: left;
    line-height: 1.12;
    background: -o-linear-gradient(3deg, var(--primary), #c91e1e 73%, #520705 100%);
    background: linear-gradient(87deg, var(--primary), #c91e1e 73%, #520705 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 18px rgba(209, 0, 0, 0.07);
    position: relative;
    z-index: 1;
}

.course-intro {
    margin-bottom: 2.4em;
    -webkit-animation: fadein-up 0.7s cubic-bezier(.51, 0, .36, 1.13) 0.17s backwards;
            animation: fadein-up 0.7s cubic-bezier(.51, 0, .36, 1.13) 0.17s backwards;
}

.course-intro h5 {
    font-size: 1.19rem;
    color: var(--primary-dark, #a30000);
    font-weight: 700;
    letter-spacing: 0.013em;
    margin-bottom: 0.68em;
    margin-top: 0.08em;
}

.course-intro p,
.course-intro li {
    font-size: 1.09rem;
    color: var(--excerpt, #384165);
    line-height: 1.59;
    margin-bottom: 1.07em;
    font-weight: 400;
    letter-spacing: 0.001em;
}

.course-intro p strong,
.course-intro li strong {
    color: var(--primary, #d10000);
    font-weight: 600;
}

.course-intro ol {
    margin-left: 2em;
    margin-bottom: 1em;
    padding-left: 0.4em;
}

.course-intro a {
    color: var(--primary, #d10000);
    text-decoration: underline;
    font-weight: 500;
    -webkit-transition: color 0.16s;
    -o-transition: color 0.16s;
    transition: color 0.16s;
}

.course-intro a:hover,
.course-intro a:focus {
    color: var(--primary-dark, #a30000);
    -webkit-text-decoration: underline wavy var(--primary-dark, #a30000) 1.5px;
            text-decoration: underline wavy var(--primary-dark, #a30000) 1.5px;
}

.choose-date-section {
    margin-top: 1.8em;
    background: -o-linear-gradient(346deg, #fff7f7 75%, #ffe8e8 100%);
    background: linear-gradient(104deg, #fff7f7 75%, #ffe8e8 100%);
    border-radius: 1.02em;
    padding: 2.2em 1em 2.3em 1em;
    text-align: center;
    -webkit-box-shadow: 0 2.5px 22px 0 rgba(209, 0, 0, 0.07);
            box-shadow: 0 2.5px 22px 0 rgba(209, 0, 0, 0.07);
    position: relative;
    -webkit-animation: fadein-up 0.7s cubic-bezier(.51, 0, .36, 1.13) 0.29s backwards;
            animation: fadein-up 0.7s cubic-bezier(.51, 0, .36, 1.13) 0.29s backwards;
    overflow: visible;
}

@keyframes fadein-up {
    from {
        opacity: 0;
        -webkit-transform: translateY(34px) scale(.983);
                transform: translateY(34px) scale(.983);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
    }
}

.choose-date-section h2 {
    font-size: 1.54rem;
    font-weight: 700;
    color: var(--primary, #d10000);
    margin-bottom: 1.3em;
    letter-spacing: 0.01em;
}

/* Custom Event Card for Date Section */
.course-dates-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 1.34rem 1.7rem;
    margin-bottom: 2.3em;
    margin-top: 1.3em;
}

.course-date-card {
    background: #fff;
    border-radius: 1.05em;
    -webkit-box-shadow: 0 4px 22px 0 rgba(209, 0, 0, 0.09), 0 1.5px 8px rgba(209, 0, 0, 0.039);
            box-shadow: 0 4px 22px 0 rgba(209, 0, 0, 0.09), 0 1.5px 8px rgba(209, 0, 0, 0.039);
    border: 1.2px solid #ffe3e3;
    -webkit-transition: -webkit-transform 0.16s, -webkit-box-shadow 0.22s;
    transition: -webkit-transform 0.16s, -webkit-box-shadow 0.22s;
    -o-transition: transform 0.16s, box-shadow 0.22s;
    transition: transform 0.16s, box-shadow 0.22s;
    transition: transform 0.16s, box-shadow 0.22s, -webkit-transform 0.16s, -webkit-box-shadow 0.22s;
    padding: 1.07em 1.42em;
    min-width: 190px;
    max-width: 260px;
    -webkit-box-flex: 1;
        -ms-flex: 1 0 170px;
            flex: 1 0 170px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: relative;
    cursor: pointer;
    font-size: 1.03rem;
    outline: none;
    margin-bottom: 0.7em;
}

.course-date-card:hover,
.course-date-card:focus {
    -webkit-transform: translateY(-2px) scale(1.035);
        -ms-transform: translateY(-2px) scale(1.035);
            transform: translateY(-2px) scale(1.035);
    -webkit-box-shadow: 0 8px 34px 0 rgba(209, 0, 0, 0.13), 0 1.5px 8px rgba(209, 0, 0, 0.045);
            box-shadow: 0 8px 34px 0 rgba(209, 0, 0, 0.13), 0 1.5px 8px rgba(209, 0, 0, 0.045);
    border: 1.2px solid var(--primary-light);
}

.course-date-card strong {
    display: block;
    color: var(--primary-dark, #a30000);
    font-size: 1.01em;
    font-weight: 700;
    margin-bottom: 0.08em;
    letter-spacing: 0.01em;
}

.course-date-card .event-location {
    color: #737080;
    font-size: 0.98em;
    margin-bottom: 0.1em;
    margin-top: 0.08em;
}

.course-date-card .event-status {
    display: inline-block;
    background: var(--primary-light);
    color: var(--primary-dark, #a30000);
    font-weight: 600;
    border-radius: 1.2em;
    padding: 0.13em 1em 0.13em 1em;
    font-size: 0.85em;
    margin-top: 0.23em;
    margin-bottom: 0;
    letter-spacing: 0.02em;
    position: relative;
}

.choose-date-section .enrol-cta-btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: -o-linear-gradient(358deg, var(--primary) 70%, var(--primary-dark) 100%);
    background: linear-gradient(92deg, var(--primary) 70%, var(--primary-dark) 100%);
    color: #fff;
    border: none;
    border-radius: 2em;
    font-size: 1.17rem;
    font-weight: 700;
    padding: 0.79em 2.19em;
    -webkit-box-shadow: 0 5px 24px 0 rgba(209, 0, 0, 0.14);
            box-shadow: 0 5px 24px 0 rgba(209, 0, 0, 0.14);
    margin-top: 1.7em;
    margin-bottom: 0.2em;
    gap: 0.5em;
    cursor: pointer;
    text-decoration: none;
    -webkit-transition: background 0.18s, -webkit-box-shadow 0.19s, -webkit-transform 0.15s;
    transition: background 0.18s, -webkit-box-shadow 0.19s, -webkit-transform 0.15s;
    -o-transition: background 0.18s, box-shadow 0.19s, transform 0.15s;
    transition: background 0.18s, box-shadow 0.19s, transform 0.15s;
    transition: background 0.18s, box-shadow 0.19s, transform 0.15s, -webkit-box-shadow 0.19s, -webkit-transform 0.15s;
    outline: none;
}

.choose-date-section .enrol-cta-btn:hover,
.choose-date-section .enrol-cta-btn:focus {
    background: var(--primary-dark);
    -webkit-box-shadow: 0 6px 30px 0 rgba(209, 0, 0, 0.22);
            box-shadow: 0 6px 30px 0 rgba(209, 0, 0, 0.22);
    -webkit-transform: translateY(-2px) scale(1.03);
        -ms-transform: translateY(-2px) scale(1.03);
            transform: translateY(-2px) scale(1.03);
    outline: 2px solid var(--primary-light);
}

.choose-date-section img {
    width: 100%;
    max-width: 420px;
    border-radius: 0.38em;
    -webkit-box-shadow: 0 16px 40px 0 rgba(31, 41, 55, 0.13), 0 1.5px 8px rgba(209, 0, 0, 0.03);
            box-shadow: 0 16px 40px 0 rgba(31, 41, 55, 0.13), 0 1.5px 8px rgba(209, 0, 0, 0.03);
    margin: 2em auto 0.7em auto;
    display: block;
    border: 1.5px solid #fdecec;
    opacity: 0.96;
}

/* After, sidebar instructor highlight */
.sidebar-instructor-highlight {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 270px;
            flex: 1 1 270px;
    min-width: 235px;
    max-width: 340px;
    background: -o-linear-gradient(341deg, #fff7f7 80%, #ffe9e4 100%);
    background: linear-gradient(109deg, #fff7f7 80%, #ffe9e4 100%);
    border-radius: 1.12em;
    -webkit-box-shadow: 0 4px 32px 0 rgba(209, 0, 0, 0.07);
            box-shadow: 0 4px 32px 0 rgba(209, 0, 0, 0.07);
    border: 1.2px solid #ffd3d3;
    padding: 2.2em 1.5em 2em 1.5em;
    margin-left: auto;
    margin-top: 0.7em;
    font-family: 'Poppins', Arial, sans-serif;
    color: var(--dark);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-animation: fadein-up 0.7s cubic-bezier(.51, 0, .36, 1.13) 0.32s backwards;
            animation: fadein-up 0.7s cubic-bezier(.51, 0, .36, 1.13) 0.32s backwards;
}

.sidebar-instructor-highlight .instructor-img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
    -webkit-box-shadow: 0 2px 18px 0 rgba(209, 0, 0, 0.09);
            box-shadow: 0 2px 18px 0 rgba(209, 0, 0, 0.09);
    border: 3px solid var(--primary-light);
}

.sidebar-instructor-highlight h3 {
    font-size: 1.22rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin: 1.12em 0 0.12em 0;
}

.sidebar-instructor-highlight .cred-badge {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
    font-size: 0.93rem;
    border-radius: 1.1em;
    padding: 0.17em 0.95em;
    margin-bottom: 1em;
    margin-top: 0.04em;
    display: inline-block;
    letter-spacing: 0.016em;
}

.sidebar-instructor-highlight p {
    font-size: 0.99rem;
    color: #604c4a;
    line-height: 1.54;
    text-align: center;
    margin-bottom: 0.6em;
    margin-top: 0.4em;
}

.sidebar-instructor-highlight .quote {
    font-style: italic;
    color: var(--primary);
    padding-left: 0.3em;
    padding-right: 0.3em;
    position: relative;
    font-size: 1.01rem;
    margin-bottom: 0.38em;
}

.sidebar-instructor-highlight .quote i {
    color: var(--primary-dark);
    margin-right: 0.18em;
}

.sidebar-instructor-highlight .trusted {
    color: #a6a6b5;
    font-size: 0.91em;
    margin-top: 0.4em;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-bottom: 0.27em;
}


/* Info box style for 'How to tell your grading is official' */
.grading-official-info {
    margin: 2.5rem 0 0 0;
    background: -o-linear-gradient(358deg, #fff 80%, #ffd9d9 100%);
    background: linear-gradient(92deg, #fff 80%, #ffd9d9 100%);
    border: 1.3px solid #f3dbdb;
    border-left: 4px solid #d10000d1;
    border-radius: 0.88em;
    -webkit-box-shadow: 0 4px 18px 0 rgba(31, 41, 55, 0.07);
            box-shadow: 0 4px 18px 0 rgba(31, 41, 55, 0.07);
    padding: 2.2em 1.2em;
    position: relative;
    font-size: 1.13rem;
}

.grading-official-info h2 {
    font-size: 1.32rem;
    color: #d10000;
    font-weight: 700;
    margin: 0 0 0.5em 0;
}

.grading-official-info ul {
    margin: 1em 0 0.2em 0;
    padding-left: 1.1em;
}

.grading-official-info li {
    padding-bottom: 0.7em;
    position: relative;
}

.grading-official-info li::before {
    content: '\f058';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #d10000;
    margin-right: 0.65em;
    font-size: 1em;
    position: relative;
    top: 1px;
}

.grading-official-cert-img {
    width: 320px;
    display: block;
    margin: 1.6em auto 0.5em auto;
    max-width: 96vw;
    border-radius: 0.4em;
    -webkit-box-shadow: 0 6px 28px 0 rgba(209, 0, 0, 0.10);
            box-shadow: 0 6px 28px 0 rgba(209, 0, 0, 0.10);
    border: 1.4px solid #f9c6c6;
    background: #faf7f7;
}

/* WKA History page  */

.history-accordion {
    background: rgba(255, 255, 255, 0.66);
    -webkit-box-shadow: 0 8px 32px 0 rgba(31, 41, 55, 0.07), 0 1.5px 8px rgba(209, 0, 0, 0.04);
            box-shadow: 0 8px 32px 0 rgba(31, 41, 55, 0.07), 0 1.5px 8px rgba(209, 0, 0, 0.04);
    border-radius: 1.2rem;
    border: 1.3px solid #f0f2f3;
    padding: 1.4rem 1.2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
    -webkit-backdrop-filter: blur(2.6px) saturate(123%);
            backdrop-filter: blur(2.6px) saturate(123%);
}

.history-accordion-block {
    background: rgba(255, 255, 255, 0.93);
    border-radius: 0.92em;
    margin-bottom: 0.22rem;
    -webkit-box-shadow: 0 2px 7px 0 rgba(31, 41, 55, 0.03);
            box-shadow: 0 2px 7px 0 rgba(31, 41, 55, 0.03);
    border: 1.1px solid #edeef2;
    -webkit-transition: border 0.19s, -webkit-box-shadow 0.17s;
    transition: border 0.19s, -webkit-box-shadow 0.17s;
    -o-transition: box-shadow 0.17s, border 0.19s;
    transition: box-shadow 0.17s, border 0.19s;
    transition: box-shadow 0.17s, border 0.19s, -webkit-box-shadow 0.17s;
    overflow: hidden;
}

.history-accordion-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.012em;
    color: #191b1f;
    background: -o-linear-gradient(356deg, #fff 82%, #ffd1d1 100%);
    background: linear-gradient(94deg, #fff 82%, #ffd1d1 100%);
    border: none;
    padding: 0.94em 0.95em 0.94em 0.88em;
    cursor: pointer;
    -webkit-transition: background 0.2s, color 0.2s;
    -o-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;
    outline: none;
    position: relative;
}

.history-accordion-btn:focus {
    background: var(--primary-light);
    color: var(--primary);
}

.history-accordion-btn .arrow {
    margin-left: auto;
    font-size: 1.12em;
    color: var(--primary);
    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transition: -webkit-transform 0.22s cubic-bezier(.57, .19, .37, 1.25);
    transition: -webkit-transform 0.22s cubic-bezier(.57, .19, .37, 1.25);
    -o-transition: transform 0.22s cubic-bezier(.57, .19, .37, 1.25);
    transition: transform 0.22s cubic-bezier(.57, .19, .37, 1.25);
    transition: transform 0.22s cubic-bezier(.57, .19, .37, 1.25), -webkit-transform 0.22s cubic-bezier(.57, .19, .37, 1.25);
}

.history-accordion-block.open .history-accordion-btn .arrow {
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
}

.history-accordion-panel {
    overflow: hidden;
    background: -o-linear-gradient(356deg, #fff 83%, #ffeaea 100%);
    background: linear-gradient(94deg, #fff 83%, #ffeaea 100%);
    border-top: 1px solid #f2d6d6;
    color: #30323a;
    font-size: 1.05rem;
    -webkit-transition: max-height 0.43s cubic-bezier(.53, .13, .37, 1.24), -webkit-box-shadow 0.18s;
    transition: max-height 0.43s cubic-bezier(.53, .13, .37, 1.24), -webkit-box-shadow 0.18s;
    -o-transition: max-height 0.43s cubic-bezier(.53, .13, .37, 1.24), box-shadow 0.18s;
    transition: max-height 0.43s cubic-bezier(.53, .13, .37, 1.24), box-shadow 0.18s;
    transition: max-height 0.43s cubic-bezier(.53, .13, .37, 1.24), box-shadow 0.18s, -webkit-box-shadow 0.18s;
    max-height: 0;
    padding: 0 1.22em;
}

.history-accordion-block.open .history-accordion-panel {
    padding: 0.77em 1.22em 1.1em 1.22em;
    max-height: 100%;
    -webkit-box-shadow: 0 6px 22px 0 rgba(209, 0, 0, 0.067);
            box-shadow: 0 6px 22px 0 rgba(209, 0, 0, 0.067);
}

/* Rules page */
.rules-main {
    max-width: 1240px;
    margin: 3.5rem auto 0 auto;
    padding: 2rem 1.5rem 4rem 1.5rem;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 36% 3.5rem 1fr;
    grid-template-columns: 36% 1fr;
    gap: 3.5rem;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}

@media (max-width: 950px) {
    .rules-main {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

@media (max-width: 600px) {
    .rules-main {
        padding: 1rem 0.4rem 3rem 0.4rem;
        gap: 2rem;
    }
}

/* Accordion Custom (matches your style) */
.rules-accordion {
    background: rgba(255, 255, 255, 0.66);
    -webkit-box-shadow: 0 8px 32px 0 rgba(31, 41, 55, 0.07), 0 1.5px 8px rgba(209, 0, 0, 0.04);
            box-shadow: 0 8px 32px 0 rgba(31, 41, 55, 0.07), 0 1.5px 8px rgba(209, 0, 0, 0.04);
    border-radius: 1.2rem;
    border: 1.3px solid #f0f2f3;
    padding: 1.4rem 1.2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
    -webkit-backdrop-filter: blur(2.6px) saturate(123%);
            backdrop-filter: blur(2.6px) saturate(123%);
    -webkit-transition: -webkit-box-shadow 0.25s cubic-bezier(.56, -.06, .52, 1.19);
    transition: -webkit-box-shadow 0.25s cubic-bezier(.56, -.06, .52, 1.19);
    -o-transition: box-shadow 0.25s cubic-bezier(.56, -.06, .52, 1.19);
    transition: box-shadow 0.25s cubic-bezier(.56, -.06, .52, 1.19);
    transition: box-shadow 0.25s cubic-bezier(.56, -.06, .52, 1.19), -webkit-box-shadow 0.25s cubic-bezier(.56, -.06, .52, 1.19);
    isolation: isolate;
}

.rules-accordion h1 {
    font-size: 1.54rem;
    color: #d10000;
    font-weight: 700;
    margin: .06em 0 .72em .13em;
    letter-spacing: -0.012em;
}

.rules-acc-block {
    background: rgba(255, 255, 255, 0.93);
    border-radius: 0.92em;
    margin-bottom: 0.22rem;
    -webkit-box-shadow: 0 2px 7px 0 rgba(31, 41, 55, 0.03);
            box-shadow: 0 2px 7px 0 rgba(31, 41, 55, 0.03);
    border: 1.1px solid #edeef2;
    -webkit-transition: border 0.19s, -webkit-box-shadow 0.17s;
    transition: border 0.19s, -webkit-box-shadow 0.17s;
    -o-transition: box-shadow 0.17s, border 0.19s;
    transition: box-shadow 0.17s, border 0.19s;
    transition: box-shadow 0.17s, border 0.19s, -webkit-box-shadow 0.17s;
    overflow: hidden;
}

.rules-acc-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.79em;
    width: 100%;
    font-size: 1.16rem;
    font-weight: 600;
    letter-spacing: 0.012em;
    color: #191b1f;
    background: -o-linear-gradient(356deg, #fff 82%, #ffd1d1 100%);
    background: linear-gradient(94deg, #fff 82%, #ffd1d1 100%);
    border: none;
    padding: 0.94em 0.95em 0.94em 0.88em;
    cursor: pointer;
    -webkit-transition: background 0.2s, color 0.2s;
    -o-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;
    outline: none;
    position: relative;
}

.rules-acc-btn:focus {
    background: var(--primary-light, #fff5f5);
    color: var(--primary, #d10000);
}

.rules-acc-btn .arrow {
    margin-left: auto;
    font-size: 1.1em;
    color: #d10000;
    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transition: -webkit-transform 0.22s cubic-bezier(.57, .19, .37, 1.25);
    transition: -webkit-transform 0.22s cubic-bezier(.57, .19, .37, 1.25);
    -o-transition: transform 0.22s cubic-bezier(.57, .19, .37, 1.25);
    transition: transform 0.22s cubic-bezier(.57, .19, .37, 1.25);
    transition: transform 0.22s cubic-bezier(.57, .19, .37, 1.25), -webkit-transform 0.22s cubic-bezier(.57, .19, .37, 1.25);
}

.rules-acc-block.open .rules-acc-btn .arrow {
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
}

.rules-acc-panel {
    overflow: hidden;
    background: -o-linear-gradient(356deg, #fff 83%, #ffeaea 100%);
    background: linear-gradient(94deg, #fff 83%, #ffeaea 100%);
    border-top: 1px solid #f2d6d6;
    color: #30323a;
    font-size: 1.09rem;
    -webkit-transition: max-height 0.43s cubic-bezier(.53, .13, .37, 1.24), -webkit-box-shadow 0.18s;
    transition: max-height 0.43s cubic-bezier(.53, .13, .37, 1.24), -webkit-box-shadow 0.18s;
    -o-transition: max-height 0.43s cubic-bezier(.53, .13, .37, 1.24), box-shadow 0.18s;
    transition: max-height 0.43s cubic-bezier(.53, .13, .37, 1.24), box-shadow 0.18s;
    transition: max-height 0.43s cubic-bezier(.53, .13, .37, 1.24), box-shadow 0.18s, -webkit-box-shadow 0.18s;
    max-height: 0;
    padding: 0 1.22em;
}

.rules-acc-block.open .rules-acc-panel {
    padding: 0.93em 1.22em 1.2em 1.22em;
    max-height: 350px;
    -webkit-box-shadow: 0 6px 22px 0 rgba(209, 0, 0, 0.067);
            box-shadow: 0 6px 22px 0 rgba(209, 0, 0, 0.067);
}

/* Panel content style */
.rules-acc-panel a {
    color: #d10000;
    text-decoration: underline;
    font-weight: 600;
    font-size: 1.07em;
    word-break: break-all;
}

.rules-acc-panel a:hover {
    color: #a30000;
    -webkit-text-decoration: underline wavy;
            text-decoration: underline wavy;
}

/* Add rulebook PDF icon */
.rules-acc-panel .fa-file-pdf {
    color: #d10000;
    margin-right: 0.5em;
    font-size: 1.2em;
}

/* Right Info Area */
.rules-info-area {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    height: 100%;
}

.rules-feature-img-wrap {
    position: relative;
    width: 100%;
    min-height: 260px;
    border-radius: 1.3rem;
    overflow: hidden;
    background: -o-linear-gradient(338deg, #efdada 24%, #ede7e7 88%);
    background: linear-gradient(112deg, #efdada 24%, #ede7e7 88%);
    -webkit-box-shadow: 0 8px 36px 0 rgba(31, 41, 55, 0.10);
            box-shadow: 0 8px 36px 0 rgba(31, 41, 55, 0.10);
    margin-bottom: 2.1rem;
    aspect-ratio: 4/2.7;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

.rules-feature-img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
    -webkit-filter: brightness(0.98) saturate(1.13) contrast(0.97);
            filter: brightness(0.98) saturate(1.13) contrast(0.97);
    -webkit-transition: -webkit-transform 0.24s cubic-bezier(.55, .10, .34, 1.19);
    transition: -webkit-transform 0.24s cubic-bezier(.55, .10, .34, 1.19);
    -o-transition: transform 0.24s cubic-bezier(.55, .10, .34, 1.19);
    transition: transform 0.24s cubic-bezier(.55, .10, .34, 1.19);
    transition: transform 0.24s cubic-bezier(.55, .10, .34, 1.19), -webkit-transform 0.24s cubic-bezier(.55, .10, .34, 1.19);
    border-radius: 1.3rem;
}

.rules-feature-img-wrap::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    background: -o-radial-gradient(82% 87%, ellipse, rgba(209, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.0) 68%);
    background: radial-gradient(ellipse at 82% 87%, rgba(209, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.0) 68%);
    z-index: 2;
    pointer-events: none;
}

.rules-feature-img-wrap .rules-feature-text-floating {
    position: absolute;
    bottom: 0.74em;
    right: 1.3em;
    background: -o-linear-gradient(356deg, #d10000bb 20%, #ffc2c2b6 94%);
    background: linear-gradient(94deg, #d10000bb 20%, #ffc2c2b6 94%);
    color: #fff;
    font-weight: 600;
    font-size: 1.12rem;
    padding: 0.63em 1.45em 0.6em 1.15em;
    border-radius: 0.65em;
    -webkit-box-shadow: 0 4px 18px rgba(0, 0, 0, 0.17);
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.17);
    letter-spacing: 0.03em;
    z-index: 3;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-backdrop-filter: blur(1.1px);
            backdrop-filter: blur(1.1px);
    pointer-events: none;
    -webkit-animation: float-bb-label 3.2s infinite alternate cubic-bezier(.2, .62, .47, 1.04);
            animation: float-bb-label 3.2s infinite alternate cubic-bezier(.2, .62, .47, 1.04);
}

@keyframes float-bb-label {
    0% {
        -webkit-transform: translateY(0px) scale(1);
                transform: translateY(0px) scale(1);
    }

    100% {
        -webkit-transform: translateY(-10px) scale(1.055);
                transform: translateY(-10px) scale(1.055);
    }
}

.rules-lead-content {
    margin: 0 0 1.7rem 0;
}

.rules-lead-content h2 {
    font-size: clamp(1.6rem, 3vw, 2.18rem);
    font-weight: 700;
    margin: 0 0 0.40em 0;
    color: #d10000;
    letter-spacing: -0.013em;
}

.rules-lead-content p {
    font-size: 1.14rem;
    color: #23242a;
    margin: 0.5em 0 1.12em 0;
    line-height: 1.5;
}

.rules-lead-content ul {
    font-size: 1.05em;
    margin: .7em 0 1.1em 1.4em;
}

.rules-lead-content li {
    margin-bottom: .21em;
}

/* Fade-in on scroll */
.fade-scroll {
    opacity: 0;
    -webkit-transform: translateY(25px) scale(.98);
        -ms-transform: translateY(25px) scale(.98);
            transform: translateY(25px) scale(.98);
    -webkit-transition: opacity 0.7s cubic-bezier(.61, .09, .41, 1.02), -webkit-transform 0.72s cubic-bezier(.58, .04, .34, 1.11);
    transition: opacity 0.7s cubic-bezier(.61, .09, .41, 1.02), -webkit-transform 0.72s cubic-bezier(.58, .04, .34, 1.11);
    -o-transition: opacity 0.7s cubic-bezier(.61, .09, .41, 1.02), transform 0.72s cubic-bezier(.58, .04, .34, 1.11);
    transition: opacity 0.7s cubic-bezier(.61, .09, .41, 1.02), transform 0.72s cubic-bezier(.58, .04, .34, 1.11);
    transition: opacity 0.7s cubic-bezier(.61, .09, .41, 1.02), transform 0.72s cubic-bezier(.58, .04, .34, 1.11), -webkit-transform 0.72s cubic-bezier(.58, .04, .34, 1.11);
    will-change: opacity, transform;
}

.fade-scroll.visible {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
        -ms-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
}

/* International Team page */

.international-main {
    max-width: 1240px;
    margin: 3.5rem auto 0 auto;
    padding: 2rem 1.5rem 4rem 1.5rem;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 36% 3.5rem 1fr;
    grid-template-columns: 36% 1fr;
    gap: 3.5rem;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}

@media (max-width: 950px) {
    .international-main {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

@media (max-width: 600px) {
    .international-main {
        padding: 1rem 0.4rem 3rem 0.4rem;
        gap: 2rem;
    }
}

.int-accordion {
    background: rgba(255, 255, 255, 0.66);
    -webkit-box-shadow: 0 8px 32px 0 rgba(31, 41, 55, 0.07), 0 1.5px 8px rgba(209, 0, 0, 0.04);
            box-shadow: 0 8px 32px 0 rgba(31, 41, 55, 0.07), 0 1.5px 8px rgba(209, 0, 0, 0.04);
    border-radius: 1.2rem;
    border: 1.3px solid #f0f2f3;
    padding: 1.4rem 1.2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
    -webkit-backdrop-filter: blur(2.6px) saturate(123%);
            backdrop-filter: blur(2.6px) saturate(123%);
    -webkit-transition: -webkit-box-shadow 0.25s cubic-bezier(.56, -.06, .52, 1.19);
    transition: -webkit-box-shadow 0.25s cubic-bezier(.56, -.06, .52, 1.19);
    -o-transition: box-shadow 0.25s cubic-bezier(.56, -.06, .52, 1.19);
    transition: box-shadow 0.25s cubic-bezier(.56, -.06, .52, 1.19);
    transition: box-shadow 0.25s cubic-bezier(.56, -.06, .52, 1.19), -webkit-box-shadow 0.25s cubic-bezier(.56, -.06, .52, 1.19);
    isolation: isolate;
}

.int-accordion-block {
    background: rgba(255, 255, 255, 0.93);
    border-radius: 0.92em;
    margin-bottom: 0.22rem;
    -webkit-box-shadow: 0 2px 7px 0 rgba(31, 41, 55, 0.03);
            box-shadow: 0 2px 7px 0 rgba(31, 41, 55, 0.03);
    border: 1.1px solid #edeef2;
    -webkit-transition: border 0.19s, -webkit-box-shadow 0.17s;
    transition: border 0.19s, -webkit-box-shadow 0.17s;
    -o-transition: box-shadow 0.17s, border 0.19s;
    transition: box-shadow 0.17s, border 0.19s;
    transition: box-shadow 0.17s, border 0.19s, -webkit-box-shadow 0.17s;
    overflow: hidden;
}

.int-accordion-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    font-size: 1.16rem;
    font-weight: 600;
    letter-spacing: 0.012em;
    color: #191b1f;
    background: -o-linear-gradient(356deg, #fff 82%, #ffd1d1 100%);
    background: linear-gradient(94deg, #fff 82%, #ffd1d1 100%);
    border: none;
    padding: 0.94em 0.95em 0.94em 0.88em;
    cursor: pointer;
    -webkit-transition: background 0.2s, color 0.2s;
    -o-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;
    outline: none;
    position: relative;
}

.int-accordion-btn .icon-badge {
    display: inline-block;
    min-width: 2.25em;
    text-align: center;
    background: -o-linear-gradient(356deg, #d10000 66%, #a30000 100%);
    background: linear-gradient(94deg, #d10000 66%, #a30000 100%);
    color: #fff;
    border-radius: 0.6em;
    font-size: 1.15em;
    font-weight: 700;
    margin-right: 1em;
    letter-spacing: 0.09em;
    padding: 0.28em 0.6em 0.28em 0.8em;
    -webkit-box-shadow: 0 1px 7px rgba(209, 0, 0, .06);
            box-shadow: 0 1px 7px rgba(209, 0, 0, .06);
}

.int-accordion-btn .arrow {
    margin-left: auto;
    font-size: 1.08em;
    color: var(--primary);
    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transition: -webkit-transform 0.22s cubic-bezier(.57, .19, .37, 1.25);
    transition: -webkit-transform 0.22s cubic-bezier(.57, .19, .37, 1.25);
    -o-transition: transform 0.22s cubic-bezier(.57, .19, .37, 1.25);
    transition: transform 0.22s cubic-bezier(.57, .19, .37, 1.25);
    transition: transform 0.22s cubic-bezier(.57, .19, .37, 1.25), -webkit-transform 0.22s cubic-bezier(.57, .19, .37, 1.25);
}

.int-accordion-block.open .int-accordion-btn .arrow {
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
}

.int-accordion-panel {
    overflow: hidden;
    background: -o-linear-gradient(356deg, #fff 83%, #ffeaea 100%);
    background: linear-gradient(94deg, #fff 83%, #ffeaea 100%);
    border-top: 1px solid #f2d6d6;
    color: #30323a;
    font-size: 1.04rem;
    -webkit-transition: max-height 0.5s cubic-bezier(.53, .13, .37, 1.24), -webkit-box-shadow 0.18s;
    transition: max-height 0.5s cubic-bezier(.53, .13, .37, 1.24), -webkit-box-shadow 0.18s;
    -o-transition: max-height 0.5s cubic-bezier(.53, .13, .37, 1.24), box-shadow 0.18s;
    transition: max-height 0.5s cubic-bezier(.53, .13, .37, 1.24), box-shadow 0.18s;
    transition: max-height 0.5s cubic-bezier(.53, .13, .37, 1.24), box-shadow 0.18s, -webkit-box-shadow 0.18s;
    max-height: 0;
    padding: 0 1.22em;
}

.int-accordion-block.open .int-accordion-panel {
    padding: 0.77em 1.22em 1.1em 1.22em;
    max-height: 100%;
    -webkit-box-shadow: 0 6px 22px 0 rgba(209, 0, 0, 0.067);
            box-shadow: 0 6px 22px 0 rgba(209, 0, 0, 0.067);
}

.team-titles h3 {
    color: #d10000;
    margin: .43em 0 .28em 0;
    font-size: 1.1em;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.team-titles ul {
    padding: 0;
    margin: 0 0 .7em 0;
    list-style: none;
}

.team-titles li {
    margin-bottom: 0.26em;
    font-size: 1.038em;
    padding-left: 0.5em;
}

/* Right Side */
.int-info-area {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    height: 100%;
}

.int-feature-img-wrap {
    position: relative;
    width: 100%;
    min-height: 260px;
    border-radius: 1.3rem;
    overflow: hidden;
    background: -o-linear-gradient(338deg, #efdada 24%, #ede7e7 88%);
    background: linear-gradient(112deg, #efdada 24%, #ede7e7 88%);
    -webkit-box-shadow: 0 8px 36px 0 rgba(31, 41, 55, 0.10);
            box-shadow: 0 8px 36px 0 rgba(31, 41, 55, 0.10);
    margin-bottom: 2.1rem;
    aspect-ratio: 5/3;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
}

.int-feature-img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
    -webkit-filter: brightness(0.98) saturate(1.13) contrast(0.97);
            filter: brightness(0.98) saturate(1.13) contrast(0.97);
    -webkit-transition: -webkit-transform 0.24s cubic-bezier(.55, .10, .34, 1.19);
    transition: -webkit-transform 0.24s cubic-bezier(.55, .10, .34, 1.19);
    -o-transition: transform 0.24s cubic-bezier(.55, .10, .34, 1.19);
    transition: transform 0.24s cubic-bezier(.55, .10, .34, 1.19);
    transition: transform 0.24s cubic-bezier(.55, .10, .34, 1.19), -webkit-transform 0.24s cubic-bezier(.55, .10, .34, 1.19);
    border-radius: 1.3rem;
}

.int-feature-img-wrap::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    background: -o-radial-gradient(85% 80%, ellipse, rgba(209, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.0) 68%);
    background: radial-gradient(ellipse at 85% 80%, rgba(209, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.0) 68%);
    z-index: 2;
    pointer-events: none;
}

.int-feature-img-wrap .int-feature-text-floating {
    position: absolute;
    bottom: 0.6em;
    right: 1.2em;
    background: -o-linear-gradient(356deg, #d10000bb 20%, #ffc2c2b6 94%);
    background: linear-gradient(94deg, #d10000bb 20%, #ffc2c2b6 94%);
    color: #fff;
    font-weight: 600;
    font-size: 1.12rem;
    padding: 0.6em 1.5em 0.6em 1.1em;
    border-radius: 0.60em;
    -webkit-box-shadow: 0 4px 18px rgba(0, 0, 0, 0.17);
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.17);
    letter-spacing: 0.03em;
    z-index: 3;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-backdrop-filter: blur(1.1px);
            backdrop-filter: blur(1.1px);
    pointer-events: none;
    -webkit-animation: float-bb-label 3.2s infinite alternate cubic-bezier(.2, .62, .47, 1.04);
            animation: float-bb-label 3.2s infinite alternate cubic-bezier(.2, .62, .47, 1.04);
}

@keyframes float-bb-label {
    0% {
        -webkit-transform: translateY(0px) scale(1);
                transform: translateY(0px) scale(1);
    }

    100% {
        -webkit-transform: translateY(-10px) scale(1.055);
                transform: translateY(-10px) scale(1.055);
    }
}

.int-lead-content {
    margin: 0 0 2.0rem 0;
}

.int-lead-content h2 {
    font-size: clamp(1.54rem, 3vw, 2.2rem);
    font-weight: 700;
    margin: 0 0 0.45em 0;
    color: #d10000;
    letter-spacing: -0.015em;
}

.int-lead-content p {
    font-size: 1.12rem;
    color: #23242a;
    margin: 0.5em 0 1.1em 0;
    line-height: 1.48;
}

.int-lead-content blockquote {
    font-family: 'Inter', 'Poppins', Arial, sans-serif;
    margin: 0 0 1.1rem 0;
    padding: 0.64em 1.2em 0.64em 1.33em;
    border-left: 4px solid #d10000b9;
    background: rgba(255, 209, 209, 0.15);
    color: #5b2222;
    font-size: 1.04em;
    font-style: italic;
    border-radius: 0.5em;
    letter-spacing: 0.016em;
    -webkit-box-shadow: 0 2px 16px rgba(209, 0, 0, .087);
            box-shadow: 0 2px 16px rgba(209, 0, 0, .087);
}

.int-lead-content blockquote cite {
    display: block;
    margin-top: 0.4em;
    color: #a30000b2;
    font-size: 0.97em;
    font-style: normal;
}

/* Fade Animations Shared */
.fade-scroll {
    opacity: 0;
    -webkit-transform: translateY(25px) scale(.98);
        -ms-transform: translateY(25px) scale(.98);
            transform: translateY(25px) scale(.98);
    -webkit-transition: opacity 0.7s cubic-bezier(.61, .09, .41, 1.02), -webkit-transform 0.72s cubic-bezier(.58, .04, .34, 1.11);
    transition: opacity 0.7s cubic-bezier(.61, .09, .41, 1.02), -webkit-transform 0.72s cubic-bezier(.58, .04, .34, 1.11);
    -o-transition: opacity 0.7s cubic-bezier(.61, .09, .41, 1.02), transform 0.72s cubic-bezier(.58, .04, .34, 1.11);
    transition: opacity 0.7s cubic-bezier(.61, .09, .41, 1.02), transform 0.72s cubic-bezier(.58, .04, .34, 1.11);
    transition: opacity 0.7s cubic-bezier(.61, .09, .41, 1.02), transform 0.72s cubic-bezier(.58, .04, .34, 1.11), -webkit-transform 0.72s cubic-bezier(.58, .04, .34, 1.11);
    will-change: opacity, transform;
}

.fade-scroll.visible {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
        -ms-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
}

/* Dave Sawyer page */
.bio-hero {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 4.5rem 1.5rem 2.0rem 1.5rem;
    min-height: 320px;
    text-align: center;
    background: -o-linear-gradient(350deg, #fff 70%, #ffd1d1 160%);
    background: linear-gradient(100deg, #fff 70%, #ffd1d1 160%);
    border-radius: 0 0 1.8rem 1.8rem;
    -webkit-box-shadow: 0 8px 32px 0 rgba(31, 41, 55, 0.07);
            box-shadow: 0 8px 32px 0 rgba(31, 41, 55, 0.07);
}

.bio-hero h1 {
    font-weight: 800;
    font-size: clamp(2.5rem, 6vw, 4.1rem);
    margin: 0;
    color: var(--primary);
    text-shadow: 0 6px 28px rgba(209, 0, 0, 0.09);
}

.bio-hero h2 {
    color: var(--dark);
    font-size: clamp(1.2rem, 2.8vw, 1.6rem);
    margin-top: 1.2rem;
    max-width: 670px;
    font-weight: 500;
}

.bio-hero .bio-quote {
    margin-top: 1.5em;
    font-size: 1.18rem;
    color: #575;
    font-style: italic;
    letter-spacing: 0.01em;
}

/* ------ IMPROVED BIO ROW LAYOUT ------ */
.bio-section-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    position: relative;
    background: none;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 3.3rem auto;
    padding: 0 2rem;
    gap: 3rem;
}

.bio-section-row.left-image {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
}

.bio-section-row.right-image {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
}

.bio-section-content,
.bio-section-image {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
    min-width: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: relative;
}

.bio-section-content {
    padding: 2.5rem 0 2.5rem 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    max-width: 580px;
    width: 100%;
}

.bio-section-content-inner {
    background: rgba(255, 255, 255, 0.89);
    -webkit-backdrop-filter: blur(8px) saturate(125%);
            backdrop-filter: blur(8px) saturate(125%);
    border-radius: 1.5rem;
    -webkit-box-shadow: 0 6px 44px 0 rgba(209, 0, 0, 0.09);
            box-shadow: 0 6px 44px 0 rgba(209, 0, 0, 0.09);
    padding: 2rem 2rem;
    border: 1.1px solid #ffe7e7;
    -webkit-animation-duration: 1.1s;
            animation-duration: 1.1s;
    -webkit-animation-timing-function: cubic-bezier(.6, .32, .41, 1.19);
            animation-timing-function: cubic-bezier(.6, .32, .41, 1.19);
    opacity: 0;
    -webkit-transform: translateX(-38px);
        -ms-transform: translateX(-38px);
            transform: translateX(-38px);
    width: 100%;
}

.bio-section-row.inview .bio-section-content-inner {
    opacity: 1;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-name: bioContentInLeft;
            animation-name: bioContentInLeft;
}

.bio-section-row.right-image .bio-section-content-inner {
    -webkit-transform: translateX(38px);
        -ms-transform: translateX(38px);
            transform: translateX(38px);
}

.bio-section-row.right-image.inview .bio-section-content-inner {
    -webkit-animation-name: bioContentInRight;
            animation-name: bioContentInRight;
}

@keyframes bioContentInLeft {
    from {
        opacity: 0;
        -webkit-transform: translateX(-38px);
                transform: translateX(-38px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
}

@keyframes bioContentInRight {
    from {
        opacity: 0;
        -webkit-transform: translateX(38px);
                transform: translateX(38px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
}

.bio-section-content-inner h3 {
    font-size: 1.42rem;
    color: var(--primary);
    font-weight: 700;
    margin-bottom: 1.2em;
    letter-spacing: -0.012em;
}

.bio-section-content-inner p {
    color: #23272b;
    font-size: 1.13rem;
    line-height: 1.63;
    margin-bottom: 1.25em;
    font-family: 'Poppins', Arial, sans-serif;
}

.bio-section-image-wrap {
    width: 100%;
    max-width: 350px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    min-height: 260px;
    -webkit-animation-duration: 1.1s;
            animation-duration: 1.1s;
    -webkit-animation-timing-function: cubic-bezier(.6, .32, .41, 1.19);
            animation-timing-function: cubic-bezier(.6, .32, .41, 1.19);
    opacity: 0;
    -webkit-transform: translateX(48px);
        -ms-transform: translateX(48px);
            transform: translateX(48px);
}

.bio-section-row.inview .bio-section-image-wrap {
    opacity: 1;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-name: bioImgInRight;
            animation-name: bioImgInRight;
}

.bio-section-row.right-image .bio-section-image-wrap {
    -webkit-transform: translateX(-48px);
        -ms-transform: translateX(-48px);
            transform: translateX(-48px);
}

.bio-section-row.right-image.inview .bio-section-image-wrap {
    -webkit-animation-name: bioImgInLeft;
            animation-name: bioImgInLeft;
}

@keyframes bioImgInRight {
    from {
        opacity: 0;
        -webkit-transform: translateX(48px);
                transform: translateX(48px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
}

@keyframes bioImgInLeft {
    from {
        opacity: 0;
        -webkit-transform: translateX(-48px);
                transform: translateX(-48px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
}

.bio-section-image-wrap img {
    width: 100%;
    max-width: 340px;
    height: auto;
    border-radius: 1.3rem;
    -webkit-box-shadow: 0 6px 42px rgba(209, 0, 0, 0.12);
            box-shadow: 0 6px 42px rgba(209, 0, 0, 0.12);
    border: 2.2px solid var(--primary-light);
    background: #fff;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
}

/* ----------- RESPONSIVE QUERIES ----------- */
@media (max-width: 900px) {
    .bio-section-row {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
            -ms-flex-direction: column !important;
                flex-direction: column !important;
        padding: 0 0.7rem;
        gap: 1.9rem;
        margin-bottom: 2.2rem;
        max-width: 98vw;
    }

    .bio-section-content,
    .bio-section-image {
        max-width: 100%;
        width: 100%;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

    .bio-section-content-inner {
        margin: 0 auto;
        padding: 1.2rem 0.8rem;
        border-radius: 1em;
        width: 100%;
        max-width: 100vw;
        /* <-- Ensures never exceeds screen width */
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        /* <-- Add this to include padding in width */
        word-break: break-word;
        /* <-- Prevents overflow on long words */
    }

    .bio-section-image-wrap {
        max-width: 95vw;
        min-height: 170px;
        margin: 0 auto;
    }

    .bio-section-image-wrap img {
        max-width: 330px;
        border-radius: 1em;
    }

    .bio-section-row.left-image,
    .bio-section-row.right-image {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
            -ms-flex-direction: column !important;
                flex-direction: column !important;
    }
}

@media (max-width: 600px) {
    .bio-hero {
        padding: 2.5rem 0.2rem 1.0rem 0.2rem;
        border-radius: 0 0 1rem 1rem;
    }

    .bio-section-row {
        gap: 1.3rem;
        padding: 0 0.2rem;
    }

    .bio-section-content {
        padding: 1.2rem 0 1.2rem 0;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        /* Center content horizontally */
    }

    .bio-section-content-inner {
        padding: 1rem 0.4rem;
        max-width: 100vw;
        /* Stay within viewport */
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }

    .bio-section-image-wrap img {
        max-width: 98vw;
    }
}

@media (max-width: 380px) {
    .bio-section-content-inner {
        padding: 0.5rem 0.1rem;
    }

    .bio-section-row {
        gap: 0.7rem;
    }
}

@media (max-width: 900px) {
    .int-accordion {
        padding: 1.1rem 0.7rem;
        border-radius: 0.8em;
    }

    .int-feature-img-wrap {
        min-height: 160px;
        border-radius: 1em;
    }

    .int-feature-img {
        border-radius: 1em;
    }

    .int-info-area {
        min-width: 0;
    }
}

@media (max-width: 600px) {
    .int-feature-img-wrap {
        margin-bottom: 1.1rem;
    }
}

/* Responsive tweaks matching original */
@media (max-width: 900px) {

    .rules-accordion,
    .rules-feature-img-wrap {
        border-radius: 0.85em;
    }

    .rules-accordion {
        padding: 1.1rem 0.7rem;
    }

    .rules-feature-img-wrap {
        min-height: 160px;
    }

    .rules-feature-img {
        border-radius: 0.85em;
    }

    .rules-info-area {
        min-width: 0;
    }
}

@media (max-width: 600px) {
    .rules-feature-img-wrap {
        margin-bottom: 1.1rem;
    }
}


/* ================== Responsive =============== */
@media (max-width: 900px) {
    .history-accordion {
        padding: 1.1rem 0.7rem;
        border-radius: 0.8em;
    }

}

@media (max-width: 600px) {
    .grading-official-info {
        font-size: 1.03rem;
        padding: 1.0em 0.6em;
    }

    .grading-official-cert-img {
        width: 95vw;
    }
}

/* ===== Responsive: Instructor Course Page ===== */

/* 1. Medium screens: below 950px, stack sidebar under main content, adjust paddings/cards */
@media (max-width: 950px) {
    .instructor-course-wrapper {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 1.5rem;
        margin: 2.2rem auto 1.2rem auto;
        padding-left: 0.2rem;
        padding-right: 0.2rem;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
        max-width: 98vw;
    }

    .instructor-course-section,
    .sidebar-instructor-highlight {
        max-width: 100%;
        min-width: 0;
    }

    .instructor-course-section {
        padding: 2rem 1rem 1.5rem 1rem;
    }

    .sidebar-instructor-highlight {
        margin-left: 0;
        margin-top: 0.6em;
        padding: 1.3em 0.7em 1.1em 0.7em;
        max-width: 100%;
    }
}

/* 2. The choose-date-section and course-dates-grid adapt to fewer columns */
@media (max-width: 760px) {
    .choose-date-section {
        padding: 1.2em 0.3em 1.3em 0.3em;
        border-radius: 0.6em;
    }

    .course-dates-grid {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 1rem;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
        margin-bottom: 1.4em;
        margin-top: 1em;
    }

    .course-date-card {
        -webkit-box-flex: 1;
            -ms-flex: 1 1 100%;
                flex: 1 1 100%;
        min-width: 0;
        max-width: none;
        padding: 0.92em 1em;
        font-size: 0.98rem;
        margin-bottom: 0.35em;
    }

    .choose-date-section img {
        max-width: 94vw;
        border-radius: 0.22em;
        margin-top: 1.1em;
    }
}

/* 3. Font and heading tweaks for mobile readability */
@media (max-width: 560px) {
    .instructor-course-section {
        padding: 1em 0.4em 0.85em 0.4em;
        border-radius: 0.65em;
    }

    .instructor-course-section h1 {
        font-size: 1.65rem;
        margin-bottom: 0.55em;
        word-break: break-word;
    }

    .course-intro h5 {
        font-size: 1.02rem;
        margin-bottom: 0.45em;
    }

    .highlight-badge {
        font-size: 0.89rem;
        padding: 0.22em 0.78em 0.22em 0.67em;
        margin-bottom: 0.55em;
    }

    .choose-date-section h2 {
        font-size: 1.15rem;
        margin-bottom: 0.7em;
    }

    .course-date-card strong {
        font-size: 1em;
    }

    .course-date-card .event-location,
    .course-date-card .event-status {
        font-size: 0.92em;
    }

    .choose-date-section .enrol-cta-btn {
        font-size: 1.01rem;
        padding: 0.71em 1.4em;
        margin-top: 1em;
    }

    .sidebar-instructor-highlight {
        padding: 0.9em 0.18em 0.7em 0.18em;
        border-radius: 0.7em;
        max-width: 100%;
    }

    .sidebar-instructor-highlight .instructor-img {
        width: 64px;
        height: 64px;
    }

    .sidebar-instructor-highlight h3 {
        font-size: 1.01rem;
        margin-top: 0.6em;
        margin-bottom: 0.29em;
    }

    .sidebar-instructor-highlight .quote {
        font-size: 0.94rem;
    }
}


/* Responsive adjustments as per instructor-course.html */
@media (max-width: 950px) {
    .grading-examiners-wrapper {
        margin: 2.2rem auto 1.2rem auto;
        padding-left: 0.2rem;
        padding-right: 0.2rem;
        max-width: 98vw;
    }

    .grading-examiners-section {
        padding: 2rem 1rem 1.5rem 1rem;
    }

    .choose-date-section {
        margin-top: 1.2em;
        padding: 1.1em 0.3em 1.3em 0.3em;
        border-radius: 0.65em;
    }
}

@media (max-width: 560px) {
    .grading-examiners-section {
        padding: 1em 0.4em 0.85em 0.4em;
        border-radius: 0.65em;
    }

    .grading-examiners-section h1 {
        font-size: 1.35rem;
        margin-bottom: 0.72em;
        word-break: break-word;
    }

    .choose-date-section h2 {
        font-size: 1.01rem;
        margin-bottom: 0.7em;
    }

    .choose-date-section img {
        border-radius: 0.18em;
        margin-top: 1.1em;
    }
}

@media (max-width: 420px) {
    .grading-examiners-wrapper {
        margin-top: 1.1rem;
        padding-left: 0.02rem;
        padding-right: 0.02rem;
    }

    .grading-examiners-section ul {
        margin-left: 1.15em;
        padding-left: 0.18em;
    }

    .modern-background-geom svg {
        -webkit-filter: blur(9px) brightness(1.02) opacity(.13);
                filter: blur(9px) brightness(1.02) opacity(.13);
    }
}

@media (max-width: 370px) {
    .modern-background-geom {
        display: none !important;
    }
}

/* ================== Responsive =============== */
@media (max-width: 900px) {
    .bb-accordion {
        padding: 1.1rem 0.7rem;
        border-radius: 0.8em;
    }

    .bb-feature-img-wrap {
        min-height: 160px;
        border-radius: 1em;
    }

    .bb-feature-img {
        border-radius: 1em;
    }

    .bb-info-area {
        min-width: 0;
    }
}

@media (max-width: 600px) {
    .bb-feature-img-wrap {
        margin-bottom: 1.1rem;
    }

    .bb-lead-cta-box {
        padding: 1em 0.7em 1em 0.7em;
    }
}

/* Visually hidden class (for label) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Responsive: one column */
@media (max-width: 900px) {
    .contact-main {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        gap: 1.8rem;
        margin-top: 2.4rem;
    }
}

@media (max-width: 670px) {

    .contact-info-card,
    .contact-form-card {
        padding: 1.5em 0.85em 1.4em 0.85em;
        border-radius: 1em;
    }
}

@media (max-width: 700px) {
    .contact-main {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        gap: 0.7rem;
        padding-bottom: 1.5em;
    }

    .contact-info-card,
    .contact-form-card {
        margin: 0 auto;
        width: 98%;
        max-width: 430px;
    }

    .contact-info-card {
        margin-top: 0.33em;
    }
}

@media (max-width:480px) {

    .contact-info-card,
    .contact-form-card {
        padding: 0.98em 0.25em 1.33em 0.44em;
        border-radius: 0.8em;
    }

    .contact-info-card h1 {
        font-size: 1.55rem;
    }
}

@media (max-width: 900px) {
    .event-grid {
        -ms-grid-columns: 1fr 1.2rem 1fr;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }
}

@media (max-width: 650px) {
    .event-grid {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Responsive */
@media (max-width: 900px) {
    .profile-detail-section {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        gap: 1.3rem 0;
        padding: 1.2rem 0.6rem 1.2rem 0.78rem;
    }

    .profile-detail-section-left,
    .profile-detail-section-right {
        max-width: 100%;
    }
}

@media (max-width: 700px) {
    .profile-hero {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        gap: 1.5rem;
        padding: 2.5rem 0.5rem 1.0rem 0.5rem;
    }

    .profile-avatar {
        width: 104px;
        height: 104px;
    }

    .profile-hero-info h1 {
        font-size: 1.45rem;
    }
}

@media (max-width: 560px) {
    .profile-detail-section {
        padding: 0.65rem 0.21rem 0.9rem 0.31rem;
        border-radius: 0.7em;
        font-size: 0.97rem;
    }

    .profile-hero {
        border-radius: 0 0 1em 1em;
    }
}

@media (max-width: 800px) {
    .services-hero {
        min-height: 330px;
        border-radius: 0 0 1.1rem 1.1rem;
    }

    .services-hero-content {
        border-radius: 1.1em;
        padding: 1.5em 0.5em;
    }

    .services-hero-bg {
        background-position: center 45%;
    }
}

@media (max-width: 550px) {
    .services-hero {
        min-height: 190px;
        border-radius: 0 0 0.8rem 0.8rem;
    }

    .services-hero-content {
        border-radius: 0.7em;
        padding: 0.8rem 0.1rem;
    }

    .services-hero-content h1 {
        font-size: 2rem;
    }

    .services-hero-content .subtitle {
        font-size: 1rem;
    }
}

@media (max-width: 900px) {
    .bio-section-row {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
            -ms-flex-direction: column !important;
                flex-direction: column !important;
        padding: 0 0.7rem;
        gap: 1.9rem;
        margin-bottom: 2.2rem;
        max-width: 98vw;
    }

    .bio-section-content,
    .bio-section-image {
        max-width: 100%;
        width: 100%;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

    .bio-section-content-inner {
        margin: 0 auto;
        padding: 1.2rem 0.8rem;
        border-radius: 1em;
        width: 100%;
        max-width: 100vw;
        /* <-- Ensures never exceeds screen width */
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        /* <-- Add this to include padding in width */
        word-break: break-word;
        /* <-- Prevents overflow on long words */
    }

    .bio-section-image-wrap {
        max-width: 95vw;
        min-height: 170px;
        margin: 0 auto;
    }

    .bio-section-image-wrap img {
        max-width: 330px;
        border-radius: 1em;
    }

    .bio-section-row.left-image,
    .bio-section-row.right-image {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
            -ms-flex-direction: column !important;
                flex-direction: column !important;
    }
}

@media (max-width: 600px) {
    .bio-hero {
        padding: 2.5rem 0.2rem 1.0rem 0.2rem;
        border-radius: 0 0 1rem 1rem;
    }

    .bio-section-row {
        gap: 1.3rem;
        padding: 0 0.2rem;
    }

    .bio-section-content {
        padding: 1.2rem 0 1.2rem 0;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        /* Center content horizontally */
    }

    .bio-section-content-inner {
        padding: 1rem 0.4rem;
        max-width: 100vw;
        /* Stay within viewport */
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }

    .bio-section-image-wrap img {
        max-width: 98vw;
    }
}

@media (max-width: 380px) {
    .bio-section-content-inner {
        padding: 0.5rem 0.1rem;
    }

    .bio-section-row {
        gap: 0.7rem;
    }
}

/* Responsive Grid */
@media (max-width: 980px) {
    .blog-card-grid {
        -ms-grid-columns: 1fr 1.7rem 1fr;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.7rem;
        padding: 1.8rem;
    }
}

@media (max-width: 680px) {
    .blog-card-grid {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        gap: 1.2rem;
        padding: 1.1rem;
    }

    .blog-card {
        border-radius: 0.85em;
    }

    .blog-card-title,
    .blog-card-meta,
    .blog-card-excerpt {
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

@media (max-width: 480px) {
    .blog-card-grid {
        padding: 0.4rem;
        gap: 0.8rem;
    }
}

/* Optionally: slightly reduce font size for meta on very small screens */
@media (max-width: 420px) {
    .blog-card-meta {
        font-size: 0.92rem;
    }
}

@media (max-width: 700px) {
    .hero-section {
        min-height: 72vw;
        min-height: 380px;
    }

    .hero-content {
        padding: 2.0rem 0.5rem;
    }

    .hero-content h1 {
        font-size: clamp(2.1rem, 11vw, 2.9rem);
    }

    .hero-content p {
        font-size: 1.05rem;
    }
}

@media (max-width: 480px) {
    .hero-content {
        border-radius: 0.6em;
    }
}

/* Responsive Layout */
@media (max-width: 1180px) {
    .main-header {
        padding: clamp(0.75rem, 2vw, 2rem) clamp(0.5rem, 4vw, 1.5rem);
    }

    .nav-menu {
        gap: 1.25rem;
    }
}

/* Mobile nav behavior */
@media (max-width: 990px) {
    .main-header {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
    }

    .main-nav {
        -webkit-box-ordinal-group: 4;
            -ms-flex-order: 3;
                order: 3;
        width: 100%;
        -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
    }

    .nav-menu {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
        background: #fff;
        -webkit-box-shadow: 0 10px 48px rgba(0, 0, 0, .08);
                box-shadow: 0 10px 48px rgba(0, 0, 0, .08);
        width: 100vw;
        max-width: none;
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
                transform: translateX(-50%);
        top: 100%;
        padding: 1.1rem 0.5rem 1.60rem 0.5rem;
        border-radius: 0 0 var(--radius) var(--radius);
        display: none;
        z-index: 998;
        -webkit-animation: fadein 0.23s;
                animation: fadein 0.23s;
    }

    .main-nav.active .nav-menu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .main-nav {
        min-width: 56px;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        position: relative;
    }

    .menu-toggle {
        display: block;
        position: relative;
        z-index: 1010;
        background: none;
    }

    .main-nav.active .menu-toggle .icon-open {
        display: none;
    }

    .main-nav.active .menu-toggle .icon-close {
        display: inline;
    }

    .main-nav .menu-toggle .icon-close {
        display: none;
    }
}

@media (max-width: 990px) {
    .submenu {
        display: none;
        opacity: 1 !important;
        position: relative;
        /* left: 0; */
        -webkit-transform: none;
            -ms-transform: none;
                transform: none;
        /* top: 0; */
        min-width: 0;
        max-width: none;
        background: #fafbfc;
        -webkit-box-shadow: none;
                box-shadow: none;
        border-radius: 0.48em;
        padding: 0.1rem 0 0.4rem 0.3rem;
        margin-top: -2px;
        pointer-events: auto;
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .has-submenu.open>.submenu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .has-submenu>.submenu::before {
        display: none;
    }
}

@-webkit-keyframes fadein {
    from {
        opacity: 0;
        -webkit-transform: translateY(-12px);
                transform: translateY(-12px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}

@keyframes fadein {
    from {
        opacity: 0;
        -webkit-transform: translateY(-12px);
                transform: translateY(-12px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}



/* Footer */

.wka-footer {
    --footer-bg: #15171a;
    --footer-accent: var(--primary);
    --footer-text: #dee4ea;
    --footer-link: #d3d3d3;
    --footer-link-hover: var(--primary);
    background: var(--footer-bg);
    color: var(--footer-text);
    font-family: 'Segoe UI', 'Poppins', sans-serif;
    letter-spacing: 0.01em;
}

.footer-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 1.5rem 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 2.8rem;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    border-bottom: 1px solid #23253b;
}

.footer-brand {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 270px;
            flex: 1 1 270px;
    min-width: 220px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}

.footer-brand img {
    max-width: 85px;
    margin-bottom: 1em;
    background: #fff;
    border-radius: 1.5em;
    -webkit-box-shadow: 0 4px 32px 0 rgba(30, 0, 0, 0.07);
            box-shadow: 0 4px 32px 0 rgba(30, 0, 0, 0.07);
}

.footer-tagline {
    font-size: 1.06rem;
    margin-bottom: 1.15em;
    color: #bfc8d5;
    line-height: 1.4;
}

/* Social - Modern Circles */
.footer-social {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1.1rem;
}

.footer-social a {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #202337;
    color: #fff;
    font-size: 1.35rem;
    -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    -webkit-transition: background 0.25s, color 0.23s, -webkit-transform 0.18s;
    transition: background 0.25s, color 0.23s, -webkit-transform 0.18s;
    -o-transition: background 0.25s, color 0.23s, transform 0.18s;
    transition: background 0.25s, color 0.23s, transform 0.18s;
    transition: background 0.25s, color 0.23s, transform 0.18s, -webkit-transform 0.18s;
}

.footer-social a:hover,
.footer-social a:focus {
    background: var(--footer-accent);
    color: #fff;
    -webkit-transform: translateY(-3px) scale(1.07);
        -ms-transform: translateY(-3px) scale(1.07);
            transform: translateY(-3px) scale(1.07);
}

.footer-links {
    -webkit-box-flex: 3;
        -ms-flex: 3 1 480px;
            flex: 3 1 480px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 2.5rem;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

.footer-link-col {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 165px;
    margin-bottom: 1.7rem;
}

.footer-link-col h4 {
    color: #FFF;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.026em;
    margin-bottom: 1.1em;
    border-left: 4px solid var(--footer-accent);
    padding-left: 0.65em;
}

.footer-link-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-link-col ul li {
    margin-bottom: 0.69em;
    font-size: 1rem;
    line-height: 1.35;
}

.footer-link-col ul li:last-child {
    margin-bottom: 0;
}

.footer-link-col a {
    color: var(--footer-link);
    text-decoration: none;
    position: relative;
    padding-left: 0;
    -webkit-transition: color 0.23s, padding-left 0.18s;
    -o-transition: color 0.23s, padding-left 0.18s;
    transition: color 0.23s, padding-left 0.18s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-weight: 400;
}

.footer-link-col a i {
    margin-right: 0.55em;
    font-size: 1.06em;
    color: var(--footer-accent);
    opacity: 0.7;
    -webkit-transition: color 0.22s;
    -o-transition: color 0.22s;
    transition: color 0.22s;
}

.footer-link-col a:hover,
.footer-link-col a:focus {
    color: var(--footer-link-hover);
    padding-left: 0.40em;
    outline: none;
}

.footer-link-col a:hover i,
.footer-link-col a:focus i {
    color: var(--footer-link-hover);
    opacity: 1;
}

.get-in-touch a {
    word-break: break-all;
}

.footer-bottom-bar {
    text-align: center;
    background: #181A21;
    color: #cccccc;
    padding: 1.06rem 1rem 1.12rem 1rem;
    font-size: 1.04rem;
    letter-spacing: 0.013em;
}

@media (max-width: 800px) {
    .footer-main {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 2.5rem;
        padding: 2.5rem 1rem 0.5rem 1rem;
    }

    .footer-links {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 1.8rem;
        width: 100%;
        margin-top: 1.2rem;
    }

    .footer-link-col {
        min-width: 0;
    }
}

@media (max-width: 540px) {
    .footer-brand img {
        max-width: 56px;
    }

    .footer-social a {
        width: 33px;
        height: 33px;
        font-size: 1.14rem;
    }

    .footer-link-col h4 {
        font-size: 1rem;
    }

    .footer-link-col ul li {
        font-size: 0.97rem;
    }

    .footer-bottom-bar {
        font-size: 0.95rem;
    }
}

/* Modern Alert Messages (Django messages framework) */
.alert {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1em;
    width: 100%;
    max-width: 560px;
    margin: 1.1em auto;
    padding: 1.15em 3.8em 1.15em 1.2em;
    border-radius: 1em;
    font-size: 1.12rem;
    font-family: 'Poppins', Arial, sans-serif;
    background: #fff;
    -webkit-box-shadow: 0 4px 28px 0 rgba(31, 41, 55, 0.13);
            box-shadow: 0 4px 28px 0 rgba(31, 41, 55, 0.13);
    border-left: 6px solid #d10000;
    -webkit-animation: alertIn 0.55s cubic-bezier(.5, 1.4, .8, 1) backwards;
            animation: alertIn 0.55s cubic-bezier(.5, 1.4, .8, 1) backwards;
    -webkit-transition: -webkit-box-shadow 0.2s, -webkit-transform 0.18s;
    transition: -webkit-box-shadow 0.2s, -webkit-transform 0.18s;
    -o-transition: box-shadow 0.2s, transform 0.18s;
    transition: box-shadow 0.2s, transform 0.18s;
    transition: box-shadow 0.2s, transform 0.18s, -webkit-box-shadow 0.2s, -webkit-transform 0.18s;
    z-index: 1060;
    color: #23272b;
}

@-webkit-keyframes alertIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(-16px) scale(.98);
                transform: translateY(-16px) scale(.98);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
    }
}

@keyframes alertIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(-16px) scale(.98);
                transform: translateY(-16px) scale(.98);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
    }
}

.alert__message {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    margin: 0;
    color: inherit;
    font-weight: 500;
    word-break: break-word;
    letter-spacing: 0.01em;
}

.alert__close {
    position: absolute;
    top: 0.7em;
    right: 1.1em;
    background: none;
    border: none;
    color: var(--primary, #d10000);
    font-size: 1.13em;
    font-weight: bold;
    cursor: pointer;
    -webkit-transition: color 0.22s, -webkit-transform 0.16s;
    transition: color 0.22s, -webkit-transform 0.16s;
    -o-transition: color 0.22s, transform 0.16s;
    transition: color 0.22s, transform 0.16s;
    transition: color 0.22s, transform 0.16s, -webkit-transform 0.16s;
    padding: 0.18em 0.5em;
    border-radius: .6em;
    z-index: 2;
    line-height: 1;
}

.alert__close:hover,
.alert__close:focus {
    color: #fff;
    background: var(--primary, #d10000);
    outline: none;
    -webkit-transform: scale(1.15);
        -ms-transform: scale(1.15);
            transform: scale(1.15);
}

/* Alert variants */
.alert--success {
    border-left-color: #33cb68;
    background: -o-linear-gradient(353deg, #f3fff9 65%, #fcfffa 100%);
    background: linear-gradient(97deg, #f3fff9 65%, #fcfffa 100%);
    color: #176c38;
    -webkit-box-shadow: 0 2px 14px #7fcfad22, 0 0 4px #33cb6822;
            box-shadow: 0 2px 14px #7fcfad22, 0 0 4px #33cb6822;
}

.alert--info {
    border-left-color: #1ca6e8;
    background: -o-linear-gradient(350deg, #f0faff 68%, #fafdff 100%);
    background: linear-gradient(100deg, #f0faff 68%, #fafdff 100%);
    color: #18598a;
    -webkit-box-shadow: 0 2px 14px #90c7ef14;
            box-shadow: 0 2px 14px #90c7ef14;
}

.alert--warning {
    border-left-color: #ffab00;
    background: -o-linear-gradient(352deg, #fff7e6 72%, #fffaf3 100%);
    background: linear-gradient(98deg, #fff7e6 72%, #fffaf3 100%);
    color: #725103;
    -webkit-box-shadow: 0 2px 14px #fad97c14;
            box-shadow: 0 2px 14px #fad97c14;
}

.alert--error,
.alert--danger {
    border-left-color: #d10000;
    background: -o-linear-gradient(353deg, #fff3f3 67%, #fff8f8 100%);
    background: linear-gradient(97deg, #fff3f3 67%, #fff8f8 100%);
    color: #b70015;
    -webkit-box-shadow: 0 2px 15px #fdd0d014;
            box-shadow: 0 2px 15px #fdd0d014;
    ;
}

/* Add left status icon */
.alert:before {
    content: '';
    display: inline-block;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    margin-right: 0.98em;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.15em;
    width: 1.21em;
    text-align: center;
    opacity: 0.84;
}

.alert--success:before {
    content: "\f058";
    color: #23ba54;
}

.alert--info:before {
    content: "\f05a";
    color: #1993c9;
}

.alert--warning:before {
    content: "\f071";
    color: #d18a00;
}

.alert--error:before,
.alert--danger:before {
    content: "\f06a";
    color: #d10000;
}

/* Responsive */
@media (max-width: 560px) {
    .alert {
        max-width: 98vw;
        font-size: 1.01rem;
        border-radius: .54em;
        padding: 0.8em 2.6em 0.85em 0.81em;
    }

    .alert__close {
        top: 0.35em;
        right: 0.3em;
    }
}

/* =================== Instagram Carousel Styles =================== */
:root {
    /* Theming */
    --ig-primary: #df2222;
    --ig-bg: #fff;
    --ig-radius: 1.4rem;
    --ig-shadow: 0 4px 24px 0 rgba(36, 21, 44, 0.07), 0 1.5px 8px rgba(223, 34, 34, 0.04);
    --ig-shadow-hover: 0 10px 36px 0 rgba(36, 21, 44, 0.15), 0 8px 26px rgba(223, 34, 34, 0.08);
    --ig-gradient: linear-gradient(120deg, #fdcb8b 0%, #fd2352 53%, #935cff 100%);
    --ig-dot-bg: #ffe2e2;
    --ig-dot-active: var(--ig-primary);
}

.ig-carousel {
    width: 100vw;
    padding: 0 0 3.5rem 0;
    background: transparent;
    position: relative;
    font-family: 'Poppins', Arial, sans-serif;
}

.ig-carousel__viewport {
    max-width: 1080px;
    margin: 0 auto;
    padding: 2.5rem 1rem;
    position: relative;
    overflow: hidden;
    background: -o-linear-gradient(349deg, #ffffff 85%, #fff5f5 100%);
    background: linear-gradient(101deg, #ffffff 85%, #fff5f5 100%);
    border-radius: var(--ig-radius);
    -webkit-box-shadow: 0 10px 38px 0 rgba(36, 21, 44, 0.04);
            box-shadow: 0 10px 38px 0 rgba(36, 21, 44, 0.04);
}

.ig-carousel__track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: -webkit-transform 0.59s cubic-bezier(.7, 0, .34, 1), -webkit-filter 0.25s;
    transition: -webkit-transform 0.59s cubic-bezier(.7, 0, .34, 1), -webkit-filter 0.25s;
    -o-transition: transform 0.59s cubic-bezier(.7, 0, .34, 1), filter 0.25s;
    transition: transform 0.59s cubic-bezier(.7, 0, .34, 1), filter 0.25s;
    transition: transform 0.59s cubic-bezier(.7, 0, .34, 1), filter 0.25s, -webkit-transform 0.59s cubic-bezier(.7, 0, .34, 1), -webkit-filter 0.25s;
    will-change: transform;
}

.ig-carousel__slide {
    min-width: 320px;
    max-width: 380px;
    width: 85vw;
    margin: 0 1rem;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    pointer-events: none;
    opacity: 0.6;
    -webkit-transform: scale(.97);
        -ms-transform: scale(.97);
            transform: scale(.97);
    -webkit-transition:
        opacity 0.39s cubic-bezier(.4, .13, .67, .97),
        -webkit-transform 0.31s cubic-bezier(.49, .25, .57, 1.1);
    transition:
        opacity 0.39s cubic-bezier(.4, .13, .67, .97),
        -webkit-transform 0.31s cubic-bezier(.49, .25, .57, 1.1);
    -o-transition:
        opacity 0.39s cubic-bezier(.4, .13, .67, .97),
        transform 0.31s cubic-bezier(.49, .25, .57, 1.1);
    transition:
        opacity 0.39s cubic-bezier(.4, .13, .67, .97),
        transform 0.31s cubic-bezier(.49, .25, .57, 1.1);
    transition:
        opacity 0.39s cubic-bezier(.4, .13, .67, .97),
        transform 0.31s cubic-bezier(.49, .25, .57, 1.1),
        -webkit-transform 0.31s cubic-bezier(.49, .25, .57, 1.1);
}

/* Center slide effect: focus, scale up */
.ig-carousel__slide.active {
    pointer-events: auto;
    opacity: 1;
    -webkit-transform: scale(1) translateY(-4px);
        -ms-transform: scale(1) translateY(-4px);
            transform: scale(1) translateY(-4px);
    z-index: 1;
}

/* Slide Card (Super modern, clean) */
.ig-slide-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background: var(--ig-bg);
    border-radius: var(--ig-radius);
    -webkit-box-shadow: var(--ig-shadow);
            box-shadow: var(--ig-shadow);
    overflow: hidden;
    position: relative;
    -webkit-transition: -webkit-box-shadow 0.21s cubic-bezier(.55, .13, .17, 1.15),
        -webkit-transform 0.19s cubic-bezier(.44, .19, .37, 1.15);
    transition: -webkit-box-shadow 0.21s cubic-bezier(.55, .13, .17, 1.15),
        -webkit-transform 0.19s cubic-bezier(.44, .19, .37, 1.15);
    -o-transition: box-shadow 0.21s cubic-bezier(.55, .13, .17, 1.15),
        transform 0.19s cubic-bezier(.44, .19, .37, 1.15);
    transition: box-shadow 0.21s cubic-bezier(.55, .13, .17, 1.15),
        transform 0.19s cubic-bezier(.44, .19, .37, 1.15);
    transition: box-shadow 0.21s cubic-bezier(.55, .13, .17, 1.15),
        transform 0.19s cubic-bezier(.44, .19, .37, 1.15),
        -webkit-box-shadow 0.21s cubic-bezier(.55, .13, .17, 1.15),
        -webkit-transform 0.19s cubic-bezier(.44, .19, .37, 1.15);
    min-height: 360px;
    outline: none;
    text-decoration: none;
    color: #272438;
}

.ig-carousel__slide.active .ig-slide-card,
.ig-slide-card:focus,
.ig-slide-card:hover {
    -webkit-box-shadow: var(--ig-shadow-hover);
            box-shadow: var(--ig-shadow-hover);
    -webkit-transform: scale(1.025) translateY(-4px);
        -ms-transform: scale(1.025) translateY(-4px);
            transform: scale(1.025) translateY(-4px);
}

.ig-slide-card__media {
    position: relative;
    aspect-ratio: 1/1;
    background: #fafbfd;
    overflow: hidden;
}

.ig-slide-card__media img,
.ig-slide-card__media video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -webkit-transition:
        -webkit-transform 0.43s cubic-bezier(.59, .13, .52, 1.22),
        -webkit-filter 0.26s cubic-bezier(.43, .13, .47, 1.01);
    transition:
        -webkit-transform 0.43s cubic-bezier(.59, .13, .52, 1.22),
        -webkit-filter 0.26s cubic-bezier(.43, .13, .47, 1.01);
    -o-transition:
        transform 0.43s cubic-bezier(.59, .13, .52, 1.22),
        filter 0.26s cubic-bezier(.43, .13, .47, 1.01);
    transition:
        transform 0.43s cubic-bezier(.59, .13, .52, 1.22),
        filter 0.26s cubic-bezier(.43, .13, .47, 1.01);
    transition:
        transform 0.43s cubic-bezier(.59, .13, .52, 1.22),
        filter 0.26s cubic-bezier(.43, .13, .47, 1.01),
        -webkit-transform 0.43s cubic-bezier(.59, .13, .52, 1.22),
        -webkit-filter 0.26s cubic-bezier(.43, .13, .47, 1.01);
    display: block;
    border-radius: var(--ig-radius) var(--ig-radius) 0 0;
}

.ig-slide-card:hover .ig-slide-card__media img,
.ig-slide-card:focus .ig-slide-card__media img {
    -webkit-transform: scale(1.035) rotateZ(-0.7deg);
        -ms-transform: scale(1.035) rotate(-0.7deg);
            transform: scale(1.035) rotateZ(-0.7deg);
    -webkit-filter: saturate(1.14) brightness(1.01);
            filter: saturate(1.14) brightness(1.01);
}

.ig-slide-card__icon {
    position: absolute;
    bottom: 1em;
    right: 1em;
    width: 38px;
    height: 38px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    background: var(--ig-gradient);
    color: #fff;
    border-radius: 50%;
    font-size: 1.24em;
    -webkit-box-shadow: 0 2px 10px #e19bff2f;
            box-shadow: 0 2px 10px #e19bff2f;
    border: 2px solid #fff9;
    z-index: 2;
    pointer-events: none;
    opacity: .92;
    -webkit-transition: background 0.15s;
    -o-transition: background 0.15s;
    transition: background 0.15s;
}

.ig-slide-card__caption {
    padding: 1.15em 1.25em 1.41em 1.19em;
    font-size: 1.1rem;
    color: #353255;
    background: -o-linear-gradient(349deg, #fff 94%, #fff6f6 100%);
    background: linear-gradient(101deg, #fff 94%, #fff6f6 100%);
    font-weight: 500;
    border-radius: 0 0 var(--ig-radius) var(--ig-radius);
    min-height: 3.2em;
}

/* Nav Buttons */
.ig-carousel__nav {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 9;
    background: #fff;
    color: var(--ig-primary);
    border-radius: 50%;
    -webkit-box-shadow: 0 1.5px 12px #f8bdbd14;
            box-shadow: 0 1.5px 12px #f8bdbd14;
    font-size: 1.64em;
    width: 48px;
    height: 48px;
    border: none;
    -webkit-transition: background 0.18s, color 0.19s, -webkit-transform 0.22s;
    transition: background 0.18s, color 0.19s, -webkit-transform 0.22s;
    -o-transition: background 0.18s, color 0.19s, transform 0.22s;
    transition: background 0.18s, color 0.19s, transform 0.22s;
    transition: background 0.18s, color 0.19s, transform 0.22s, -webkit-transform 0.22s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    cursor: pointer;
    opacity: 0.93;
}

.ig-carousel__nav:active {
    -webkit-transform: translateY(-50%) scale(.97);
        -ms-transform: translateY(-50%) scale(.97);
            transform: translateY(-50%) scale(.97);
}

.ig-carousel__nav--prev {
    left: 8px;
}

.ig-carousel__nav--next {
    right: 8px;
}

.ig-carousel__nav:disabled {
    opacity: 0.26;
    cursor: not-allowed;
}

/* On hover show micro-elevation */
.ig-carousel__nav:hover:not(:disabled),
.ig-carousel__nav:focus:not(:disabled) {
    background: var(--ig-primary);
    color: #fff;
    -webkit-box-shadow: 0 4px 16px #e1626240;
            box-shadow: 0 4px 16px #e1626240;
}

/* Dots */
.ig-carousel__dots {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 0.85em;
    margin-top: 2.1em;
    z-index: 10;
    position: relative;
}

.ig-carousel__dots button {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--ig-dot-bg);
    border: none;
    -webkit-box-shadow: 0 1.5px 6px #fcdcdc50;
            box-shadow: 0 1.5px 6px #fcdcdc50;
    opacity: .48;
    cursor: pointer;
    -webkit-transition: background .16s, opacity .15s, -webkit-box-shadow .11s;
    transition: background .16s, opacity .15s, -webkit-box-shadow .11s;
    -o-transition: background .16s, box-shadow .11s, opacity .15s;
    transition: background .16s, box-shadow .11s, opacity .15s;
    transition: background .16s, box-shadow .11s, opacity .15s, -webkit-box-shadow .11s;
    outline: none;
    padding: 0;
}

.ig-carousel__dots button.active {
    background: var(--ig-dot-active);
    opacity: 1;
    -webkit-box-shadow: 0 2.5px 10px #eb6a6a43;
            box-shadow: 0 2.5px 10px #eb6a6a43;
}

/* Responsiveness */
@media (max-width: 800px) {
    .ig-carousel__viewport {
        padding: 1rem 0.3rem 2.4rem 0.3rem;
    }

    .ig-carousel__slide {
        min-width: 82vw;
        max-width: 98vw;
        margin: 0 0.2rem;
    }
}

@media (max-width:600px) {
    .ig-carousel__viewport {
        padding: 0.7rem 0.1rem 1.2rem 0.1rem;
    }

    .ig-carousel__slide {
        min-width: 96vw;
        max-width: 99vw;
    }

    .ig-slide-card__caption {
        font-size: 1.01rem;
    }
}

/* ------- MODERN FORM STYLES (Create/Edit Blog) ------- */
.formWrapper {
    max-width: 560px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.93);
    border-radius: 1.2rem;
    -webkit-box-shadow: 0 6px 32px rgba(209, 0, 0, 0.08);
            box-shadow: 0 6px 32px rgba(209, 0, 0, 0.08);
    padding: 2.3rem 1.5rem 2.2rem 1.5rem;
    border: 1.1px solid #ffe5e5;
    -webkit-animation: fadeUpCard 0.98s cubic-bezier(.62, .1, .2, 1.06) 0.2s backwards;
            animation: fadeUpCard 0.98s cubic-bezier(.62, .1, .2, 1.06) 0.2s backwards;
}

.form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1.35rem;
    width: 100%;
}

.form__field {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0.65rem;
    position: relative;
}

.form__field label {
    color: var(--primary);
    font-size: 1.07rem;
    font-weight: 600;
    margin-bottom: 0.17em;
    letter-spacing: 0.01em;
}

.form__field input[type="text"],
.form__field input[type="email"],
.form__field input[type="file"],
.form__field input[type="password"],
.form__field input[type="number"],
.form__field textarea,
.form__field select {
    border: 1.6px solid #ebc8c8;
    border-radius: 0.9em;
    font-size: 1.10rem;
    padding: 1em 1.15em;
    font-family: inherit;
    background: #fff;
    color: #23272b;
    -webkit-transition: border 0.24s, background 0.2s, -webkit-box-shadow 0.18s;
    transition: border 0.24s, background 0.2s, -webkit-box-shadow 0.18s;
    -o-transition: border 0.24s, box-shadow 0.18s, background 0.2s;
    transition: border 0.24s, box-shadow 0.18s, background 0.2s;
    transition: border 0.24s, box-shadow 0.18s, background 0.2s, -webkit-box-shadow 0.18s;
    outline: none;
}

.form__field input[type="file"] {
    padding: .45em .6em;
    font-size: 1.01rem;
}

/* DATE INPUT */
.form__field input[type="date"] {
    border: 1.6px solid #ebc8c8;
    border-radius: 0.9em;
    font-size: 1.10rem;
    padding: 1em 1.15em;
    font-family: inherit;
    background: #fff;
    color: #23272b;
    outline: none;
    -webkit-transition: border 0.24s, background 0.2s, -webkit-box-shadow 0.18s;
    transition: border 0.24s, background 0.2s, -webkit-box-shadow 0.18s;
    -o-transition: border 0.24s, box-shadow 0.18s, background 0.2s;
    transition: border 0.24s, box-shadow 0.18s, background 0.2s;
    transition: border 0.24s, box-shadow 0.18s, background 0.2s, -webkit-box-shadow 0.18s;
}

.form__field input[type="date"]:focus {
    border-color: var(--primary);
    box-shadow: 0 1px 11px rgba(209, 0, 0, 0.09);
}

/* CHECKBOX WRAPPER */
.form__checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 1rem;
    font-weight: 500;
    color: #23272b;
}

.form__checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary); /* Modern checkbox highlight color */
    cursor: pointer;
}

.form__field input:focus,
.form__field textarea:focus,
.form__field select:focus {
    border-color: var(--primary);
    -webkit-box-shadow: 0 1px 11px rgba(209, 0, 0, 0.09);
            box-shadow: 0 1px 11px rgba(209, 0, 0, 0.09);
    background: #fff;
}

.form__field textarea {
    min-height: 120px;
    resize: vertical;
}

input[type="submit"].btn,
button.btn {
    font-size: 1.15rem;
    background: -o-linear-gradient(357deg, var(--primary) 70%, var(--primary-dark) 100%);
    background: linear-gradient(93deg, var(--primary) 70%, var(--primary-dark) 100%);
    color: #fff;
    font-weight: 700;
    border-radius: 2em;
    padding: .81em 2.19em;
    border: none;
    outline: none;
    cursor: pointer;
    letter-spacing: 0.01em;
    margin-top: 1em;
    -webkit-box-shadow: 0 2px 10px rgba(209, 0, 0, 0.07);
            box-shadow: 0 2px 10px rgba(209, 0, 0, 0.07);
    -webkit-transition: background 0.19s, -webkit-transform 0.13s, -webkit-box-shadow 0.14s;
    transition: background 0.19s, -webkit-transform 0.13s, -webkit-box-shadow 0.14s;
    -o-transition: background 0.19s, transform 0.13s, box-shadow 0.14s;
    transition: background 0.19s, transform 0.13s, box-shadow 0.14s;
    transition: background 0.19s, transform 0.13s, box-shadow 0.14s, -webkit-transform 0.13s, -webkit-box-shadow 0.14s;
}

input[type="submit"].btn:hover,
input[type="submit"].btn:focus,
button.btn:hover,
button.btn:focus {
    background: var(--primary-dark);
    -webkit-box-shadow: 0 6px 30px 0 rgba(209, 0, 0, 0.13);
            box-shadow: 0 6px 30px 0 rgba(209, 0, 0, 0.13);
    -webkit-transform: translateY(-2px) scale(1.03);
        -ms-transform: translateY(-2px) scale(1.03);
            transform: translateY(-2px) scale(1.03);
}

.form__field .alert {
    margin: 0.4em 0 0 0;
    /* Less margin for errors attached to fields */
}

@media (max-width: 600px) {
    .formWrapper {
        padding: 1em 0.5em 1.2em 0.5em;
        border-radius: 0.7em;
    }
}


/* --- MODERN TABLE STYLES (Blog List etc) --- */
.tablepress,
table.tablepress {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 2rem auto 1.2rem auto;
    background: #fff;
    -webkit-box-shadow: 0 2px 22px rgba(31, 41, 55, 0.09);
            box-shadow: 0 2px 22px rgba(31, 41, 55, 0.09);
    border-radius: 1.1em;
    overflow: hidden;
    font-size: 1.04rem;
}

.tablepress th,
.tablepress td {
    text-align: left;
    padding: 0.95em 1em;
    border-bottom: 1.5px solid #f0e5e6;
}

.tablepress th {
    background: -o-linear-gradient(353deg, #fcebec 70%, #fff8f8 100%);
    background: linear-gradient(97deg, #fcebec 70%, #fff8f8 100%);
    color: var(--primary-dark, #a30000);
    font-weight: 700;
    letter-spacing: 0.05em;
    font-size: 1.10em;
}

.tablepress tbody tr:last-child td {
    border-bottom: none;
}

.tablepress tr:hover {
    background: var(--primary-light, #fff5f5);
    -webkit-transition: background 0.17s;
    -o-transition: background 0.17s;
    transition: background 0.17s;
}

.tablepress td {
    vertical-align: middle;
}

.tablepress td a.btn {
    margin: 0 0.15em;
}

/* Select all/checkboxes (bigger, modern) */
.tablepress input[type="checkbox"] {
    accent-color: var(--primary, #d10000);
    width: 1.3em;
    height: 1.3em;
    border-radius: 0.25em;
    margin: 0 0.3em 0 0;
    vertical-align: middle;
}

/* Modern Badges (Blog status) */
.badge,
.badge.bg-success,
.badge.bg-secondary {
    display: inline-block;
    font-size: 0.99em;
    font-weight: 600;
    padding: 0.24em 1em 0.24em 1em;
    border-radius: 1.3em;
    margin-right: 0.4em;
    -webkit-box-shadow: 0 2px 8px rgba(209, 0, 0, 0.03);
            box-shadow: 0 2px 8px rgba(209, 0, 0, 0.03);
    vertical-align: middle;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.badge.bg-success {
    background: -o-linear-gradient(358deg, #27df7f 78%, #a8ffc6 100%);
    background: linear-gradient(92deg, #27df7f 78%, #a8ffc6 100%);
    color: #185f3b;
}

.badge.bg-secondary {
    background: -o-linear-gradient(359deg, #e4e5ea 65%, #f7f7f9 100%);
    background: linear-gradient(91deg, #e4e5ea 65%, #f7f7f9 100%);
    color: #789;
}

/* Blog List Bulk Action Buttons */
.blog-bulk-actions .btn {
    margin-right: 0.8em;
    min-width: 145px;
    font-size: 1.04rem;
}

.blog-bulk-actions .btn-success {
    background: -o-linear-gradient(357deg, #1ec551 74%, #90ffbe 100%);
    background: linear-gradient(93deg, #1ec551 74%, #90ffbe 100%);
    color: #fff;
    border: none;
}

.blog-bulk-actions .btn-success:hover,
.blog-bulk-actions .btn-success:focus {
    background: #17a449;
    color: #fff;
    outline: 2px solid #aae9c2;
}

.blog-bulk-actions .btn--main--outline {
    background: #fff;
    color: var(--primary, #d10000);
    border: 2px solid var(--primary, #d10000);
    margin-right: 0.74em;
}

.blog-bulk-actions .btn--main--outline:hover,
.blog-bulk-actions .btn--main--outline:focus {
    background: var(--primary-light, #fff5f5);
    color: var(--primary-dark, #a30000);
    outline: 2px solid var(--primary-light);
}

/* --- Danger Zone (Delete) Button --- */
.btn.btn--danger,
.btn.btn--sm.btn--danger,
input[type="submit"].btn--danger {
    background: -o-linear-gradient(358deg, #ff3131 74%, #facbcb 109%);
    background: linear-gradient(92deg, #ff3131 74%, #facbcb 109%);
    color: #fff !important;
    border: none;
    border-radius: 2em;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 0.71em 2.03em;
    letter-spacing: 0.01em;
    -webkit-box-shadow: 0 2px 15px #d1000023;
            box-shadow: 0 2px 15px #d1000023;
    margin-left: 0.4em;
    margin-right: 0.4em;
    -webkit-transition: background 0.17s, color 0.11s, -webkit-box-shadow 0.18s;
    transition: background 0.17s, color 0.11s, -webkit-box-shadow 0.18s;
    -o-transition: background 0.17s, box-shadow 0.18s, color 0.11s;
    transition: background 0.17s, box-shadow 0.18s, color 0.11s;
    transition: background 0.17s, box-shadow 0.18s, color 0.11s, -webkit-box-shadow 0.18s;
}

.btn.btn--danger:hover,
.btn.btn--sm.btn--danger:hover,
input[type="submit"].btn--danger:hover {
    background: #b70015;
    color: #fff;
    outline: 2px solid #fbb1b1;
    -webkit-box-shadow: 0 8px 28px #f55b5b1a;
            box-shadow: 0 8px 28px #f55b5b1a;
}

.btn.btn--sm.btn--danger {
    font-size: 0.97em;
    padding: 0.41em 1.1em;
}

/* Cancel (secondary) style for dialogs */
.btn.btn--sub {
    background: -o-linear-gradient(354deg, #e8e8e9 70%, #f3f3f5 100%);
    background: linear-gradient(96deg, #e8e8e9 70%, #f3f3f5 100%);
    color: #b55555;
    border: 2px solid #e0c6c6;
    border-radius: 2em;
    font-weight: 600;
    font-size: 1.02rem;
    padding: 0.70em 1.87em;
    letter-spacing: 0.01em;
    margin-left: 0.37em;
    margin-right: 0.37em;
}

.btn.btn--sub:hover,
.btn.btn--sub:focus {
    background: #fff;
    color: var(--primary, #d10000);
    border-color: var(--primary-light, #ffd1d1);
    outline: 2px solid var(--primary-light, #ffd1d1);
}

/* Adjust .content-box (confirm modals etc) */
.content-box {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 1.2rem;
    -webkit-box-shadow: 0 6px 32px rgba(209, 0, 0, 0.07);
            box-shadow: 0 6px 32px rgba(209, 0, 0, 0.07);
    padding: 2.3rem 1.5rem 2.2rem 1.5rem;
    border: 1.1px solid #ffe5e5;
    -webkit-animation: fadeUpCard 0.98s cubic-bezier(.62, .1, .2, 1.06) 0.2s backwards;
            animation: fadeUpCard 0.98s cubic-bezier(.62, .1, .2, 1.06) 0.2s backwards;
}

/* --- Style for visually empty states in tables --- */
.tablepress tbody tr td[colspan] {
    text-align: center;
    color: #aaa;
    font-style: italic;
    background: #faf6f6;
    font-size: 1.08em;
    padding: 1.33em 0.7em;
    border-bottom: none;
}

/* --- Accessibility: Highlight row on keyboard focus in tables --- */
.tablepress tbody tr:focus-within {
    background: var(--primary-light, #fcecec);
    outline: 2px solid var(--primary, #d10000);
}

/* --- Misc: shrink blog admin forms on mobile --- */
@media (max-width: 700px) {

    .tablepress,
    table.tablepress {
        font-size: 0.93rem;
        border-radius: 0.6em;
    }

    .tablepress th,
    .tablepress td {
        padding: 0.77em 0.6em;
    }

    .content-box {
        padding: 0.9em 0.4em;
        border-radius: 0.69em;
    }

    .blog-bulk-actions .btn {
        min-width: 105px;
        font-size: 0.99em;
        padding: 0.6em 1.0em;
    }
}

/* Extra: "Back" button styling for admin/blog forms */
a.backButton,
.backButton {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.35em;
    color: var(--primary-dark, #a30000);
    text-decoration: none;
    background: none;
    border: none;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0.40em 1.05em 0.40em 0.7em;
    border-radius: 0.55em;
    -webkit-transition: background 0.21s, color 0.18s;
    -o-transition: background 0.21s, color 0.18s;
    transition: background 0.21s, color 0.18s;
    margin-bottom: 0.7em;
}

a.backButton i,
.backButton i {
    font-size: 1.2em;
    margin-right: 0.13em;
}

a.backButton:hover,
.backButton:hover,
a.backButton:focus,
.backButton:focus {
    color: var(--primary, #d10000);
    background: var(--primary-light, #fff5f5);
}

/* Extra: forced button touch area for tiny SM buttons */
.btn.btn-sm,
.btn.btn--sm {
    font-size: 0.99em !important;
    padding: 0.33em 1.25em !important;
    min-width: 42px;
}

/* --- Modern Blog Detail Modern Card Styles --- */
.blog-detail-main {
    background: -o-linear-gradient(349deg, #ffffff 94%, #fff4f4 100%);
    background: linear-gradient(101deg, #ffffff 94%, #fff4f4 100%);
    padding: 0 0 2.7rem 0;
    min-height: 100vh;
}

.blog-detail-layout {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    position: relative;
}

.blog-detail-card {
    background: rgba(255, 255, 255, 0.99);
    -webkit-box-shadow: 0 8px 38px 0 rgba(36, 21, 44, 0.12), 0 3px 22px rgba(209, 0, 0, 0.10);
            box-shadow: 0 8px 38px 0 rgba(36, 21, 44, 0.12), 0 3px 22px rgba(209, 0, 0, 0.10);
    border-radius: 2.1rem;
    overflow: hidden;
    margin-bottom: 2.5rem;
    position: relative;
    -webkit-animation: fadeUpCard 1.15s cubic-bezier(.47, .04, .25, 1.16) 0.1s backwards;
            animation: fadeUpCard 1.15s cubic-bezier(.47, .04, .25, 1.16) 0.1s backwards;
    border: 1.2px solid #ffecec;
    padding: 0 0 2.2rem 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    max-width: 100%;
}

@media(max-width:900px) {
    .blog-detail-card {
        border-radius: 1.05rem;
    }
}

.glass-card {
    /* Card glass effect */
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(2px) saturate(103%);
            backdrop-filter: blur(2px) saturate(103%);
}

.blog-detail-featured-wrap {
    width: 100%;
    min-height: 300px;
    aspect-ratio: 16/7;
    overflow: hidden;
    border-radius: 2.1rem 2.1rem 0 0;
    -webkit-box-shadow: 0 2px 28px #e7cadf26;
            box-shadow: 0 2px 28px #e7cadf26;
    background: #f6f7f9;
    margin-bottom: 0.79rem;
    position: relative;
}

.blog-detail-featured {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
    -webkit-transition: -webkit-transform 0.48s cubic-bezier(.53, .11, .41, 1.24);
    transition: -webkit-transform 0.48s cubic-bezier(.53, .11, .41, 1.24);
    -o-transition: transform 0.48s cubic-bezier(.53, .11, .41, 1.24);
    transition: transform 0.48s cubic-bezier(.53, .11, .41, 1.24);
    transition: transform 0.48s cubic-bezier(.53, .11, .41, 1.24), -webkit-transform 0.48s cubic-bezier(.53, .11, .41, 1.24);
    border-radius: 2.1rem 2.1rem 0 0;
}

.blog-detail-featured-wrap:hover .blog-detail-featured {
    -webkit-transform: scale(1.024);
        -ms-transform: scale(1.024);
            transform: scale(1.024);
}

@media(max-width:700px) {

    .blog-detail-featured-wrap,
    .blog-detail-featured {
        border-radius: 1.11rem 1.11rem 0 0;
    }
}

.blog-detail-content {
    padding: 2.8rem 2.3rem 0 2.3rem;
    word-break: break-word;
}

@media(max-width:660px) {
    .blog-detail-content {
        padding: 1.2rem 0.6rem 0 0.6rem;
    }
}

.blog-detail-title {
    font-size: 2.9rem;
    font-weight: 900;
    color: var(--primary, #d10000);
    margin-top: 0;
    margin-bottom: 0.37em;
    line-height: 1.14;
    letter-spacing: -0.015em;
    background: -o-linear-gradient(8deg, var(--primary) 28%, #a30000 100%);
    background: linear-gradient(82deg, var(--primary) 28%, #a30000 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 28px rgba(209, 0, 0, 0.07);
}

@media(max-width:680px) {
    .blog-detail-title {
        font-size: 2.0rem;
    }
}

.blog-detail-meta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 1.2em 1.8em;
    margin: 0 0 1.35em 0;
    font-size: 1.02rem;
    color: var(--meta-font, #9d255e);
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-weight: 500;
    opacity: 0.97;
}

.blog-detail-meta span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.36em;
    white-space: nowrap;
    color: #80173e;
}

.blog-detail-meta i {
    font-size: 1.04em;
    color: var(--primary, #d10000);
    opacity: 0.78;
    margin-right: 0.15em;
}

.blog-detail-body {
    color: #281628;
    font-size: 1.18rem;
    line-height: 1.82;
    margin-bottom: 1rem;
    margin-top: 0.5em;
    word-break: break-word;
    letter-spacing: -0.002em;
    /* Modern blockquote styling for blog body */
}

.blog-detail-body blockquote {
    font-style: italic;
    background: #fad4eb36;
    border-left: 4px solid var(--primary);
    padding: 0.84em 1.3em 0.84em 1.64em;
    margin: 1.8em 0;
    border-radius: 0.37em;
    font-size: 1.11em;
    color: #93285e;
    -webkit-box-shadow: 0 2px 12px #d1000027;
            box-shadow: 0 2px 12px #d1000027;
}

.blog-detail-body h2,
.blog-detail-body h3 {
    margin-top: 2em;
    margin-bottom: 0.55em;
    color: var(--primary);
    font-weight: 700;
    letter-spacing: 0.0em;
}

.blog-detail-body ul,
.blog-detail-body ol {
    margin: 1.3em 2.8em;
}

.blog-detail-body a {
    color: var(--primary);
}

.blog-detail-body a:hover {
    color: #b91414;
    text-decoration: underline;
}

.blog-detail-footer {
    border-top: 1.4px solid #ffe1e1;
    padding: 1.23em 2.3rem 0.18em 2.3rem;
    margin-top: 2em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1.2em;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    /* Add a glass float effect: */
    background: -o-linear-gradient(358deg, #fff 89%, #fff6f6 100%);
    background: linear-gradient(92deg, #fff 89%, #fff6f6 100%);
}

@media(max-width:660px) {
    .blog-detail-footer {
        padding: 0.8em 0.3rem;
    }
}

/* Side: More Posts Modern Styling */
.blog-detail-sidebar {
    position: sticky;
    top: 5.2rem;
    background: rgba(255, 255, 255, 0.95);
    -webkit-box-shadow: 0 4px 28px rgba(209, 0, 0, 0.07);
            box-shadow: 0 4px 28px rgba(209, 0, 0, 0.07);
    border-radius: 1.6rem;
    padding: 1.2em 1em 1.1em 1em;
    min-width: 0;
    -webkit-animation: fadeUpCard 0.89s cubic-bezier(.62, .13, .17, 1.17) 0.23s backwards;
            animation: fadeUpCard 0.89s cubic-bezier(.62, .13, .17, 1.17) 0.23s backwards;
    border: 1.1px solid #fae2e2;
}

@media(max-width:900px) {
    .blog-detail-sidebar {
        border-radius: 0.85rem;
        top: 1.2rem;
    }
}

@media(max-width:670px) {
    .blog-detail-sidebar {
        padding: 0.45em 0.11em;
    }
}

.sidebar-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #d10000cc;
    letter-spacing: 0.01em;
    margin-bottom: 1.18em;
    padding-left: 0.1em;
}

.blog-preview-banner {
    background: #fff3cd;
    border: 1.1px solid #ffeeba;
    color: #9b6c1e;
    padding: 13px 13px 10px 13px;
    border-radius: 0.8em;
    margin-bottom: 1.2em;
    font-weight: 600;
    -webkit-box-shadow: 0 1.5px 10px #fde8b8b3;
            box-shadow: 0 1.5px 10px #fde8b8b3;
    font-size: 1.069em;
    -webkit-animation: fadein 0.62s;
            animation: fadein 0.62s;
}

/* Animations */
.animate-in {
    -webkit-animation: fadeUpCard 1.07s cubic-bezier(.62, .13, .17, 1.17) 0.12s backwards;
            animation: fadeUpCard 1.07s cubic-bezier(.62, .13, .17, 1.17) 0.12s backwards;
}

.animate-in-delayed {
    -webkit-animation: fadeUpCard 0.95s cubic-bezier(.62, .13, .17, 1.17) 0.31s backwards;
            animation: fadeUpCard 0.95s cubic-bezier(.62, .13, .17, 1.17) 0.31s backwards;
}

@keyframes fadeUpCard {
    0% {
        opacity: 0;
        -webkit-transform: translateY(46px) scale(.97);
                transform: translateY(46px) scale(.97);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
    }
}

.category-pill {
    display: inline-block;
    padding: 0.44em 1.3em;
    background: #fff;
    border: 1.9px solid var(--primary-light, #ffd1d1);
    border-radius: 3em;
    color: var(--primary, #d10000);
    font-weight: 600;
    font-size: 1rem;
    margin: 0 0.13em;
    cursor: pointer;
    -webkit-transition: background .23s, color .18s, border .22s, -webkit-box-shadow 0.18s;
    transition: background .23s, color .18s, border .22s, -webkit-box-shadow 0.18s;
    -o-transition: background .23s, color .18s, border .22s, box-shadow 0.18s;
    transition: background .23s, color .18s, border .22s, box-shadow 0.18s;
    transition: background .23s, color .18s, border .22s, box-shadow 0.18s, -webkit-box-shadow 0.18s;
    -webkit-box-shadow: 0 1.5px 7px #e9e6e627;
            box-shadow: 0 1.5px 7px #e9e6e627;
    letter-spacing: 0.01em;
    text-decoration: none;
    outline: none;
}

.category-pill:hover,
.category-pill:focus {
    background: var(--primary-light, #ffd1d1);
    color: #fff;
    border-color: var(--primary-dark, #a30000);
}

.category-pill.active,
.category-pill[aria-current="page"] {
    background: -o-linear-gradient(358deg, #d10000 60%, #a30000 100%);
    background: linear-gradient(92deg, #d10000 60%, #a30000 100%);
    color: #fff;
    border-color: #d10000;
    -webkit-box-shadow: 0 8px 28px #f55b5b14;
            box-shadow: 0 8px 28px #f55b5b14;
}

.fade-scroll {
    opacity: 0;
    -webkit-transform: translateY(20px) scale(.97);
        -ms-transform: translateY(20px) scale(.97);
            transform: translateY(20px) scale(.97);
    -webkit-transition: opacity 0.75s cubic-bezier(.61, .09, .41, 1.02), -webkit-transform 0.85s cubic-bezier(.58, .04, .34, 1.11);
    transition: opacity 0.75s cubic-bezier(.61, .09, .41, 1.02), -webkit-transform 0.85s cubic-bezier(.58, .04, .34, 1.11);
    -o-transition: opacity 0.75s cubic-bezier(.61, .09, .41, 1.02), transform 0.85s cubic-bezier(.58, .04, .34, 1.11);
    transition: opacity 0.75s cubic-bezier(.61, .09, .41, 1.02), transform 0.85s cubic-bezier(.58, .04, .34, 1.11);
    transition: opacity 0.75s cubic-bezier(.61, .09, .41, 1.02), transform 0.85s cubic-bezier(.58, .04, .34, 1.11), -webkit-transform 0.85s cubic-bezier(.58, .04, .34, 1.11);
    will-change: opacity, transform;
}

.fade-scroll.visible {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
        -ms-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
}

.profile-hero-info .profile-message-btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.42em;
    margin-left: 0.77em;
    font-size: 1.01rem;
    background: var(--primary);
    color: #fff;
    padding: 0.51em 1.1em;
    border-radius: 2em;
    font-weight: 600;
    -webkit-box-shadow: 0 2px 8px rgba(209, 0, 0, 0.06);
            box-shadow: 0 2px 8px rgba(209, 0, 0, 0.06);
    text-decoration: none;
    -webkit-transition: background 0.16s, color 0.14s, -webkit-box-shadow 0.13s;
    transition: background 0.16s, color 0.14s, -webkit-box-shadow 0.13s;
    -o-transition: background 0.16s, color 0.14s, box-shadow 0.13s;
    transition: background 0.16s, color 0.14s, box-shadow 0.13s;
    transition: background 0.16s, color 0.14s, box-shadow 0.13s, -webkit-box-shadow 0.13s;
}

.profile-hero-info .profile-message-btn:hover,
.profile-hero-info .profile-message-btn:focus {
    background: var(--primary-dark);
    color: #fff;
    -webkit-box-shadow: 0 6px 22px rgba(209, 0, 0, 0.11);
            box-shadow: 0 6px 22px rgba(209, 0, 0, 0.11);
    outline: 2px solid var(--primary-light);
}

.profile-message-btn i {
    font-size: 1.08em;
}

.profile-message-btn-text {
    display: inline;
}

/* --- Profile Message Button: Stack below name on mobile and always show text --- */
@media (max-width: 700px) {
    .profile-hero-info h1 {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
            -ms-flex-direction: column !important;
                flex-direction: column !important;
        /* Stack children vertically */
        -webkit-box-align: start !important;
            -ms-flex-align: start !important;
                align-items: flex-start !important;
        gap: 0.5em !important;
    }

    .profile-hero-info .profile-message-btn {
        margin-left: 0 !important;
        /* Remove left margin when stacked */
        margin-top: 0.7em !important;
        /* Add top margin for spacing */
        -ms-flex-item-align: start !important;
            align-self: flex-start !important;
        /* Align to start */
        width: auto;
        min-width: 0;
    }
}


.sponsors-section {
    padding: 3.2rem 1rem 2.6rem 1rem;
    background: -webkit-gradient(linear, left top, right top, from(#fff), color-stop(120%, #ffe8e8));
    background: -o-linear-gradient(left, #fff, #ffe8e8 120%);
    background: linear-gradient(90deg, #fff, #ffe8e8 120%);
    border-radius: 2.1rem;
    -webkit-box-shadow: 0 8px 36px rgba(31, 41, 55, 0.08), 0 2px 8px rgba(209, 0, 0, 0.04);
            box-shadow: 0 8px 36px rgba(31, 41, 55, 0.08), 0 2px 8px rgba(209, 0, 0, 0.04);
    margin: 2.2rem auto 2.5rem auto;
    max-width: 1100px;
    text-align: center;
}

.sponsors-title {
    color: var(--primary);
    font-weight: 800;
    font-size: 2rem;
    letter-spacing: 0.01em;
    margin-bottom: 2rem;
}

.sponsors-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 2.4rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.sponsor-card {
    background: #fff;
    border-radius: 1.3rem;
    -webkit-box-shadow: 0 2px 14px rgba(209, 0, 0, 0.07);
            box-shadow: 0 2px 14px rgba(209, 0, 0, 0.07);
    padding: 1rem 1.6rem 0.75rem 1.6rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-decoration: none;
    -webkit-transition: -webkit-box-shadow 0.18s, -webkit-transform 0.14s;
    transition: -webkit-box-shadow 0.18s, -webkit-transform 0.14s;
    -o-transition: box-shadow 0.18s, transform 0.14s;
    transition: box-shadow 0.18s, transform 0.14s;
    transition: box-shadow 0.18s, transform 0.14s, -webkit-box-shadow 0.18s, -webkit-transform 0.14s;
    min-width: 150px;
    max-width: 190px;
    margin-bottom: 0.4rem;
}

.sponsor-card img {
    width: 80px;
    height: 80px;
    -o-object-fit: contain;
       object-fit: contain;
    margin-bottom: 0.7rem;
    background: #fafbfc;
    border-radius: 0.9rem;
    -webkit-box-shadow: 0 1.5px 7px #e9e6e627;
            box-shadow: 0 1.5px 7px #e9e6e627;
}

.sponsor-card span {
    color: var(--primary-dark);
    font-weight: 700;
    font-size: 1.08rem;
    margin-top: 0.2rem;
    white-space: pre-line;
    text-align: center;
}

.sponsor-card:hover,
.sponsor-card:focus {
    -webkit-box-shadow: 0 6px 28px rgba(209, 0, 0, 0.13);
            box-shadow: 0 6px 28px rgba(209, 0, 0, 0.13);
    -webkit-transform: translateY(-4px) scale(1.03);
        -ms-transform: translateY(-4px) scale(1.03);
            transform: translateY(-4px) scale(1.03);
}

@media (max-width: 700px) {
    .sponsors-list {
        gap: 1.15rem;
    }

    .sponsor-card {
        min-width: 115px;
        max-width: 140px;
        padding: 0.6rem 0.5rem 0.44rem 0.5rem;
    }

    .sponsor-card img {
        width: 60px;
        height: 60px;
    }

    .sponsors-title {
        font-size: 1.24rem;
        margin-bottom: 1.1rem;
    }
}


.home-news-header {
    width: 100%;
    max-width: 1150px;
    margin: 3.3rem auto 0.6rem auto;
    padding: 2.2rem 1rem 1.8rem 1rem;
    background: linear-gradient(91deg, #fff 73%, #ffe9e9 100%);
    border-radius: 1.7rem;
    box-shadow: 0 6px 36px 0 rgba(31,41,55,0.06), 0 2px 8px rgba(209,0,0,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.25s;
    animation: fadeUpCard 1s cubic-bezier(.5,.1,.35,1.09) 0.12s backwards;
}

.home-news-header__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    max-width: 980px;
    gap: 2.2rem;
    flex-wrap: wrap;
}

.home-news-header__title {
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -0.012em;
    color: var(--primary, #d10000);
    margin: 0 0 0.53em 0;
    display: flex;
    gap: 0.33em;
    align-items: center;
    background: var(--primary);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 24px rgba(209,0,0,0.08);
    opacity: 0;
    animation: hero-h1-in 0.7s 0.22s forwards;
}

.home-news-header__icon {
    font-size: 1.19em;
    color: var(--primary-dark, #a30000);
    margin-right: 0.24em;
    display: inline-block;
    opacity: 0.85;
    filter: drop-shadow(0px 2px 4px #ffd2d2a2);
    animation: hero-h1-in 0.7s 0.29s forwards;
    opacity: 0;
}

.home-news-header__subtitle {
    font-size: 1.17rem;
    font-weight: 400;
    color: #29224a;
    margin: 0 0 0.19em 0;
    opacity: 0;
    animation: hero-p-in 0.74s 0.38s forwards;
}

.home-news-header__cta {
    display: inline-flex;
    gap: 0.46em;
    align-items: center;
    background: var(--primary);
    color: #fff;
    font-size: 1.08rem;
    font-weight: 700;
    border-radius: 2em;
    padding: 0.7em 2.1em;
    box-shadow: 0 4px 20px 0 rgba(209,0,0,0.11);
    text-decoration: none;
    border: none;
    outline: none;
    margin-top: 0.2em;
    transition: background 0.21s, box-shadow 0.18s, transform 0.12s;
    opacity: 0;
    animation: hero-btn-in 0.74s 0.51s forwards;
}

.home-news-header__cta i {
    margin-left: 0.32em;
    font-size: 1.08em;
}

.home-news-header__cta:hover,
.home-news-header__cta:focus {
    background: var(--primary-dark, #a30000);
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 8px 30px 0 rgba(209,0,0,0.14);
    outline: 2px solid var(--primary-light, #ffd1d1);
}

@media (max-width: 700px) {
    .home-news-header {
        padding: 1.2rem 0.3rem 1.1rem 0.3rem;
        border-radius: 1.05rem;
    }
    .home-news-header__inner {
        flex-direction: column;
        gap: 1.2rem;
        align-items: flex-start;
        max-width: 99vw;
    }
    .home-news-header__title {
        font-size: 1.25rem;
        margin-bottom: 0.4em;
        text-align: left;
    }
    .home-news-header__subtitle {
        font-size: 1.01rem;
    }
    .home-news-header__cta {
        font-size: 0.97rem;
        padding: 0.61em 1.3em;
        margin-top: 0.8em;
        border-radius: 1.2em;
    }
}

@media (max-width: 420px) {
    .home-news-header__inner {
        padding-right: 0;
    }
}

.blackbelt-main--wideleft {
    grid-template-columns: 2fr 1fr;
}

@media (max-width: 950px) {
    .blackbelt-main--wideleft {
        grid-template-columns: 1fr;
        /* Stack columns on smaller screens */
    }
}


.support-wka-img {
    max-width: 250px;  /* Adjust the size as needed */
    height: auto;
    display: block;
}