/* =========================================================
   SYMMETRY '25
   Modern Editorial Mathematics Festival
   ========================================================= */

:root {
    --black: #191410;
    --white: #ffffff;
    --paper: #f6f1e6;
    --paper-dark: #ece3cf;
    --soft: #efe6d3;
    --muted: #766b57;
    --line: rgba(25, 20, 16, 0.14);
    --accent: #7a1f30;
    --accent-soft: #a5445a;
    --gold: #a9812f;
    --gold-soft: #d4b46a;

    --serif: "Instrument Serif", Georgia, serif;
    --sans: "DM Sans", Arial, sans-serif;

    --container: 1240px;

    --shadow:
        0 20px 60px rgba(17, 17, 17, 0.08);

    --transition:
        260ms cubic-bezier(.2,.7,.2,1);
}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--black);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
}

button,
input,
textarea {
    font: inherit;
}

button {
    border: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

p,
h1,
h2,
h3,
figure {
    margin-top: 0;
}

::selection {
    background: var(--black);
    color: var(--white);
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}


/* =========================================================
   CONTAINER
========================================================= */

.container {
    width: min(
        calc(100% - 48px),
        var(--container)
    );

    margin-inline: auto;
}

.section {
    padding: 120px 0;
}

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

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

.section-soft {
    background: var(--soft);
}


/* =========================================================
   HEADER / NAVIGATION
========================================================= */

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1000;

    transition:
        background var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

.site-header.scrolled {
    background: rgba(244, 241, 235, 0.94);
    backdrop-filter: blur(18px);
    box-shadow: 0 8px 35px rgba(17, 17, 17, 0.08);
}

.navbar {
    position: relative;

    width: min(
        calc(100% - 48px),
        var(--container)
    );

    min-height: 86px;
    margin-inline: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.brand-mark {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: #111111; 
    color: #ffffff;      
    font-family: "Instrument Serif", Georgia, serif;
    font-size: 23px;
    
    border: none; 
    border-radius: 0; 
}

.brand-text {
    display: flex;
    align-items: baseline;
    gap: 4px;

    letter-spacing: .08em;
    font-size: 13px;
}

.brand-text strong {
    font-weight: 700;
}

.brand-text small {
    font-size: 10px;
    color: var(--accent);
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav-link {
    position: relative;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;

    color: #423a2f;

    transition:
        color var(--transition);
}

.nav-link::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -7px;

    width: 100%;
    height: 1px;

    background: var(--black);

    transform: scaleX(0);
    transform-origin: right;

    transition: transform var(--transition);
}

.nav-link:hover {
    color: var(--accent);
}

.nav-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-register {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 11px 17px;

    background: var(--black);
    color: var(--white);

    font-size: 13px;
    font-weight: 600;

    transition:
        background var(--transition),
        transform var(--transition);
}

.nav-register:hover {
    background: var(--accent);
    transform: translateY(-2px);
}

.nav-register span {
    font-size: 15px;
}

.nav-toggle {
    display: none;

    width: 44px;
    height: 44px;

    background: transparent;

    cursor: pointer;
}

.nav-toggle span {
    display: block;

    width: 24px;
    height: 1px;

    margin: 6px auto;

    background: var(--black);

    transition:
        transform var(--transition);
}


/* =========================================================
   HERO
========================================================= */

.hero {
    position: relative;
    min-height: 100vh;

    display: flex;
    align-items: center;

    overflow: hidden;

    border-bottom: 1px solid var(--line);
}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.hero-grid {
    position: absolute;
    inset: 0;

    opacity: .45;

    background-image:
        linear-gradient(
            rgba(17,17,17,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(17,17,17,.045) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        radial-gradient(
            circle at 70% 45%,
            black,
            transparent 65%
        );
}


/* =========================================================
   HERO CONTAINER
========================================================= */

.hero-container {
    position: relative;
    z-index: 3;

    display: grid;
    grid-template-columns: 1.05fr .95fr;

    gap: 80px;
    align-items: center;

    padding-top: 90px;
    padding-bottom: 70px;
}


.hero-copy {
    max-width: 690px;
}


/* =========================================================
   EYEBROW
========================================================= */

.eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 34px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .15em;
    text-transform: uppercase;
}

.eyebrow span {
    color: var(--accent);
}


/* =========================================================
   HERO TITLE
========================================================= */

.hero-title {
    display: flex;
    flex-direction: column;

    max-width: 850px;

    margin: 0 0 34px;

    font-family: var(--serif);

    font-weight: 400;
    line-height: .86;

    letter-spacing: -.045em;
}


/* =========================================================
   "THE BEAUTY OF"
========================================================= */

.hero-title-small {
    display: block;

    margin-bottom: .12em;

    font-size: clamp(
        1.4rem,
        2vw,
        2.5rem
    );

    font-weight: 400;

    letter-spacing: -.035em;
}

/* =========================================================
   SECOND LINE
   GRAPH + SYMMETRY
========================================================= */

.hero-title-visual {
    display: flex;
    align-items: center;

    min-height: 8.0em;

    white-space: nowrap;
}


/* =========================================================
   GEOMETRIC GRAPH
========================================================= */

.hero-graph {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: clamp(
        4.5rem,
        8vw,
        8rem
    );

    height: clamp(
        4.5rem,
        8vw,
        8rem
    );

    margin-right: -.15em;

    flex-shrink: 0;
    transform: translateY(-15%);
    z-index: 2;
}


/*
   The actual circular mathematical graphic
*/

.hero-graph img {
    display: block;

    width: auto;
    height: 200%;
    max-width: 100%;

    object-fit: contain;

    transform-origin: center center;

    animation:
        heroGraphRotate
        22s
        linear
        infinite;
}

/* =========================================================
   GRAPH ROTATION
========================================================= */

@keyframes heroGraphRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   SYMMETRY ANAGRAM
========================================================= */

.hero-symmetry {
    position: relative;

    display: flex;
    align-items: center;

    width: clamp(
        15rem,
        28vw,
        31rem
    );

    /*
       Crop the empty space above and below
       the actual Symmetry artwork.
    */
    height: 0.80em;

    /* overflow: hidden; */

    flex: 0 0 auto;

    z-index: 1;
}


.hero-symmetry img {
    display: block;

    width: 100%;
    height: auto;

    max-width: none;

    object-fit: contain;

    /*
       Move the SVG inside the cropped window.
       Adjust this slightly if necessary.
    */
    /* transform: translateY(-1%); */
}

/*
   Symmetry SVG itself
*/

.hero-symmetry img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.hero-description {
    max-width: 590px;

    margin-bottom: 38px;

    color: #5c5344;

    font-size: 17px;
    line-height: 1.7;
    transform: translateY(-10%);
}


/* =========================================================
   HERO META
========================================================= */

.hero-meta {
    display: flex;
    gap: 55px;

    margin-bottom: 40px;
}

.hero-meta div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hero-meta span {
    color: var(--muted);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .14em;
    text-transform: uppercase;
}

.hero-meta strong {
    font-size: 14px;
}


/* =========================================================
   HERO ACTIONS
========================================================= */

.hero-actions {
    display: flex;
    align-items: center;
    gap: 30px;
}


/* =========================================================
   BUTTON
========================================================= */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    min-height: 54px;

    padding: 0 24px;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform var(--transition),
        background var(--transition),
        color var(--transition),
        border-color var(--transition);
}

.button:hover {
    transform: translateY(-3px);
}


.button-dark {
    background: var(--black);
    color: var(--white);
}

.button-dark:hover {
    background: var(--accent);
}


.button-outline {
    border: 1px solid rgba(255,255,255,.4);

    color: var(--white);

    background: transparent;
}

.button-outline:hover {
    background: var(--white);
    color: var(--black);
}


.full-width {
    width: 100%;
}


/* =========================================================
   TEXT LINK
========================================================= */

.text-link,
.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    font-size: 13px;
    font-weight: 700;

    transition:
        color var(--transition);
}

.text-link:hover,
.arrow-link:hover {
    color: var(--accent);
}


.text-link span,
.arrow-link span {
    transition:
        transform var(--transition);
}


.text-link:hover span,
.arrow-link:hover span {
    transform:
        translate(3px, -3px);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

    .hero-container {
        grid-template-columns: 1fr;

        gap: 50px;

        padding-top: 120px;
    }

    .hero-copy {
        max-width: 100%;
    }

}


@media (max-width: 600px) {

    .hero-title-small {
        font-size: clamp(
            1.1rem,
            4vw,
            1.4rem
        );
    }

    .hero-title-visual {
        margin-top: .08em;
    }

    .hero-symmetry {
        width: min(
            72vw,
            19rem
        );
    }

    .hero-description {
        font-size: 15px;
    }

    .hero-meta {
        flex-wrap: wrap;
        gap: 25px 40px;
    }

    .hero-actions {
        flex-wrap: wrap;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero-graph img {
        animation: none;
    }

}
/* =========================================================
   HERO GEOMETRY
========================================================= */

.hero-visual {
    min-height: 620px;

    display: grid;
    place-items: center;
}

.geometry-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.geometry {
    position: relative;

    width: min(42vw, 570px);
    aspect-ratio: 1;

    transform: rotate(-8deg);
}

/* =========================================================
   HERO GEOMETRY — DIGITAL READOUT
   A quiet, editorial-style caption beneath the shape,
   not a literal LCD/digital-clock widget. Tabular
   numerals keep digit width stable as it ticks.
========================================================= */

.geometry-clock {
    display: flex;
    align-items: baseline;
    gap: 10px;

    margin-top: 22px;

    padding-top: 14px;
    border-top: 1px solid var(--line);

    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;

    color: var(--muted);

    font-variant-numeric: tabular-nums;
}

.geometry-clock-day {
    color: var(--accent);
}

.geometry-clock-divider {
    width: 3px;
    height: 3px;

    border-radius: 50%;
    background: var(--muted);

    opacity: .5;
}

.geometry-clock-time {
    letter-spacing: 0.15em;
    word-spacing: 0.2em;    
    color: var(--black);
}

.time-unit {
    color: #8C0000;
    margin-right: 6px; 
}

.time-unit:last-child {
    margin-right: 0;
}

.geometry-clock-time span {
    display: inline-block;
    transition: opacity .15s ease;
}

.geometry-clock-time span.is-updating {
    opacity: .35;
}

@media (max-width: 640px) {

    .geometry-clock {
        font-size: 10.5px;
        gap: 8px;
    }

}

.geometry-circle,
.geometry-square,
.geometry-node,
.geometry-line {
    position: absolute;
}

.geometry-circle {
    border: 1px solid rgba(17,17,17,.45);
    border-radius: 50%;
}

.circle-large {
    inset: 4%;
}

.circle-medium {
    inset: 19%;
    border-style: dashed;
}

.circle-small {
    inset: 37%;
    border-color: var(--accent);
}

.geometry-square {
    inset: 20%;

    border: 1px solid rgba(17,17,17,.6);

    transform: rotate(45deg);
}

.square-two {
    inset: 31%;

    border-color: var(--accent);

    transform: rotate(20deg);
}

.geometry-line {
    left: 0;
    top: 50%;

    width: 100%;
    height: 1px;

    background: rgba(17,17,17,.35);
}

.line-2 {
    transform: rotate(45deg);
}

.line-3 {
    transform: rotate(-45deg);
}

.geometry-node {
    width: 13px;
    height: 13px;

    border: 2px solid var(--black);
    border-radius: 50%;

    background: var(--paper);

    z-index: 4;
}

.node-1 {
    left: 50%;
    top: 0;
}

.node-2 {
    right: 0;
    top: 50%;
}

.node-3 {
    left: 50%;
    bottom: 0;
}

.node-4 {
    left: 0;
    top: 50%;
}

.geometry-center {
    position: absolute;
    inset: 43%;

    display: grid;
    place-items: center;

    background: var(--black);
    color: var(--white);

    border-radius: 50%;

    font-family: var(--serif);
    font-size: 45px;

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

.hero-equation {
    position: absolute;

    color: rgba(17,17,17,.25);

    font-family: var(--serif);
    font-style: italic;

    pointer-events: none;
}

.equation-one {
    right: 8%;
    top: 25%;
    font-size: 30px;
}

.equation-two {
    left: 5%;
    bottom: 15%;
    font-size: 20px;
}

.hero-orbit {
    position: absolute;

    border: 1px solid rgba(182,59,46,.18);
    border-radius: 50%;

    pointer-events: none;
}

.orbit-one {
    width: 600px;
    height: 180px;

    right: -130px;
    top: 12%;

    transform: rotate(30deg);
}

.orbit-two {
    width: 480px;
    height: 160px;

    right: 2%;
    bottom: 5%;

    transform: rotate(-30deg);
}

.hero-bottom {
    position: absolute;
    z-index: 5;

    left: 0;
    right: 0;
    bottom: 25px;

    width: min(
        calc(100% - 48px),
        var(--container)
    );

    margin-inline: auto;

    display: flex;
    justify-content: space-between;

    color: var(--muted);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15em;
}


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

.section-kicker {
    display: flex;
    align-items: center;
    gap: 16px;

    margin-bottom: 30px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
}

.section-kicker span:first-child {
    color: var(--accent);
}

.section-heading-row {
    display: flex;
    justify-content: space-between;
    gap: 50px;

    margin-bottom: 70px;
}

.section-heading-row.light {
    color: var(--white);
}

.section-title {
    max-width: 750px;

    margin-bottom: 0;

    font-family: var(--serif);
    font-size: clamp(3.4rem, 6vw, 6.5rem);
    font-weight: 400;
    line-height: .9;
    letter-spacing: -.035em;
    
}

.section-side-note {
    max-width: 330px;

    align-self: end;

    margin-bottom: 8px;

    color: var(--muted);
    font-size: 14px;
}

.light .section-side-note {
    color: rgba(255,255,255,.55);
}


/* =========================================================
   INTRO
========================================================= */

.intro {
    background: var(--paper);
}

.intro-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 100px;

    padding-bottom: 80px;

    border-bottom: 1px solid var(--line);
}

.intro-grid h2 {
    max-width: 700px;

    margin: 0;

    font-family: var(--serif);
    font-size: clamp(3.4rem, 6vw, 6.5rem);
    font-weight: 400;
    line-height: .9;
    letter-spacing: -.035em;
}

.intro-copy {
    align-self: end;
}

.intro-copy p {
    color: #5c5344;
    font-size: 16px;
}

.intro-copy .arrow-link {
    margin-top: 20px;
}

.intro-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    padding-top: 45px;
}

.stat {
    padding-right: 25px;

    border-right: 1px solid var(--line);
}

.stat:not(:first-child) {
    padding-left: 25px;
}

.stat:last-child {
    border-right: 0;
}

.stat strong {
    display: block;

    margin-bottom: 5px;

    font-family: var(--serif);
    font-size: 48px;
    font-weight: 400;
}

.stat span {
    color: var(--muted);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}


/* =========================================================
   SPEAKERS
========================================================= */

.speaker-list {
    border-top: 1px solid var(--line);
}

.speaker {
    display: grid;
    grid-template-columns: 70px 310px 1fr;
    gap: 50px;

    padding: 55px 0;

    border-bottom: 1px solid var(--line);
}

.speaker-number {
    padding-top: 5px;

    color: var(--accent);

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

.speaker-image {
    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: var(--paper-dark);
}

.speaker-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter: grayscale(100%);

    transition:
        filter var(--transition),
        transform 700ms cubic-bezier(.2,.7,.2,1);
}

.speaker:hover .speaker-image img {
    filter: grayscale(0);
    transform: scale(1.04);
}

.speaker-content {
    max-width: 620px;
    align-self: center;
}

.speaker-role {
    margin-bottom: 14px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.speaker h3 {
    margin-bottom: 12px;

    font-family: var(--serif);
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 400;
    line-height: .9;
}

.speaker-talk {
    margin-bottom: 25px;

    color: var(--accent);

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

.speaker-content > p:last-child {
    max-width: 550px;
    color: var(--muted);
}


/* =========================================================
   EVENTS
========================================================= */

.event-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;

    margin-top: 10px;

    background: rgba(255,255,255,.16);
}

.event-card {
    position: relative;

    min-height: 340px;
    padding: 34px;

    background: var(--black);

    display: flex;
    flex-direction: column;

    transition:
        background var(--transition),
        transform var(--transition);
}

.event-card:hover {
    background: #211a13;
}

.event-large {
    grid-row: span 2;
}

.event-large .event-icon {
    margin-bottom: 24px;
}

.event-photo-slideshow {
    position: relative;
    flex: 1;
    min-height: 140px;
    margin-bottom: 24px;
    overflow: hidden;
    border-radius: 6px;
    background: rgba(255,255,255,.04);
}

.event-photo-slideshow img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.event-photo-slideshow img.is-active {
    opacity: 1;
}

.event-wide {
    grid-column: span 2;
}

.event-index {
    position: absolute;

    top: 30px;
    right: 30px;

    color: rgba(255,255,255,.3);

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

.event-icon {
    width: 55px;
    height: 55px;

    display: grid;
    place-items: center;

    margin-bottom: auto;

    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%;

    color: var(--accent);

    font-family: var(--serif);
    font-size: 25px;
}

.event-card h3 {
    margin-bottom: 12px;

    font-family: var(--serif);
    font-size: 42px;
    font-weight: 400;
    line-height: .95;
}

.event-card p {
    max-width: 340px;

    margin-bottom: 22px;

    color: rgba(255,255,255,.55);

    font-size: 14px;
}

.event-card a {
    display: inline-flex;
    align-items: center;

    color: var(--white);

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

    transition: color var(--transition);
}

.event-card a:hover {
    color: var(--accent-soft);
}


/* =========================================================
   GUIDELINES
========================================================= */

.guidelines-header {
    display: grid;
    grid-template-columns: 1fr .7fr;
    gap: 100px;

    margin-bottom: 65px;
}

.guidelines-header p {
    align-self: end;

    max-width: 500px;

    color: var(--muted);
}

.guideline-list {
    border-top: 1px solid var(--line);
}

.guideline-row {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 30px;
    align-items: center;

    padding: 26px 0;

    border-bottom: 1px solid var(--line);

    transition:
        padding var(--transition),
        color var(--transition);
}

.guideline-row:hover {
    padding-left: 12px;
    color: var(--accent);
}

.guideline-row span {
    color: var(--muted);

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

.guideline-row strong {
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 400;
}

.guideline-row span:last-child {
    text-align: right;
}


/* =========================================================
   REGISTRATION
========================================================= */

.registration-container {
    display: grid;
    grid-template-columns: 1fr 430px;
    gap: 100px;
    align-items: center;
}

.registration-copy {
    max-width: 700px;
}

.registration-copy .section-kicker {
    color: var(--white);
}

.registration-copy .section-kicker span:first-child {
    color: rgba(255,255,255,.6);
}

.registration-copy p {
    color: rgba(255,255,255,.75);
}

.registration-points {
    margin-top: 45px;

    border-top: 1px solid rgba(255,255,255,.25);
}

.registration-points > div {
    display: grid;
    grid-template-columns: 45px 1fr;
    gap: 20px;

    padding: 18px 0;

    border-bottom: 1px solid rgba(255,255,255,.25);
}

.registration-points span {
    color: rgba(255,255,255,.5);

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

.registration-points p {
    margin: 0;

    color: var(--white);
}

.registration-panel {
    background: var(--white);
    color: var(--black);

    box-shadow: 0 30px 70px rgba(0,0,0,.18);
}

.panel-top {
    display: flex;
    justify-content: space-between;

    padding: 18px 22px;

    background: var(--black);
    color: var(--white);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
}

.panel-body {
    padding: 35px;
}

.fee-box {
    display: flex;
    flex-direction: column;

    padding-bottom: 25px;
    margin-bottom: 25px;

    border-bottom: 1px solid var(--line);
}

.fee-box span {
    color: var(--muted);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.fee-box strong {
    margin-top: 8px;

    font-family: var(--serif);
    font-size: 28px;
    font-weight: 400;
}

.payment-note {
    color: var(--muted);

    font-size: 13px;
}

.registration-panel .button + .button {
    margin-top: 10px;
}

.small-note {
    margin: 20px 0 0;

    color: var(--muted);

    font-size: 11px;
}


/* =========================================================
   SCHEDULE
========================================================= */

.schedule-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;

    margin-bottom: 65px;
}

.timeline {
    border-top: 1px solid var(--line);
}

.timeline-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 50px;

    padding: 30px 0;

    border-bottom: 1px solid var(--line);
}

.timeline-row time {
    font-family: var(--serif);
    font-size: 30px;
    align-self: center;
}

.timeline-row h3 {
    margin-bottom: 4px;

    font-family: var(--serif);
    font-size: 30px;
    font-weight: 400;
}

.timeline-row p {
    margin: 0;

    color: var(--muted);
}


/* =========================================================
   GALLERY
========================================================= */

.gallery-controls {
    display: flex;
    gap: 8px;
}

.gallery-control {
    width: 50px;
    height: 50px;

    border: 1px solid rgba(255,255,255,.25);

    background: transparent;
    color: var(--white);

    cursor: pointer;

    transition:
        background var(--transition),
        color var(--transition);
}

.gallery-control:hover {
    background: var(--white);
    color: var(--black);
}

.gallery-stage {
    position: relative;

    aspect-ratio: 16 / 8;

    overflow: hidden;

    background: #1f1811;
}

.gallery-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 600ms ease,
        visibility 600ms ease;
}

.gallery-slide.active {
    opacity: 1;
    visibility: visible;
}

.gallery-slide img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.gallery-counter {
    display: flex;
    justify-content: flex-end;
    gap: 7px;

    margin-top: 15px;

    color: rgba(255,255,255,.5);

    font-size: 11px;
}

.gallery-counter span:first-child {
    color: var(--white);
}

/* =========================================================
   SPONSORS — TWO AT A TIME
========================================================= */

.sponsor-grid {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 210px;

    overflow: hidden;

    background: var(--accent);

    border-top: 1px solid var(--accent);
    border-bottom: 1px solid var(--accent);
}

/* =========================================================
   SPONSORS
   Continuous dark wine-red section
========================================================= */

.Sponser {
    position: relative;

    overflow: hidden;

    background: #641522;
    color: var(--white);

    padding-top: 95px;
    padding-bottom: 0;

    border-top: 1px solid rgba(255,255,255,.08);
}


/* =========================================================
   SPONSOR HEADING
========================================================= */

.Sponser .container {
    position: relative;
    z-index: 3;
}


.sponsor-layout {
    display: grid;

    grid-template-columns: .95fr 1.15fr;

    align-items: center;

    gap: 80px;

    padding-bottom: 95px;
}


/*
   Text column: kicker, heading, then
   description + "Know more" stacked below it.
*/

.sponsor-text {
    display: flex;
    flex-direction: column;
}


.sponsor-text .section-title {
    margin-bottom: 26px;
}


.sponsor-text .section-side-note {
    max-width: 460px;

    margin: 0;
}


.sponsor-text .sponsor-more {
    margin-left: 0;
}


/* =========================================================
   SECTION KICKER
========================================================= */

.Sponser .section-kicker {

    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 30px;

    color: var(--white);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .16em;

    text-transform: uppercase;
}


/*
   Small section number
*/

.Sponser .section-kicker::before {

    content: "04";

    color: #b63b2e;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .16em;
}


/*
   Hide an existing number if your HTML
   already contains one.
*/

.Sponser .section-kicker span:first-child {
    display: none;
}


/* =========================================================
   LARGE EDITORIAL HEADING
========================================================= */

.Sponser .section-title {

    max-width: 850px;

    margin: 0;

    font-family: var(--serif);

    font-size: clamp(
        4rem,
        7vw,
        7.5rem
    );

    font-weight: 400;

    line-height: .88;

    letter-spacing: -.045em;

    color: var(--white);
}


.Sponser .section-title em {

    color: var(--white);

    font-weight: 400;
}


/* =========================================================
   RIGHT SIDE DESCRIPTION
========================================================= */

.Sponser .section-side-note {

    max-width: 500px;

    margin: 0;

    color: rgba(255,255,255,.65);

    font-size: 16px;

    line-height: 1.6;
}


/* =========================================================
   KNOW MORE
========================================================= */

.Sponser .sponsor-more {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 18px;

    color: var(--white);

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

    transition:
        color .3s ease;
}


.Sponser .sponsor-more span {

    font-size: 17px;

    line-height: 1;

    transition:
        transform .3s ease;
}


.Sponser .sponsor-more:hover {

    color: #ffffff;
}


.Sponser .sponsor-more:hover span {

    transform:
        translate(4px, -4px);
}


/* =========================================================
   SPONSOR SHOWCASE
   Sits beside the heading/description column,
   one enlarged logo visible at a time.
========================================================= */

.sponsor-showcase {

    position: relative;

    z-index: 2;

    width: 100%;
}


.Sponser .sponsor-grid {

    position: relative;
    width: 100%;
    max-width: 480px; 
    margin: 0 auto;   
    height: 240px;    
    overflow: hidden;
    background: #ffffff;
    border: 0;
    border-radius: 4px;
}


/* =========================================================
   SPONSOR SLIDE
========================================================= */

.Sponser .sponsor {
    position: absolute;
    inset: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;

    border: 0;

    opacity: 0;

    transform:
        translateX(60px);

    transition:
        transform .9s cubic-bezier(.65,0,.35,1),
        opacity .9s ease;

    pointer-events: none;
}


/* =========================================================
   ACTIVE SPONSOR
========================================================= */

.Sponser .sponsor.active {

    opacity: 1;

    transform:
        translateX(0);

    pointer-events: auto;
}


/* =========================================================
   PREVIOUS SPONSOR
========================================================= */

.Sponser .sponsor.previous {

    opacity: 0;

    transform:
        translateX(-60px);
}


/* =========================================================
   SPONSOR IMAGES
   Enlarged so every mark reads clearly,
   while staying inside the showcase frame.
========================================================= */

.Sponser .sponsor img {

display: block;
    
    width: 100%;   
    height: 100%;    
    
    max-width: 280px;  
    max-height: 120px; 
    
    object-fit: contain; 
    
    filter: none;
    opacity: 1;
    transition: transform .45s ease;
}



/* =========================================================
   LOGO HOVER
========================================================= */

.Sponser .sponsor:hover img {

    transform:
        scale(1.05);
}


/* =========================================================
   SLIDE COUNTER
========================================================= */

.sponsor-counter {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 18px;

    color: rgba(255,255,255,.5);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .12em;
}


.sponsor-counter span:first-child {

    color: var(--white);
}


/* =========================================================
   SUBTLE SECTION DETAIL
========================================================= */

.Sponser::after {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -250px;
    bottom: -300px;

    border: 1px solid rgba(255,255,255,.035);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .Sponser {

        padding-top: 70px;
    }


    .sponsor-layout {

        grid-template-columns: 1fr;

        gap: 40px;

        padding-bottom: 70px;
    }


    .sponsor-text .section-side-note {

        max-width: none;

    }


    .Sponser .sponsor-grid {

        height: 260px;

    }


    .Sponser .sponsor {

        padding: 25px 30px;

    }


    .Sponser .sponsor img {

        max-height: 190px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .Sponser {

        padding-top: 60px;

    }


    /* Heading */

    .Sponser .section-title {

        font-size: clamp(
            3.5rem,
            15vw,
            5rem
        );

        line-height: .9;

    }


    .Sponser .section-side-note {

        font-size: 14px;

        line-height: 1.6;

    }


    /* Sponsor area */

    .Sponser .sponsor-grid {

        height: 200px;

    }


    .Sponser .sponsor {

        width: 100%;

        padding: 20px;

    }


    .Sponser .sponsor img {

        max-width: 90%;
        max-height: 150px;

    }

}
/* Guidelines / section link */

.section-action-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--white);

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

    text-decoration: none;

    transition:
        color var(--transition),
        transform var(--transition);
}

.section-action-link span {
    transition:
        transform var(--transition);
}

.section-action-link:hover {
    color: var(--accent);
}

.section-action-link:hover span {
    transform: translate(3px, -3px);
}


/* Event card links */

.event-card > a {
    display: inline-flex;
    align-items: center;
    gap: 9px;

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

    text-decoration: none;

    transition:
        color var(--transition);
}

.event-card > a span {
    transition:
        transform var(--transition);
}

.event-card > a:hover {
    color: var(--accent);
}

.event-card > a:hover span {
    transform: translate(3px, -3px);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .section-heading-actions {
        align-items: flex-start;
        gap: 18px;
    }

}
/* =========================================================
   CONTACT
========================================================= */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 520px;
    gap: 100px;
    align-items: start;
}

.contact-intro {
    max-width: 600px;

    margin-top: 35px;

    color: var(--muted);
}

.contact-details {
    margin-top: 55px;
}

.contact-details > div {
    padding: 18px 0;

    border-top: 1px solid var(--line);
}

.contact-details span {
    display: block;

    margin-bottom: 5px;

    color: var(--muted);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.contact-details a {
    font-weight: 600;
}

.contact-details a:hover {
    color: var(--accent);
}

.query-card {
    padding: 38px;

    background: var(--white);

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

.form-field {
    position: relative;

    margin-bottom: 22px;
}

.form-field label {
    display: block;

    margin-bottom: 8px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.form-field input,
.form-field textarea {
    width: 100%;

    padding: 15px 0;

    border: 0;
    border-bottom: 1px solid var(--line);

    background: transparent;

    color: var(--black);

    outline: none;

    resize: vertical;

    transition:
        border-color var(--transition);
}

.form-field input:focus,
.form-field textarea:focus {
    border-color: var(--black);
}

.form-field small {
    display: block;

    margin-top: 5px;

    text-align: right;

    color: var(--muted);

    font-size: 10px;
}

.form-message {
    display: none;

    padding: 13px 15px;
    margin-bottom: 20px;

    font-size: 13px;
}

.form-message.success {
    display: block;

    background: #e4f1e6;
    color: #245b31;
}

.form-message.error {
    display: block;

    background: #f3dde1;
    color: #7a1f30;
}

.query-card .button {
    margin-top: 5px;
}

.privacy-note {
    margin: 18px 0 0;

    color: var(--muted);

    font-size: 10px;
    line-height: 1.5;
}


/* =========================================================
   FAQ
========================================================= */

.faq-list {
    max-width: 900px;

    margin-top: 65px;

    border-top: 1px solid var(--line);
}

.faq-item {
    border-bottom: 1px solid var(--line);
}

.faq-question {
    width: 100%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 25px 0;

    background: transparent;

    color: var(--black);

    text-align: left;

    cursor: pointer;
}

.faq-question span:first-child {
    font-family: var(--serif);
    font-size: 28px;
}

.faq-question span:last-child {
    font-size: 25px;
    font-weight: 300;

    transition: transform var(--transition);
}

.faq-item.open .faq-question span:last-child {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;

    transition: max-height 400ms ease;
}

.faq-item.open .faq-answer {
    max-height: 300px;
}

.faq-answer p {
    max-width: 700px;

    padding-bottom: 25px;

    margin: 0;

    color: var(--muted);
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
    background: var(--black);
    color: var(--white);

    padding: 80px 0 30px;
}

.footer-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;

    padding-bottom: 70px;
}

.footer-logo .brand-mark {
    border-color: var(--white);
}

.footer-brand > p {
    margin-top: 25px;

    color: rgba(255,255,255,.5);

    font-size: 13px;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.footer-links div {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-links span {
    margin-bottom: 8px;

    color: rgba(255,255,255,.4);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.footer-links a {
    color: rgba(255,255,255,.8);

    font-size: 13px;

    transition: color var(--transition);
}

.footer-links a:hover {
    color: var(--accent-soft);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;

    padding-top: 25px;

    border-top: 1px solid rgba(255,255,255,.15);

    color: rgba(255,255,255,.35);

    font-size: 10px;
}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(35px);

    transition:
        opacity 700ms ease,
        transform 700ms cubic-bezier(.2,.7,.2,1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1050px) {

    /*
       Hamburger takes over from the inline nav at tablet
       width and down. The menu opens as a horizontal,
       scrollable row anchored under the header — not a
       full-screen vertical panel.
    */

    .nav-toggle {
        display: block;
        position: relative;
        z-index: 1002;
    }

    .nav-toggle.active span:first-child {
        transform: translateY(3.5px) rotate(45deg);
    }

    .nav-toggle.active span:last-child {
        transform: translateY(-3.5px) rotate(-45deg);
    }

    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1001;

        display: flex;
        flex-direction: column; /* <-- Change 'row' to 'column' */
        align-items: stretch;   /* <-- Change 'center' to 'stretch' for a clean vertical layout */
        gap: 20px;
        flex-wrap: nowrap;

        padding: 18px 24px;

        background: var(--paper);
        border-top: 1px solid var(--line);
        box-shadow: var(--shadow);

        /* The New Animated Slide Setup */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-15px);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
        overflow: hidden;
    }

    .nav-menu.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        
        overflow-x: auto;
        overflow-y: hidden;

        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;
    }

    .nav-link {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .nav-link::after {
        bottom: -5px;
    }

    .nav-register {
        flex-shrink: 0;
        white-space: nowrap;
        margin-left: 4px;
    }

    .hero-container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "eyebrow"
            "title-small"
            "title-visual"
            "description"
            "meta"
            "actions";

        gap: 0;
    }

    /*
       Break hero-copy and hero-title into their
       constituent parts so every piece becomes a
       direct grid item of hero-container. That lets
       hero-title-visual (the anagram) and hero-visual
       (the geometry) share one grid area — their
       centred position within that shared cell is
       the same point, so the anagram's centre and
       the geometry's centre always match exactly,
       at any tablet or phone width.
    */

    .hero-copy,
    .hero-title {
        display: contents;
    }

    .eyebrow {
        grid-area: eyebrow;
    }

    .hero-title-small {
        grid-area: title-small;
    }

    .hero-title-visual,
    .hero-visual {
        grid-area: title-visual;

        align-self: center;
        justify-self: center;
    }

    .hero-title-visual {
        margin-bottom: 34px;

        z-index: 1;
    }

    .hero-description {
        grid-area: description;
    }

    .hero-meta {
        grid-area: meta;
    }

    .hero-actions {
        grid-area: actions;
    }

    .hero-visual {
        z-index: 0;

        min-height: auto;

        pointer-events: none;
    }

    .geometry {
        width: min(70vw, 500px);

        opacity: .8;
    }

    .geometry-center {
        display: none;
    }

    /*
       Rotating graph is dropped at this size —
       the anagram becomes the sole visual, so
       it can sit centred on the geometric shape.
    */

    .hero-graph {
        display: none;
    }

    .hero-title-visual {
        justify-content: center;

        width: 100%;
    }

    .hero-title-small {
        text-align: center;
    }

    .hero-symmetry {
        margin: 0 auto;
    }

    /*
       White outline traces the anagram's linework
       (not a box around the image) so it reads
       clearly against the geometric shape behind it.
    */

    .hero-symmetry img {
        filter:
            drop-shadow(1.5px 0 0 var(--white))
            drop-shadow(-1.5px 0 0 var(--white))
            drop-shadow(0 1.5px 0 var(--white))
            drop-shadow(0 -1.5px 0 var(--white));
    }

    .intro-grid,
    .guidelines-header {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .speaker {
        grid-template-columns: 50px 260px 1fr;
        gap: 30px;
    }

    .registration-container {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .registration-panel {
        max-width: 550px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .sponsor-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .sponsor {
        border-bottom: 1px solid var(--line);
    }

    .sponsor:nth-child(3n) {
        border-right: 0;
    }

    .sponsor:nth-last-child(-n+3) {
        border-bottom: 0;
    }
/* --- REGISTER HERO MOBILE LAYOUT --- */
    .register-hero-container {
        display: flex;
        flex-direction: column;
    }

    .register-hero-visual {
        order: 1;
        position: relative; /* Ensures it doesn't float over the text */
        margin-bottom: 40px; /* Adds breathing room between the logo and text */
        width: 100%;
        display: flex;
        justify-content: center; /* Centers the logo nicely */
    }

    .register-hero-copy {
        order: 2;
    }


}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 760px) {

    .container,
    .navbar,
    .hero-bottom {
        width: min(
            calc(100% - 32px),
            var(--container)
        );
    }

    .section {
        padding: 80px 0;
    }

    .navbar {
        min-height: 74px;
    }

    .nav-menu {
        gap: 18px;
        padding: 14px 20px;
    }

    .nav-link {
        font-size: 13px;
    }

    .nav-register {
        padding: 9px 14px;
        font-size: 12px;
    }

    .hero {
        min-height: auto;
        padding-top: 80px;
    }

    .hero-container {
        gap: 20px;
        padding-top: 70px;
        padding-bottom: 100px;
    }

    .hero h1 {
        font-size: clamp(4rem, 18vw, 6rem);
    }

    .hero-description {
        font-size: 15px;
    }

    .hero-meta {
        flex-direction: column;
        gap: 18px;
    }

    .hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }

    .geometry {
        width: 88vw;

        opacity: .8;
    }

    .hero-equation {
        display: none;
    }

    .hero-bottom {
        bottom: 15px;
    }

    .section-heading-row {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 50px;
    }

    .section-title,
    .intro-grid h2 {
        font-size: clamp(3.2rem, 14vw, 5rem);
    }

    .intro-grid {
        padding-bottom: 55px;
    }

    .intro-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .stat {
        padding: 0 0 20px !important;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .stat:nth-last-child(-n+2) {
        border-bottom: 0;
    }

    .speaker {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .speaker-number {
        order: 0;
    }

    .speaker-image {
        max-width: 300px;
    }

    .speaker h3 {
        font-size: 3.5rem;
    }

    .event-grid {
        grid-template-columns: 1fr;
    }

    .event-large,
    .event-wide {
        grid-column: auto;
        grid-row: auto;
    }

    .event-card {
        min-height: 300px;
    }

    .guideline-row {
        grid-template-columns: 40px 1fr;
        gap: 15px;
    }

    .guideline-row span:last-child {
        grid-column: 2;
        text-align: left;
    }

    .schedule-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .timeline-row {
        grid-template-columns: 70px 1fr;
        gap: 20px;
    }

    .timeline-row h3 {
        font-size: 25px;
    }

    .gallery-stage {
        aspect-ratio: 4 / 3;
    }

    .sponsor-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sponsor:nth-child(3n) {
        border-right: 1px solid var(--line);
    }

    .sponsor:nth-child(2n) {
        border-right: 0;
    }

    .sponsor:nth-last-child(-n+3) {
        border-bottom: 1px solid var(--line);
    }

    .sponsor:nth-last-child(-n+2) {
        border-bottom: 0;
    }

    .query-card {
        padding: 25px;
    }

    .faq-question span:first-child {
        font-size: 23px;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .footer-links {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-bottom {
        flex-direction: column;
        gap: 10px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .hero h1 {
        font-size: 3.8rem;
    }

    .hero-meta {
        gap: 15px;
    }

    .section-title,
    .intro-grid h2 {
        font-size: 3.3rem;
    }

    .speaker h3 {
        font-size: 3rem;
    }

    .footer-links {
        grid-template-columns: 1fr;
    }

    .panel-body {
        padding: 25px;
    }
}

#speakers {
    border-top: 1px solid var(--line);
}


#Sponsored-by .section-kicker::before {
    display: none !important;
}










/*section for register.html
/* Enables smooth scrolling for the whole page */
html {
    scroll-behavior: smooth; 
}

/* Base button styling (Black) */
.btn-register-scroll {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #111111; /* Dark black */
    color: #ffffff; /* White text */
    padding: 12px 24px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    
    /* This creates the smooth "delay" animation effect */
    transition: all 0.4s ease-in-out;
    margin-top: 24px;
}

/* Hover state styling (Red) */
.btn-register-scroll:hover {
    background-color: #8a1c22; /* Adjust this hex code to match your specific dark red */
    transform: translateY(-3px); 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Optional: Add a little gap for the arrow icon */
.btn-register-scroll .arrow {
    margin-left: 8px;
}