/* ============================================
   @FONT-FACE DECLARATIONS
   ============================================ */

/* --- 1. PP Neue Montreal --- */
@font-face {
    font-family: 'NeueMontreal';
    font-weight: 100;
    font-style:  normal;
    font-display: swap;
    src: url('../fonts/pp-neue-montreal/PPNeueMontreal-Thin.otf') format('opentype');
}
@font-face {
    font-family: 'NeueMontreal';
    font-weight: 400;
    font-style:  normal;
    font-display: swap;
    src: url('../fonts/pp-neue-montreal/PPNeueMontreal-Book.otf') format('opentype');
}
@font-face {
    font-family: 'NeueMontreal';
    font-weight: 400;
    font-style:  italic;
    font-display: swap;
    src: url('../fonts/pp-neue-montreal/PPNeueMontreal-Italic.otf') format('opentype');
}
@font-face {
    font-family: 'NeueMontreal';
    font-weight: 500;
    font-style:  normal;
    font-display: swap;
    src: url('../fonts/pp-neue-montreal/PPNeueMontreal-Medium.otf') format('opentype');
}
@font-face {
    font-family: 'NeueMontreal';
    font-weight: 600;
    font-style:  italic;  /* NOTE: hanya tersedia versi italic untuk weight 600 */
    font-display: swap;
    src: url('../fonts/pp-neue-montreal/PPNeueMontreal-SemiBoldItalic.otf') format('opentype');
}
@font-face {
    font-family: 'NeueMontreal';
    font-weight: 700;
    font-style:  normal;
    font-display: swap;
    src: url('../fonts/pp-neue-montreal/PPNeueMontreal-Bold.otf') format('opentype');
}

/* --- 2. Sport Jersey --- */
@font-face {
    font-family: 'SportJersey';
    font-weight: 400;
    font-style:  normal;
    font-display: swap;
    src: url('../fonts/sport-jersey/sportsjersey.ttf') format('truetype');
}

/* --- 3. Electrolize --- */
@font-face {
    font-family: 'Electrolize';
    font-weight: 400;
    font-style:  normal;
    font-display: swap;
    src: url('../fonts/electrolize/Electrolize-Regular.ttf') format('truetype');
}


/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */

:root {

    /* ------------------------------------------
       TYPOGRAPHY — Font Families
    ------------------------------------------ */
    --font-primary:  'NeueMontreal', 'Helvetica Neue', 'Arial', sans-serif;
    --font-display:  'SportJersey', 'Impact', 'Arial Black', sans-serif;
    --font-mono:     'Electrolize', 'Consolas', 'Courier New', monospace;

    /* ------------------------------------------
       TYPOGRAPHY — Weights
       NeueMontreal : 100, 400, 400i, 500, 600i, 700
       SportJersey  : 400 only
       Electrolize  : 400 only

    ------------------------------------------ */
    --weight-thin:      100;
    --weight-regular:   400;
    --weight-normal:    400;  /* alias --weight-regular; dipakai di font display & jersey */
    --weight-medium:    500;
    --weight-semibold:  600;
    --weight-bold:      700;

    /* ------------------------------------------
       TYPOGRAPHY — Main Scale
    ------------------------------------------ */
    --text-xs:    0.75rem;      /* 12px */
    --text-sm:    0.875rem;     /* 14px */
    --text-base:  1rem;         /* 16px */
    --text-md:    1.0625rem;    /* 17px */
    --text-lg:    1.125rem;     /* 18px */
    --text-xl:    1.25rem;      /* 20px */
    --text-2xl:   1.5rem;       /* 24px */
    --text-3xl:   1.875rem;     /* 30px */
    --text-4xl:   2.25rem;      /* 36px */
    --text-5xl:   3.125rem;     /* 50px */
    --text-6xl:   5.625rem;     /* 90px */
    --text-7xl:   9rem;         /* 144px */

    /* ------------------------------------------
       TYPOGRAPHY — Scale 
    ------------------------------------------ */
    --text-2xs:   0.625rem;     /* 10px — label kecil, mobile override         */
    --text-19px:  1.1875rem;    /* 19px — subheading komponen (timeline, speaker, sponsor) */
    --text-21px:  1.3125rem;    /* 21px — nama speaker                         */
    --text-25px:  1.5625rem;    /* 25px — subtitel section (footer, contact)    */
    --text-43px:  2.6875rem;    /* 43px — hero heading event-detail             */
    --text-62px:  3.875rem;     /* 62px — page hero h1 (gallery, registration)  */

    /* ------------------------------------------
       TYPOGRAPHY — Leading & Tracking
    ------------------------------------------ */
    --leading-tight:    1.10;   /* = 110% */
    --leading-snug:     1.2;    /* = 120% */
    --leading-base:     1.4;    /* = 140% */
    --leading-normal:   1.6;    /* = 160% */
    --leading-loose:    1.9;    /* = 190% */

    --tracking-tight:   -0.02em;
    --tracking-normal:   0em;
    --tracking-wide:     0.03em;  /* = 3% */
    --tracking-widest:   0.15em;

    /* ------------------------------------------
       COLOR — Primitives
    ------------------------------------------ */
    --raw-black:            #000000;
    --raw-black-light:      #2E311A;
    --raw-brown:            #AD8330;
    --raw-brown-light:      #AD833033;   /* brand brown 20% alpha */
    --raw-brown-soft:       #AD833066;   /* brand brown 40% alpha */
    --raw-brown-faint:      #AD83301A;   /* brand brown 10% alpha — logo container bg */
    --raw-gold:             #FFC300;
    --raw-yellow:           #FFE169;
    --raw-yellow-light:     #FFEFBB;
    --raw-white:            #FFFFFF;
    --raw-white-ghost:      #FFFFFF01;   /* white 0.4% alpha — near-transparent form bg */
    --raw-white-haze:       #FFFFFF26;   /* white 15% alpha  — frosted-glass section bg */

    /* Utility */
    --raw-grey:             #828282;
    --raw-grey-dark:        #666666;     /* hover border, muted icon */
    --raw-grey-soft:        #DDE5E9;
    --raw-background:       #FAF9FB;

    /* Status */
    --raw-red:              #F91B1B;
    --raw-green-status:     #27AE60;

    /* ------------------------------------------
       COLOR — Semantic
    ------------------------------------------ */

    /* Brand */
    --color-primary:          var(--raw-brown);
    --color-primary-hover:    var(--raw-brown);
    --color-primary-light:    var(--raw-brown-light);
    --color-primary-subtle:   var(--raw-brown-soft);
    --color-primary-faint:    var(--raw-brown-faint);  /* logo container, subtle card bg */
    --color-accent:           var(--raw-yellow);
    --color-accent-light:     var(--raw-yellow-light);
    --color-accent-subtle:    var(--raw-brown-light);  /* active state */

    /* Background */
    --color-bg:               #04060E;
    --color-bg-subtle:        var(--raw-black-light);    /* #2E311A — site-wrapper, section dark */
    --color-surface:          #111111;                 /* card, form */
    --color-surface-light:    var(--raw-white);          /* navbar, footer, modal */
    --color-surface-overlay:  #FFFFFF0D;               /* overlay transparan */
    --color-surface-ghost:    var(--raw-white-ghost);    /* form area wrapper bg */
    --color-surface-haze:     var(--raw-white-haze);     /* frosted-glass section bg */

    /* Text */
    --color-text:             var(--raw-white);
    --color-text-subtle:      var(--raw-yellow);       /* teks sekunder di bg gelap */
    --color-text-muted:       var(--raw-brown);        /* teks redup */
    --color-text-dark:        var(--raw-black-light);  /* teks di atas surface terang */
    --color-text-inverse:     var(--raw-black-light);  /* teks hitam di atas brown */
    --color-text-link:        var(--raw-gold);

    /* Border */
    --color-border:           var(--raw-grey-soft);    /* border terang (modal, form light) */
    --color-border-dark:      #333333;               /* border gelap (form dark, card dark) */
    --color-border-strong:    var(--raw-brown);

    /* Status */
    --color-error:            var(--raw-red);
    --color-success:          var(--raw-green-status);
    --color-warning:          var(--raw-gold);

    /* ------------------------------------------
       BOOTSTRAP 5 OVERRIDES
    ------------------------------------------ */
    --bs-font-sans-serif:     var(--font-primary);
    --bs-font-monospace:      var(--font-mono);
    --bs-body-font-family:    var(--font-primary);
    --bs-body-color:          var(--color-text);
    /* --bs-body-bg:             var(--color-bg); */
    --bs-link-color:          var(--color-text-link);
    --bs-link-hover-color:    var(--color-primary-hover);
    --bs-border-color:        var(--color-border);

    --bs-primary-rgb:         173, 131, 48;   /* brown — #AD8330 */
    --bs-dark-rgb:            0, 0, 0;
    --bs-secondary-rgb:       46, 49, 26;     /* black-light */
    --bs-warning-rgb:         255, 225, 105;
    --bs-danger-rgb:          249, 27, 27;
    --bs-success-rgb:         39, 174, 96;

    /* ------------------------------------------
       SPACING
    ------------------------------------------ */
    --radius-sm:    5px;
    --radius-md:    10px;
    --radius-lg:    20px;
    --radius-xl:    40px;
    --radius-2xl:   50px;
    --radius-3xl:   90px;
    --radius-full:  9999px;

    /* ------------------------------------------
       SHADOWS
    ------------------------------------------ */
    --shadow-sm:         0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md:         0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg:         0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-card-hover: 0 18px 35px rgba(0, 0, 0, 0.35);   /* event card lifted */
    --shadow-focus:      0 0 0 0.1rem rgba(255, 195, 0, 0.25); /* gold focus ring (--raw-gold @25%) */
}


/* ============================================
   BASE — Body & Global Reset
   ============================================ */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
}

section[id] {
    scroll-margin-top: 75px;
}

body {
    font-family:             var(--font-primary);
    font-size:               var(--text-base);
    font-weight:             var(--weight-regular);
    line-height:             var(--leading-normal);
    color:                   var(--color-text);
    background-color:        var(--color-surface-light);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
}

/* ------------------------------------------
   Bootstrap btn-primary override
------------------------------------------ */
.btn-primary {
    background-color: var(--color-primary) !important;
    color:            var(--color-text-inverse) !important;
    border:           unset !important;
    border-radius:    var(--radius-full);
    padding:          5px 20px;
    font-family:      var(--font-primary);
    font-weight:      var(--weight-medium);
}

/* ------------------------------------------
   Utilities
------------------------------------------ */
.texture {
    position: absolute;
    z-index: 0;
}

img.icon-primary {
    filter: brightness(0) saturate(100%) invert(54%) sepia(54%) saturate(576%) hue-rotate(2deg) brightness(91%) contrast(89%);
}

.btn-guide {
    font-family:      var(--font-display);
    font-weight:      var(--weight-normal);
    font-size:        var(--text-md);
    line-height:      var(--leading-normal);
    width:            fit-content;
    padding:          10px 20px;
    border-radius:    var(--radius-full);
    background-color: var(--color-primary-subtle) !important;
    color:            var(--color-primary) !important;
    vertical-align:   middle;
}

.btn-guide span {
    line-height: 1;
}

.recaptcha-wrapper {
    overflow: hidden;
    border-radius: var(--radius-md);
    width: fit-content;
}


/* ============================================
   SITE WRAPPER
   ============================================ */

.site-wrapper {
    position:            relative;
    background-color:    var(--color-bg);
    background-image:    url('../images/background.png');
    background-repeat:   no-repeat;
    background-size:     100% auto;
    background-position: top center;
    border-top-left-radius:  var(--radius-3xl);
    border-top-right-radius: var(--radius-3xl);
}

.site-wrapper h4 {
    color: var(--color-primary);
}


/* ============================================
   SECTION SPACING
   ============================================ */

#about,
#sponsor {
    padding-top:    60px;
    padding-bottom: 60px;
}

/* First section on page */
#hero,
#gallery,
#registration,
#blog,
#blog-detail,
#marketplace,
#event-detail,
#sponsorship {
    margin-top: 75px;
    color:      var(--color-text);
}

#gallery,
#registration,
#marketplace {
    min-height: calc(100vh - 285px);
}


/* ============================================
   NAVBAR
   ============================================ */

nav {
    font-family: var(--font-primary);
}

nav .container,
nav .contact-container {
    background-color:           var(--color-surface-light);
    border-bottom-left-radius:  var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);
}

nav .navbar-collapse {
    justify-items: center !important;
}

nav .navbar-nav {
    gap: 25px;
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0;
    padding-left:  0;
}

.navbar-expand-lg .navbar-nav .nav-link.active {
    padding-right: 20px;
    padding-left:  20px;
}

nav .nav-link {
    font-family:    var(--font-primary);
    font-weight:    var(--weight-medium);
    font-size:      var(--text-base);
    line-height:    var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    color:          var(--color-text-dark);
}

nav .nav-link.active {
    font-weight:      var(--weight-semibold);
    background-color: var(--color-accent-subtle);
    color:            var(--color-primary) !important;
    border-radius:    var(--radius-full);
    padding:          10px 20px;
}

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

nav .nav-btn {
    padding:        10px 20px;
    font-family:    var(--font-primary);
    font-weight:    var(--weight-medium);
    font-size:      var(--text-base);
    line-height:    var(--leading-normal);
}

nav .nav-btn img {
    filter:     invert(0) !important;
    transition: transform 0.3s ease;
}

/* Nav Dropdown */
nav .dropdown {
    position: relative;
}

nav .dropdown-menu {
    position:           absolute;
    right:              0 !important;
    top:                100%;
    min-width:          30vw !important;
    width:              auto !important;
    background-color:   var(--color-surface-light) !important;
    border:             unset !important;
    border-radius:      unset !important;
    border-bottom-left-radius:  var(--radius-xl) !important;
    border-bottom-right-radius: var(--radius-xl) !important;
}

nav .dropdown-menu[data-bs-popper] {
    left: unset !important;
}

nav .dropdown-menu .dropdown-item {
    white-space: normal;
    padding:     0.5rem 1rem;
}

nav .dropdown-item:focus,
nav .dropdown-item:hover {
    background-color: unset !important;
}

nav .dropdown-menu .img-container {
    background-color: var(--color-primary);
    border-radius:    var(--radius-md);
    padding:          15px;
}

nav .dropdown-menu a {
    color:          var(--raw-grey) !important;
    padding-bottom: 25px;
}

nav .dropdown-menu li:not(:last-child) {
    margin-bottom:  15px;
    padding-bottom: 1rem !important;
    border-bottom:  1px solid var(--color-border);
}

nav .dropdown-menu li:last-child {
    padding-bottom: .5rem !important;
}

nav .dropdown-menu a h6 {
    font-family:  var(--font-primary);
    font-weight:  var(--weight-semibold);
    font-size:    var(--text-base);
    line-height:  var(--leading-normal);
    color:        var(--color-text-dark);
}

nav .dropdown-menu a p {
    font-family:    var(--font-primary);
    font-weight:    var(--weight-medium);
    font-size:      var(--text-sm);
    line-height:    var(--leading-normal);
    color:          var(--color-text-dark);
    letter-spacing: 1px;
}

nav .dropdown-toggle::after {
    display: none !important;
}

.nav-btn[aria-expanded="true"] img {
    transform: rotate(180deg);
}


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

#hero {
    padding-bottom: 40px;
}

#hero svg {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size:   var(--text-5xl);
    line-height: var(--leading-normal);
    width:       100%;
    height:      auto;
}

#hero .svgText {
    fill:         var(--color-primary);
    stroke:       var(--color-bg-subtle);
    stroke-width: 14px;
    paint-order:  stroke;
}

#hero h3 {
    font-family: var(--font-display);
    font-weight: var(--weight-normal);
    font-size:   var(--text-5xl);
    line-height: var(--leading-snug);
}

#hero p {
    font-family:    var(--font-primary);
    font-weight:    var(--weight-normal);
    font-size:      var(--text-lg);
    line-height:    var(--leading-normal);
    letter-spacing: var(--tracking-wide);
}

#hero a {
    font-family:      var(--font-primary);
    background-color: var(--color-primary);
    color:            var(--color-text-inverse);
    padding:          10px 40px;
    border-radius:    var(--radius-full);
    font-weight:      var(--weight-semibold);
    font-size:        var(--text-sm);
    line-height:      var(--leading-normal);
    text-decoration:  none;
    transition:       background-color 0.2s ease;
}

#hero a:hover {
    background-color: var(--color-primary-hover);
}


/* ============================================
   ABOUT
   ============================================ */

#about {
    color: var(--color-text);
}

#about iframe {
    border-radius: var(--radius-2xl);
    border:        0.6px solid var(--color-bg-subtle);
}

#about p {
    font-family:    var(--font-primary);
    font-weight:    var(--weight-normal);
    font-size:      var(--text-lg);
    line-height:    var(--leading-normal);
    letter-spacing: var(--tracking-wide);
    text-align:     justify;
}


/* ============================================
   EVENT
   ============================================ */

#event {
    position:         relative;
    overflow:         hidden;
    padding-top:      45px;
    background-color: var(--color-surface-light);
    border-radius:    var(--radius-3xl);
    color:            var(--raw-grey);
    font-size:        var(--text-md);
}

#event .container * {
    z-index: 1;
}

#event h1 {
    font-family: var(--font-display);
    font-weight: var(--weight-normal);
    font-size:   var(--text-5xl);
    line-height: var(--leading-tight);
    color:       var(--color-primary);
}

#event .img-event-container {
    background-color: var(--color-surface-overlay); 
    border-radius:    var(--radius-lg);
    padding:          30px 15px;
}

#event a {
    padding:          15px;
    background-color: var(--color-primary);
    border-radius:    var(--radius-sm);
}

#event .event-card {
    min-height:       390px;
    background-color: var(--color-bg);
    border-radius:    var(--radius-xl);
    padding:          40px 30px;
    color:            var(--color-text);
}

#event .event-card:hover {
    transform:  translateY(-6px);
    box-shadow: var(--shadow-card-hover); 
}

#event .event-card-content {
    z-index: 2;
    flex:    1;
}

#event .event-card-title {
    font-family: var(--font-display);
    font-weight: var(--weight-normal);
    font-size:   var(--text-3xl);
    line-height: var(--leading-snug);
    color:       var(--color-text);
}

#event .event-card-info p {
    font-family: var(--font-primary);
    font-weight: var(--weight-medium);
    font-size:   var(--text-sm);
    line-height: var(--leading-normal);
    color:       var(--color-text);
}

#event .event-card-icon {
    width:       14px;
    height:      14px;
    flex-shrink: 0;
    filter:      brightness(0) invert(1);
    margin-top:  5px;
}

#event .event-card-action .btn-register {
    font-family:   var(--font-display);
    font-weight:   var(--weight-normal);
    font-size:     var(--text-md);
    line-height:   var(--leading-normal);
    width:         fit-content;
    padding:       10px 20px;
    border-radius: var(--radius-full);
}

#event .event-card-action .btn-register img {
    rotate: 180deg;
}

#event .event-card-action .btn-guide {
    font-family:      var(--font-display);
    font-weight:      var(--weight-normal);
    font-size:        var(--text-md);
    line-height:      var(--leading-normal);
    width:            fit-content;
    padding:          10px 20px;
    border-radius:    var(--radius-full);
    background-color: var(--color-primary-subtle) !important;
    color:            var(--color-primary) !important;
}

#event .event-card-action .btn-register,
#event .event-card-action .btn-guide {
    vertical-align: middle;
}

#event .event-card-action .btn-register span,
#event .event-card-action .btn-guide span {
    line-height: 1;
}

#event .event-card-logo {
    position: absolute;
    right:    0;
    bottom:   0;
    width:    180px;
    opacity:  0.25;
    z-index:  1;
}

#event .event-card-hover-arrow {
    position:         absolute;
    right:            28px;
    bottom:           32px;
    z-index:          7;
    width:            44px;
    height:           44px;
    border-radius:    var(--radius-full);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    padding:          0;
    background-color: var(--color-primary);
    text-decoration:  none;
    opacity:          0;
    visibility:       hidden;
    transform:        translateX(14px);
    transition:
        opacity    0.25s ease,
        visibility 0.25s ease,
        transform  0.25s ease;
}

#event .event-card-hover-arrow img {
    width:  16px;
    height: 16px;
}

#event .event-card:hover .event-card-hover-arrow {
    opacity:    1;
    visibility: visible;
    transform:  translateX(0);
}


/* ============================================
   NEWS
   ============================================ */

#news {
    color: var(--color-text);
}

#news .news-container {
    padding-left: 6%;
}

#news .news {
    margin-top:    150px;
    border-radius: 40px 0 0 40px;
    padding-right: 0 !important;
    position:      relative;
}

#news .news .row {
    margin-right: 0;
}

#news h1 {
    font-family: var(--font-display);
    font-weight: var(--weight-normal);
    font-size:   var(--text-3xl);
    line-height: var(--leading-normal);
}

#news p {
    font-family:    var(--font-primary);
    font-weight:    var(--weight-normal);
    font-size:      var(--text-md);
    line-height:    var(--leading-normal);
    letter-spacing: var(--tracking-wide);
}

#news .news-cover {
    border-radius: var(--radius-lg);
}

#news .news-prev-btn,
#news .news-next-btn {
    padding:          5px;
    background-color: var(--color-primary);
    border-radius:    var(--radius-full);
    border:           unset !important;
}

#news .news-prev-btn img {
    rotate: 180deg;
}

#news .news-control a {
    text-decoration: none;
    color:           var(--color-primary);
    font-family:     var(--font-primary);
    font-weight:     var(--weight-semibold);
    font-size:       var(--text-base);
    line-height:     var(--leading-normal);
}

/* News Item */
#news .item {
    border-top-left-radius:    var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
    padding:       15px 20px;
    border-left:   0 solid transparent;
    border-bottom: 0 solid transparent;
    position:      relative;
    margin-bottom: 20px;
}

#news .item::before {
    content:       "";
    position:      absolute;
    left:          0;
    top:           0;
    width:         5px;
    height:        100%;
    border-radius: 5px 0 0 5px;
    background:    linear-gradient(to bottom, var(--color-primary), var(--color-bg-subtle));
    z-index:       1;
}

#news .item::after {
    content:       "";
    position:      absolute;
    right:         0;
    bottom:        -20px;
    width:         94%;
    height:        1px;
    border-radius: 0 0 20px 20px;
    background:    linear-gradient(to right, var(--color-primary), var(--color-accent));
    z-index:       1;
}

#news .item h4 {
    font-family: var(--font-display);
    font-weight: var(--weight-normal);
    font-size:   var(--text-xl);
    line-height: var(--leading-normal); 
    color: var(--bs-body-color);
}

#news .item p {
    font-family:    var(--font-primary);
    font-weight:    var(--weight-medium);
    font-size:      var(--text-base);
    line-height:    var(--leading-normal);
    letter-spacing: var(--tracking-wide);
}

#news .item a {
    font-family:     var(--font-primary);
    font-weight:     var(--weight-semibold);
    font-size:       var(--text-base);
    line-height:     var(--leading-normal);
    letter-spacing:  var(--tracking-wide);
    text-decoration: none;
    color:           var(--color-primary);
}


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

#sponsor {
    padding-top: 160px;
    color:       var(--color-text);
    overflow:    hidden;
}

#sponsor .container {
    position: relative;
    z-index:  2;
}

#sponsor .img-container {
    background-color: var(--color-surface-light);
    border-radius:    var(--radius-xl);
    padding:          20px 90px;
    position:         relative;
    overflow:         visible;
}

#sponsor p {
    font-family: var(--font-primary);
    font-weight: var(--weight-medium);
    font-size:   var(--text-lg);
    line-height: var(--leading-normal);
    color:       var(--raw-grey);
}

.img-container-light {
    position:       absolute;
    bottom:         50px;
    height:         250px;
    width:          auto;
    z-index:        -1;
    pointer-events: none;
}

.img-container-light-left {
    left:      -50px;
    transform: translateX(-50%);
}

.img-container-light-right {
    right:     0;
    transform: translateX(50%);
}

.mascot-img {
    position:   relative;
    z-index:    3;
    max-height: 120px;
}


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

footer {
    background-color:        var(--color-surface-light);
    border-top-left-radius:  var(--radius-3xl);
    border-top-right-radius: var(--radius-3xl);
    color:                   var(--color-text-dark);
}

footer .dot-circle {
    position:         relative;
    width:            40px;
    height:           40px;
    border-radius:    var(--radius-full);
    background-color: var(--color-primary);
    overflow:         hidden;
}

footer .dot-circle::after {
    content:          '';
    position:         absolute;
    inset:            0;
    pointer-events:   none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' fill='white'/%3E%3C/svg%3E");
    opacity:          1;
    mix-blend-mode:   multiply;
    background-repeat: repeat;
    background-size:   cover;
}

footer .date,
footer .date-year {
    position:     relative;
    font-family:  var(--font-mono);
    font-weight:  var(--weight-normal);
    color:        transparent;
    background-image:
        linear-gradient(var(--color-primary), var(--color-primary)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='9' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' fill='black' opacity='1'/%3E%3C/svg%3E");
    background-blend-mode:   multiply;
    background-clip:         text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size:         100px 100px;
    background-repeat:       repeat;
}

footer .date {
    font-size:   var(--text-3xl);
    line-height: var(--leading-normal);
}

footer .date-year {
    font-size:   var(--text-6xl);
    line-height: var(--leading-snug);
}

footer .competition-categories a {
    text-decoration: none;
    color:           var(--color-text-dark);
}

footer .nav-item {
    position:      relative;
    padding-right: 24px;
    margin-right:  8px;
    font-family:   var(--font-primary);
}

footer .nav-item::after {
    content:          '';
    position:         absolute;
    top:              50%;
    right:            0;
    transform:        translateY(-50%);
    width:            6px;
    height:           6px;
    background-color: var(--color-text-dark);
    border-radius:    50%;
}

footer .nav-item:last-child::after {
    display: none;
}

footer .social-icon i {
    width:  22px;
    height: 22px;
    color:  var(--color-text-dark);
}

footer .address {
    font-family: var(--font-primary);
    font-weight: var(--weight-medium);
    font-size:   var(--text-base);
    line-height: var(--leading-normal);
    color:       var(--color-text-dark);
}

footer .copyright,
footer .copyright a {
    font-family:     var(--font-primary);
    font-weight:     var(--weight-medium);
    font-size:       var(--text-sm);
    line-height:     var(--leading-normal);
    letter-spacing:  var(--tracking-wide);
    text-decoration: none;
    color:           var(--raw-grey);
}

footer hr {
    width: 25%;
}


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

#gallery h1 {
    font-family: var(--font-display);
    font-weight: var(--weight-normal);
    font-size:   var(--text-62px); 
    line-height: var(--leading-normal);
}

#gallery .year-wrapper {
    max-width: 100%;
    position:  relative;
    padding:   34px;
    overflow:  visible !important;
}

#gallery .year-wrapper::before {
    content:          "";
    position:         absolute;
    top:              43px;
    left:             48px;
    right:            48px;
    height:           1px;
    background-color: var(--color-border-strong);
    z-index:          0;
}

#gallery .year-wrapper .tns-outer,
#gallery .year-wrapper .tns-ovh,
#gallery .year-wrapper .tns-inner {
    overflow: visible !important;
}

#gallery .year-slider {
    position: relative;
    z-index:  2;
}

#gallery .year-slider .item {
    position:    relative;
    font-family: var(--font-mono);
    font-size:   var(--text-sm);
    color:       var(--color-text);
    cursor:      pointer;
    padding-top: 0;
}

#gallery .year-slider .item.active {
    font-weight: var(--weight-bold);
    color:       var(--color-primary);
}

#gallery .dot-circle {
    width:            20px;
    height:           20px;
    border-radius:    50%;
    background-color: var(--color-border);
    margin-bottom:    10px;
    cursor:           pointer;
    position:         relative;
    z-index:          3;
    transition:       0.25s ease;
}

#gallery .item.active .dot-circle {
    background-color: var(--color-primary);
}

#gallery .item.active .dot-circle::after {
    content:          "";
    position:         absolute;
    inset:            -5px;
    border-radius:    50%;
    border:           2px solid var(--color-primary);
    background-color: transparent;
}

#gallery .year {
    font-family: var(--font-mono);
    font-size:   var(--text-sm);
    color:       inherit;
    line-height: 1;
}

#gallery .year-controls {
    top:    32px;
    z-index: 5;
}

#gallery .year-controls-prev {
    left: 0;
}

#gallery .year-controls-next {
    right: 0;
}

#gallery .year-btn-prev,
#gallery .year-btn-next {
    width:           24px;
    height:          24px;
    border:          unset;
    background:      transparent;
    padding:         0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
}

#gallery .year-btn-prev img {
    transform: rotate(180deg);
    filter:    brightness(0) invert(1);
}

#gallery .year-btn-next img {
    filter: brightness(0) invert(1);
}

#gallery .event-slider-wrapper {
    position: relative;
}

#gallery .control-event-slider {
    top:     23px;
    left:    calc(50% - 150px);
    display: flex;
    gap:     10px;
    z-index: 20;
}

#gallery .event-btn-prev,
#gallery .event-btn-next {
    width:            50px;
    height:           50px;
    border:           unset !important;
    border-radius:    50%;
    background-color: var(--color-primary);
    display:          flex;
    justify-content:  center;
    align-items:      center;
    padding:          0;
    cursor:           pointer;
}

#gallery .event-btn-prev img {
    transform: rotate(180deg);
    filter:    invert(0);
}

#gallery .event-btn-next img {
    filter: invert(0);
}

#gallery .event-btn-prev.disabled,
#gallery .event-btn-next.disabled {
    background-color: var(--color-border);
    cursor:           not-allowed;
}

#gallery .gallery-content-row {
    position: relative;
}

#gallery .event-slider .item .event-detail {
    position:          relative;
    overflow:          hidden;
    background-color:  var(--color-surface-overlay);
    border:            1px solid var(--color-border-strong);
    border-radius:     var(--radius-xl);
    backdrop-filter:         blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#gallery .event-slider .item .event-detail h4 {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size:   var(--text-3xl);
    line-height: var(--leading-normal);
}

#gallery .event-slider .item .event-detail p {
    font-family: var(--font-primary);
    font-size:   var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: 25px;
}

#gallery .event-slider .item .event-detail .sponsor {
    background-color: var(--color-surface-light);
    border-radius:    var(--radius-xl);
}

#gallery .sponsor h5 {
    font-family:   var(--font-mono);
    font-size:     var(--text-sm);
    font-weight:   var(--weight-regular);
    color:         var(--raw-grey);
    margin-bottom: 10px;
}

#gallery .gallery-cutout-wrapper {
    --gallery-radius: 42px;
    --gallery-bg:     var(--color-bg);
    --panel-width:    63%;
    --panel-height:   132px;
    --panel-overlap:  72px;

    position:       relative;
    padding-bottom: calc(var(--panel-height) - var(--panel-overlap));
}

#gallery .gallery-container {
    position:      relative;
    overflow:      hidden;
    border-radius: var(--gallery-radius);
    z-index:       1;
}

#gallery .gallery-container .image {
    position:       relative;
    overflow:       hidden;
    padding-bottom: 74%;
    border-radius:  var(--gallery-radius);
}

#gallery .gallery-container .image img {
    width:         100%;
    height:        100%;
    object-fit:    cover;
    position:      absolute;
    inset:         0;
    display:       block;
    max-height:    none;
    max-width:     none;
    transform:     unset;
    border-radius: var(--gallery-radius);
}

#gallery .gallery-thumb-panel {
    position:         absolute;
    left:             0;
    bottom:           0;
    width:            var(--panel-width);
    min-height:       var(--panel-height);
    background-color: var(--gallery-bg);
    z-index:          5;
    padding:          22px 20px 0 0;
    border-top-right-radius: 42px;
}

#gallery .thumbs-container {
    position: relative;
    overflow: hidden;
    z-index:  6;
}

#gallery .thumbs-container .swiper-wrapper {
    align-items: center;
}

#gallery .thumbs-container .swiper-slide {
    aspect-ratio:     1 / 1;
    overflow:         hidden;
    opacity:          0.45;
    border-radius:    var(--radius-md);
    border:           1px solid var(--color-border);
    background-color: var(--gallery-bg);
    cursor:           pointer;
    transition:       0.25s ease;
}

#gallery .thumbs-container .swiper-slide img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

#gallery .thumbs-container .swiper-slide-thumb-active {
    opacity: 1;
    border:  2px solid var(--color-primary);
}

#gallery .gallery-bottom-control {
    position:     relative;
    z-index:      6;
    padding-right: 0;
}

#gallery .gallery-btn-prev,
#gallery .gallery-btn-next,
#gallery .gallery-control-placeholder {
    width:     34px;
    height:    34px;
    min-width: 34px;
}

#gallery .gallery-btn-prev,
#gallery .gallery-btn-next {
    position:         static;
    background-color: var(--color-primary);
    border-radius:    var(--radius-full);
    border:           none;
    display:          flex;
    justify-content:  center;
    align-items:      center;
    padding:          0;
}

#gallery .gallery-btn-prev img {
    transform: rotate(180deg);
    filter:    none;
}

#gallery .gallery-btn-next img {
    filter: none;
}

#gallery .gallery-info {
    font-family: var(--font-mono);
    font-size:   var(--text-base);
    font-weight: var(--weight-medium);
    color:       var(--color-text);
}

#gallery iframe {
    border-radius: var(--radius-2xl);
}


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

#registration .header h1 {
    font-family: var(--font-display);
    font-weight: var(--weight-normal);
    font-size:   var(--text-62px); 
    line-height: var(--leading-normal);
    color:       var(--color-primary);
}

#registration .header .logo {
    background-color: var(--color-primary-faint); 
    border-radius:    var(--radius-md);
    border:           1px solid var(--color-primary);
    padding:          35px 25px;
}

#registration .header h4 {
    font-family: var(--font-display);
    font-weight: var(--weight-normal);
    font-size:   var(--text-25px); 
    line-height: var(--leading-normal);
    color:       var(--color-primary);
}

#registration .header p {
    font-family:    var(--font-primary);
    font-weight:    var(--weight-medium);
    font-size:      var(--text-base);
    line-height:    var(--leading-normal);
    letter-spacing: var(--tracking-wide);
    color:          var(--color-primary);
}

#registration .form {
    background-color:        var(--color-surface-ghost); 
    border:                  1px solid var(--color-border-strong);
    border-radius:           var(--radius-2xl);
    padding:                 65px;
    backdrop-filter:         blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#registration .form input,
#registration .form textarea,
#registration .form select {
    background-color: var(--color-surface) !important;
    border:           1px solid var(--color-border-dark) !important;
    border-radius:    var(--radius-md) !important;
    padding:          10px 15px !important;
    color:            var(--color-text);
    font-family:      var(--font-primary);
}

#registration .form input:hover,
#registration .form textarea:hover,
#registration .form select:hover {
    border-color: var(--raw-grey-dark); 
}

#registration .form input:focus,
#registration .form textarea:focus,
#registration .form select:focus {
    box-shadow: var(--shadow-focus) !important; 
}

#registration .form input::placeholder,
#registration .form textarea::placeholder,
#registration .form select::placeholder {
    color:          #E0E0E080 !important;
    opacity:        1 !important;
    font-family:    var(--font-primary) !important;
    font-weight:    var(--weight-regular) !important;
    font-size:      var(--text-base) !important;
    line-height:    100% !important;
    letter-spacing: 1% !important;
}

#registration .form input[type="date"]::-webkit-calendar-picker-indicator {
    filter: brightness(0) invert(1);
}

#registration .form .btn {
    background-color: var(--color-primary) !important;
    color:            var(--color-text-inverse) !important;
    font-family:      var(--font-display);
    font-weight:      var(--weight-normal);
    font-size:        var(--text-base);
    line-height:      var(--leading-normal);
}

.nav-pills .nav-link {
    font-family: var(--font-primary);
    color:       var(--color-text);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--color-primary) !important;
    color:            var(--color-text-inverse) !important;
}

#registration .upload-box {
    background-color: var(--color-surface);
    border:           1px solid var(--color-border-dark);
    border-radius:    var(--radius-md);
    padding:          10px 15px;
    text-align:       center;
    cursor:           pointer;
    transition:       border-color 0.3s ease;
}

#registration .upload-box:hover {
    border-color: var(--color-primary);
}

#registration .upload-box input[type="file"] {
    display: none;
}

#registration .upload-icon {
    font-size:     2rem;
    color:         var(--color-text);
    margin-bottom: 0.75rem;
}

#registration .upload-text b {
    color: var(--color-text);
}

#registration .upload-text small {
    font-family: var(--font-primary);
    font-size:   0.85rem;
    color:       var(--raw-grey);
}

#registration .btn-questionnaire-option {
    border-radius: var(--radius-lg) !important;
    margin:        0 4px;
    font-family:   var(--font-primary);
    font-weight:   var(--weight-medium);
    padding:       6px 14px;
}

#registration .btn-check:checked + .btn-questionnaire-option {
    background-color: var(--color-primary) !important;
    color:            var(--color-text-inverse) !important;
    font-weight:      var(--weight-semibold);
}


/* ============================================
   MARKETPLACE PAGE
   ============================================ */

#marketplace .header h1 {
    font-family:    var(--font-display);
    font-weight:    var(--weight-normal);
    font-size:      var(--text-62px);
    line-height:    var(--leading-snug);
    letter-spacing: var(--tracking-wide);
    color:          var(--color-text);
    text-transform: uppercase;
}

#marketplace .header p {
    font-family:    var(--font-primary);
    font-weight:    var(--weight-medium);
    font-size:      var(--text-base);
    line-height:    var(--leading-normal);
    letter-spacing: var(--tracking-wide);
    color:          var(--color-text);
    margin-bottom:  0;
}

#marketplace .marketplace-filter {
    margin-top: 55px;
}

#marketplace .marketplace-count {
    font-family: var(--font-primary);
    font-weight: var(--weight-semibold);
    font-size:   var(--text-sm);
    line-height: var(--leading-normal);
    color:       var(--color-text);
}

#marketplace .marketplace-line {
    margin-top:    22px;
    margin-bottom: 0;
    border-color:  var(--color-border);
    opacity:       1;
}

#marketplace .marketplace-filter-group {
    min-width: 360px;
}

#marketplace .marketplace-select-wrapper {
    min-width: 150px;
}

#marketplace .select2-container {
    width: 100% !important;
}

#marketplace .select2-container--default .select2-selection--single {
    height:           auto;
    min-height:       unset;
    background-color: transparent;
    border:           unset;
    border-radius:    0;
    padding:          0;
}

#marketplace .select2-container--default .select2-selection--single .select2-selection__rendered {
    color:        var(--color-text);
    font-family:  var(--font-primary);
    font-weight:  var(--weight-semibold);
    font-size:    var(--text-sm);
    line-height:  var(--leading-normal);
    padding-left: 0;
    padding-right: 24px;
}

#marketplace .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--color-text);
}

#marketplace .select2-container--default .select2-selection--single .select2-selection__arrow {
    top:       50%;
    right:     0;
    height:    20px;
    transform: translateY(-50%);
}

#marketplace .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--color-text) transparent transparent transparent;
}

#marketplace .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--color-text) transparent;
}

#marketplace .select2-container--default .select2-selection--single .select2-selection__clear {
    color:        var(--color-text);
    font-size:    var(--text-base);
    font-weight:  var(--weight-medium);
    margin-right: 18px;
}

.select2-dropdown {
    background-color: var(--color-bg);
    border:           1px solid var(--color-border-dark);
    border-radius:    var(--radius-md);
    overflow:         hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--color-surface);
    border:           1px solid var(--color-border-dark);
    border-radius:    var(--radius-sm);
    color:            var(--color-text);
    font-family:      var(--font-primary);
    font-size:        var(--text-sm);
    padding:          8px 10px;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    outline:      none;
    border-color: var(--color-primary);
}

.select2-container--default .select2-results__option {
    color:       var(--color-text);
    font-family: var(--font-primary);
    font-size:   var(--text-sm);
    line-height: var(--leading-normal);
    padding:     8px 12px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-primary);
    color:            var(--color-text-inverse);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--color-primary-subtle);
    color:            var(--color-primary);
}

#marketplace .is-loading {
    opacity:        .45;
    pointer-events: none;
    transition:     opacity 0.2s ease;
}

#marketplace .marketplace-product-row > [class*="col-"] {
    display: flex;
}

#marketplace .product-card {
    display:        flex;
    flex-direction: column;
    width:          100%;
    height:         100%;
}

#marketplace .product-img {
    width:            100%;
    aspect-ratio:     1 / 1;
    flex-shrink:      0;
    border-radius:    var(--radius-lg);
    border:           1px solid var(--color-border-strong);
    background-color: var(--color-surface-overlay);
}

#marketplace .product-img img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}

#marketplace .discount-badge {
    background-color: var(--color-error);
    color:            var(--raw-white);
    padding:          10px 12px;
    font-family:      var(--font-primary);
    font-weight:      var(--weight-regular);
    font-size:        var(--text-sm);
    line-height:      1;
    letter-spacing:   var(--tracking-widest);
    text-transform:   uppercase;
}

#marketplace .product-card .card-body {
    display:        flex;
    flex-direction: column;
    flex:           1;
    padding:        0;
}

#marketplace .product-title {
    min-height:  58px;
    font-family: var(--font-display);
    font-weight: var(--weight-normal);
    font-size:   var(--text-xl);
    line-height: var(--leading-normal);
    color:       var(--color-text);
    margin-bottom: 0;
}

#marketplace .product-price-wrapper {
    margin-top:    8px;
    margin-bottom: 24px;
}

#marketplace .price {
    font-family:    var(--font-primary);
    font-weight:    var(--weight-bold);
    font-size:      var(--text-xl);
    line-height:    var(--leading-normal);
    letter-spacing: var(--tracking-wide);
    color:          var(--color-text-link);
}

#marketplace .discount-price {
    font-family:          var(--font-primary);
    font-weight:          var(--weight-medium);
    font-size:            var(--text-sm);
    line-height:          var(--leading-normal);
    text-decoration:      line-through;
    color:                var(--color-text);
    text-decoration-color: var(--color-error);
    text-decoration-thickness: 2px;
}

#marketplace .btn-product {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    width:            fit-content;
    min-width:        140px;
    margin-top:       auto;
    background-color: var(--color-primary);
    color:            var(--color-text-inverse);
    border-radius:    var(--radius-full);
    padding:          10px 35px;
    font-family:      var(--font-primary);
    font-weight:      var(--weight-normal);
    font-size:        var(--text-sm);
    line-height:      var(--leading-normal);
    text-decoration:  none;
    transition:       opacity 0.2s ease;
}

#marketplace .btn-product:hover {
    color:   var(--color-text-inverse);
    opacity: .9;
}

#marketplace .empty-product-text {
    font-family: var(--font-primary);
    font-weight: var(--weight-medium);
    font-size:   var(--text-base);
    line-height: var(--leading-normal);
    color:       var(--color-text);
}


/* ============================================
   BLOG PAGE
   ============================================ */

#blog .header h1 {
    font-family: var(--font-display);
    font-weight: var(--weight-normal);
    font-size:   var(--text-62px);
    line-height: var(--leading-normal);
}

#blog .header span {
    font-weight: var(--weight-normal);
    font-size:   var(--text-5xl);
    line-height: var(--leading-normal);
}

#blog .header p {
    font-family:    var(--font-primary);
    font-weight:    var(--weight-medium);
    font-size:      var(--text-base);
    line-height:    var(--leading-normal);
    letter-spacing: var(--tracking-wide);
}

#blog .item {
    position:          relative;
    overflow:          hidden;
    background-color:  var(--color-surface);
    border:            1px solid var(--color-border-dark);
    border-top-left-radius:     var(--radius-lg);
    border-top-right-radius:    var(--radius-lg);
    border-bottom-left-radius:  var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    text-decoration:   none;
    color:             var(--color-text);
    padding:           25px;
    transition:        box-shadow 0.2s ease;
}

#blog .item:hover {
    box-shadow: var(--shadow-md);
}

#blog .item::before {
    content:       "";
    position:      absolute;
    top:           0;
    left:          0;
    right:         0;
    height:        15px;
    width:         100%;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background:    linear-gradient(to bottom, var(--color-primary), var(--color-bg-subtle));
    z-index:       1;
}

#blog .item h4 {
    font-family: var(--font-primary);
    font-weight: var(--weight-semibold);
    font-size:   var(--text-base);
    line-height: var(--leading-normal);
    color: var(--bs-body-color);
}

#blog .item p,
#blog .item span {
    font-family:    var(--font-primary);
    font-weight:    var(--weight-medium);
    font-size:      var(--text-sm);
    line-height:    var(--leading-normal);
    letter-spacing: var(--tracking-wide);
}

#blog .item span {
    color: var(--color-primary);
}


/* ============================================
   BLOG DETAIL PAGE
   ============================================ */

#blog-detail .header h1 {
    font-family: var(--font-primary);
    font-weight: var(--weight-bold);
    font-size:   var(--text-4xl);
    line-height: var(--leading-normal);
}

#blog-detail .header hr {
    border:        none;
    height:        2px;
    border-radius: 2px;
    background:    linear-gradient(to right, var(--color-primary), var(--color-accent));
    margin:        24px 0;
}


/* ============================================
   EVENT DETAIL PAGE
   ============================================ */

#event-detail .header .logo-container {
    background-color: var(--color-primary-faint); 
    border-radius:    var(--radius-lg);
    border:           1px solid var(--color-primary);
    padding:          50px 35px;
}

#event-detail .header h1 {
    font-family: var(--font-display);
    font-weight: var(--weight-normal);
    font-size:   var(--text-43px); 
    line-height: var(--leading-normal);
    color:       var(--color-primary);
}

#event-detail .header p {
    font-family:    var(--font-mono);
    font-weight:    var(--weight-normal);
    font-size:      var(--text-md);
    line-height:    var(--leading-normal);
    letter-spacing: var(--tracking-wide);
    color:          var(--color-primary);
}

#event-detail .btn-guide {
    font-family:      var(--font-display);
    font-weight:      var(--weight-normal);
    font-size:        var(--text-md);
    line-height:      var(--leading-normal);
    width:            fit-content;
    padding:          10px 20px;
    border-radius:    var(--radius-full);
    background-color: var(--color-primary-subtle) !important;
    color:            var(--color-primary) !important;
    vertical-align:   middle;
}

#event-detail .btn-guide span {
    line-height: 1;
}

#event-detail .file-cta .item {
    background-color: var(--color-primary);
    border-radius:    var(--radius-full);
    padding:          10px 40px;
    color:            var(--color-text-inverse);
    font-family:      var(--font-primary);
    font-weight:      var(--weight-semibold);
    font-size:        var(--text-sm);
    line-height:      var(--leading-normal);
    text-decoration:  none;
}

#event-detail .event-description p {
    font-family:    var(--font-primary);
    font-weight:    var(--weight-medium);
    font-size:      var(--text-md);
    line-height:    var(--leading-normal);
    letter-spacing: var(--tracking-wide);
    text-align:     justify;
}

#event-detail .event-timeline {
    border-radius:           var(--radius-2xl);
    border:                  1px solid var(--color-border-strong);
    backdrop-filter:         blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding:                 50px;
}

#event-detail .event-information {
    background-color:        var(--color-surface-haze); 
    border-radius:           var(--radius-full);
    -webkit-backdrop-filter: blur(100px);
    backdrop-filter:         blur(100px);
    padding:                 20px 40px;
}

#event-detail .event-information p {
    font-family:    var(--font-primary);
    font-weight:    var(--weight-medium);
    font-size:      var(--text-base);
    line-height:    var(--leading-normal);
    letter-spacing: var(--tracking-wide);
}

#event-detail .timeline .dot-line-wrapper {
    width:          10px;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    position:       relative;
    min-height:     100%;
}

#event-detail .timeline .dot {
    width:         40px;
    height:        40px;
    background:    linear-gradient(to bottom, var(--color-primary), var(--color-bg-subtle));
    border-radius: 50%;
    z-index:       1;
    margin-top:    0;
    margin-bottom: 20px;
}

#event-detail .timeline .item:not(:last-child)::after {
    content:  "";
    position: absolute;
    left:     4px;
    top:      35px;
    height:   100%;
    width:    2px;
    background-image: repeating-linear-gradient(
        to bottom,
        var(--color-primary),
        var(--color-primary)  10px,
        transparent           10px,
        transparent           20px,
        var(--color-accent)   20px,
        var(--color-accent)   30px,
        transparent           30px,
        transparent           40px
    );
    z-index: 0;
}

#event-detail .timeline h6 {
    font-family: var(--font-primary);
    font-weight: var(--weight-semibold);
    font-size:   var(--text-19px); 
    line-height: var(--leading-normal);
    color:       var(--color-primary);
}

#event-detail .event-banner img {
    border-radius: var(--radius-xl);
}

.event-contact-person h1,
.event-speaker h1 {
    font-family: var(--font-display);
    font-weight: var(--weight-normal);
    font-size:   var(--text-25px); 
    line-height: var(--leading-normal);
}

.event-speaker .image {
    position:            relative;
    overflow:            hidden;
    width:               100%;
    padding-bottom:      100%;
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
}

.event-speaker .image img {
    width:     100%;
    height:    100%;
    object-fit: contain;
    position:  absolute;
    top:       calc(50%);
    left:      calc(50%);
    transform: translate(-50%, -50%);
    display:   block;
    max-height: 100%;
    max-width:  100%;
}

.event-speaker .background-photo {
    background-image:    url('../images/background-speaker.png');
    background-size:     cover;
    background-position: center;
}

.event-speaker h4 {
    font-family: var(--font-mono);
    font-weight: var(--weight-normal);
    font-size:   var(--text-21px); 
    line-height: var(--leading-normal);
}

.event-speaker h6 {
    font-family: var(--font-primary);
    font-weight: var(--weight-semibold);
    font-size:   var(--text-19px); 
    line-height: var(--leading-normal);
    color:       var(--color-primary);
}

.event-speaker p {
    font-family: var(--font-primary);
    font-weight: var(--weight-medium);
    font-size:   var(--text-md);
    line-height: var(--leading-normal);
    color:       var(--color-text);
}


/* ============================================
   SPONSORSHIP PAGE
   ============================================ */

#sponsorship .header h1 {
    font-family: var(--font-display);
    font-weight: var(--weight-normal);
    font-size:   var(--text-62px);
    line-height: var(--leading-normal);
}

#sponsorship .header p {
    font-family:    var(--font-primary);
    font-weight:    var(--weight-medium);
    font-size:      var(--text-base);
    line-height:    var(--leading-normal);
    letter-spacing: var(--tracking-wide);
}

#sponsorship .sponsor-container {
    position:         relative;
    overflow:         hidden;
    background-color: var(--color-surface-light);
    border-radius:    var(--radius-xl);
    color:            var(--color-primary);
}

#sponsorship .sponsor-container .wrapper * {
    position: relative;
    z-index:  2;
}

#sponsorship .item:not(:last-child) {
    margin-bottom: 3rem;
}

#sponsorship .item .img-container {
    position:         relative;
    overflow:         hidden;
    padding:          25px 15px;
    background-color: var(--color-surface-light);
    border-radius:    var(--radius-md);
}

#sponsorship .item h6 {
    font-family: var(--font-primary);
    font-weight: var(--weight-medium);
    font-size:   var(--text-19px); 
    line-height: var(--leading-normal);
    color:       var(--color-primary);
}

#sponsorship .item a {
    padding:          10px;
    background-color: var(--color-primary);
    border-radius:    var(--radius-sm);
}


/* ============================================
   MODAL Q&A
   ============================================ */

#modal-qna .modal-content {
    overflow:      hidden;
    border:        0;
    border-radius: var(--radius-xl) !important;
    background-color: var(--color-surface-light);
    box-shadow:       var(--shadow-lg);
}

#modal-qna .modal-header {
    border-bottom: unset !important;
}

#modal-qna h1 {
    font-family: var(--font-primary);
    font-weight: var(--weight-bold);
    font-size:   var(--text-base);
    line-height: var(--leading-normal);
    text-align:  center !important;
    color:       var(--color-primary);
}

#modal-qna h4 {
    font-family: var(--font-primary);
    font-weight: var(--weight-semibold);
    font-size:   var(--text-base);
    line-height: var(--leading-normal);
    color:       var(--color-text-dark);
}

#modal-qna hr {
    border-top: 1px solid var(--raw-grey);
}

#modal-qna a {
    border-radius:    var(--radius-sm);
    background-color: var(--color-primary);
    padding:          5px 8px 8px 8px;
}

#modal-qna p {
    font-family: var(--font-primary);
    font-weight: var(--weight-semibold);
    font-size:   var(--text-base);
    line-height: var(--leading-normal);
    color:       var(--color-text-dark);
}

#modal-qna .form-group-wrapper {
    background-color: var(--raw-background);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-lg);
    padding:          25px;
}

#modal-qna label {
    font-family: var(--font-primary);
    font-weight: var(--weight-medium);
    font-size:   var(--text-sm);
    line-height: 120%;
    color:       var(--raw-grey);
}

#modal-qna .btn-primary {
    background-color: var(--color-primary) !important;
    border-radius:    var(--radius-full) !important;
    padding:          10px 40px !important;
    color:            var(--color-text-inverse) !important;
}


/* ============================================
   MODAL REGISTRATION GUIDE
   ============================================ */

#modal-registration-guide .modal-guide-content {
    background-color: var(--color-surface-light);
    border:           none;
    border-radius:    var(--radius-xl) !important;
    overflow:         hidden;
    max-height:       90vh;
    display:          flex;
    flex-direction:   column;
}

#modal-registration-guide .modal-guide-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         20px 28px;
    border-bottom:   1px solid var(--color-border);
    flex-shrink:     0;
}

#modal-registration-guide .modal-guide-icon-wrap {
    background-color: var(--color-primary);
    border-radius:    var(--radius-md);
    width:            40px;
    height:           40px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
}

#modal-registration-guide .modal-guide-icon {
    width:  18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

#modal-registration-guide .modal-guide-label {
    font-family:    var(--font-primary);
    font-weight:    var(--weight-medium);
    font-size:      var(--text-xs);
    color:          var(--raw-grey);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

#modal-registration-guide .modal-guide-title {
    font-family: var(--font-display);
    font-weight: var(--weight-normal);
    font-size:   var(--text-xl);
    color:       var(--color-text-dark);
    line-height: var(--leading-snug);
}

#modal-registration-guide .modal-guide-close {
    background:  transparent;
    border:      none;
    padding:     6px;
    line-height: 0;
    cursor:      pointer;
}

#modal-registration-guide .modal-guide-close img {
    width:  20px;
    height: 20px;
    filter: brightness(0);
}

#modal-registration-guide .rotate-90 {
    transform: rotate(90deg);
}

#modal-registration-guide .modal-guide-body {
    flex:       1;
    min-height: 0;
    position:   relative;
}

#modal-registration-guide .modal-guide-iframe {
    width:   100%;
    height:  68vh;
    border:  none;
    display: block;
}

#modal-registration-guide .modal-guide-loading,
#modal-registration-guide .modal-guide-empty {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    height:          68vh;
    color:           var(--raw-grey);
    font-family:     var(--font-primary);
    font-size:       var(--text-sm);
}

#modal-registration-guide .modal-guide-empty-icon {
    width:  40px;
    height: 40px;
    filter: brightness(0) opacity(0.3);
}

#modal-registration-guide .modal-guide-footer {
    padding:         16px 28px;
    border-top:      1px solid var(--color-border);
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-shrink:     0;
}

#modal-registration-guide .btn-guide-download {
    font-family:     var(--font-primary);
    font-weight:     var(--weight-semibold);
    font-size:       var(--text-sm);
    color:           var(--color-primary);
    text-decoration: none;
}

#modal-registration-guide .btn-guide-download img {
    width:  16px;
    height: 16px;
    rotate: 180deg;
    filter: invert(53%) sepia(70%) saturate(400%) hue-rotate(5deg) brightness(90%);
}

#modal-registration-guide .btn-guide-dismiss {
    background:    transparent;
    border:        1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding:       8px 24px;
    font-family:   var(--font-primary);
    font-weight:   var(--weight-medium);
    font-size:     var(--text-sm);
    color:         var(--raw-grey);
    cursor:        pointer;
    transition:    border-color 0.2s ease;
}

#modal-registration-guide .btn-guide-dismiss:hover {
    border-color: var(--color-primary);
    color:        var(--color-primary);
}


/* ============================================
   PAGINATION
   ============================================ */

.pagination-custom .page-link {
    background:  transparent;
    border:      none;
    font-family: var(--font-primary);
    color:       var(--color-text);
    font-weight: var(--weight-regular);
}

.pagination-custom .page-item.active .page-link {
    color:            var(--color-primary);
    background-color: transparent;
    font-weight:      var(--weight-bold);
}

.pagination-custom .page-link:hover {
    color: var(--color-primary);
}

.pagination-custom .page-link.arrow {
    background-color: var(--color-primary);
    width:            36px;
    height:           36px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    border-radius:    50%;
    padding:          0;
}

.pagination-custom .page-link.arrow img {
    filter: brightness(0);
}

.pagination-custom .page-link.dots {
    pointer-events: none;
    color:          var(--raw-grey);
    cursor:         default;
}

.rotate-180 {
    transform: rotate(180deg);
}


/* ============================================
   RESPONSIVE — Mobile (max 575px)
   ============================================ */

@media (max-width: 575.98px) {
    /* reserved */
}


/* ============================================
   RESPONSIVE — sm → md (max 767px)
   ============================================ */

@media (max-width: 767.98px) {

    /* UTILITIES */
    .btn-guide {
        font-size:   var(--text-xs);
        padding:     8px 14px;
        max-width:   100%;
        white-space: normal;
        text-align:  center;
    }

    .btn-guide span {
        line-height: 1.1;
    }

    .btn-guide .event-card-button-icon {
        width:  14px;
        height: 14px;
    }

    .recaptcha-wrapper {
        transform:        scale(0.85);
        transform-origin: center;
    }

    /* NAVBAR */
    nav .contact-menu h4 {
        font-weight: var(--weight-medium);
        font-size:   var(--text-base) !important;
        line-height: var(--leading-normal);
        color:       var(--color-text-dark);
    }

    nav .contact-menu a h6 {
        font-weight: var(--weight-medium) !important;
        font-size:   var(--text-xs) !important;
        line-height: 100% !important;
    }

    nav .contact-menu a p {
        font-weight:    var(--weight-medium) !important;
        font-size:      var(--text-xs) !important;
        line-height:    100% !important;
        letter-spacing: 1px !important;
    }

    /* SITE WRAPPER */
    .site-wrapper {
        border-top-left-radius:  var(--radius-xl);
        border-top-right-radius: var(--radius-xl);
        background-size:         100% 15%;
        background-position:     top center;
    }

    /* HERO */
    #hero p {
        font-size: var(--text-xs);
    }

    #hero a {
        padding:     8px 15px;
        font-size:   var(--text-xs);
        font-weight: var(--weight-medium);
    }

    #hero h3 {
        font-size:   var(--text-3xl);
        line-height: var(--leading-base);
    }

    /* ABOUT */
    #about {
        padding-top: 0 !important;
    }

    #about iframe {
        height:        200px !important;
        border-radius: var(--radius-lg) !important;
        border:        0.5px solid var(--color-primary);
    }

    #about p {
        font-size: var(--text-xs);
    }

    /* EVENT */
    #event {
        border-radius: var(--radius-xl);
    }

    #event .texture {
        width: 35%;
    }

    #event h1 {
        font-size: var(--text-xl);
    }

    #event p {
        font-size: var(--text-xs);
    }

    #event .item {
        position:       relative;
        padding-top:    70px;
        padding-bottom: 150px;
        margin-bottom:  30px;
    }

    #event .info {
        position:      absolute;
        left:          0;
        top:           100%;
        padding-left:  calc(var(--bs-gutter-x) * .5);
        padding-right: calc(var(--bs-gutter-x) * .5);
    }

    #event .event-card {
        min-height: 340px;
    }

    #event .event-card-title {
        font-size: var(--text-md);
    }

    #event .event-card-info p {
        font-size: var(--text-xs);
    }

    #event .event-card-icon {
        margin-top: 0;
    }

    #event .event-card-action .btn-register {
        font-weight: var(--weight-normal);
        font-size:   var(--text-xs);
        padding:     5px 15px;
    }

    #event .event-card-action .btn-guide {
        font-weight: var(--weight-normal);
        font-size:   var(--text-xs);
        padding:     5px 15px;
    }

    /* NEWS */
    #news {
        padding-top:    0 !important;
        padding-bottom: 0 !important;
    }

    #news .news-container {
        padding-left:  8%;
        padding-right: 8%;
    }

    #news .news {
        margin-top: 50px !important;
    }

    #news h1 {
        font-size: var(--text-md);
    }

    #news p {
        font-size: var(--text-xs);
    }

    #news .news-mobile-wrapper {
        padding-top: 10px;
    }

    #news .news-mobile-wrapper .item {
        padding:       10px;
        margin-bottom: 22px;
    }

    #news .news-mobile-wrapper .item::before {
        width:         4px;
        border-radius: 4px 0 0 4px;
    }

    #news .news-mobile-wrapper .item::after {
        width:  100%;
        bottom: -12px;
    }

    #news .news-mobile-wrapper .item h4 {
        font-size:   var(--text-sm);
        line-height: var(--leading-snug);
        margin-bottom: 12px;
        display:            -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow:           hidden;
    }

    #news .news-mobile-wrapper .item p,
    #news .news-mobile-wrapper .item a {
        font-size: var(--text-xs);
    }

    #news .news-mobile-wrapper .info {
        min-width: 0;
    }

    #news .news-mobile-wrapper .info img {
        width:      12px;
        height:     12px;
        flex-shrink: 0;
    }

    #news .news-mobile-wrapper .info p {
        white-space:   nowrap;
        overflow:      hidden;
        text-overflow: ellipsis;
    }

    #news .news-mobile-wrapper .read-more {
        white-space: nowrap;
        flex-shrink: 0;
    }

    #news .news-mobile-wrapper .read-more img {
        width:  10px;
        height: 10px;
    }

    #news .custom-pagination-container {
        margin-top:    20px;
        margin-bottom: 8px !important;
        border:        unset !important;
    }

    #news .pagination-custom {
        gap:       4px;
        flex-wrap: wrap;
    }

    #news .pagination-custom .page-link {
        font-size:   var(--text-xs);
        padding:     4px 7px;
        line-height: 1;
    }

    #news .pagination-custom .page-link.number {
        min-width:  20px;
        text-align: center;
    }

    #news .pagination-custom .page-link.arrow {
        width:   26px;
        height:  26px;
        padding: 0;
    }

    #news .pagination-custom .page-link.arrow img {
        width:  10px;
        height: 10px;
    }

    #news .pagination-custom .page-item.disabled .page-link {
        opacity:        0.45;
        pointer-events: none;
    }

    #news .pagination-custom .page-link.dots {
        padding-left:  3px;
        padding-right: 3px;
    }

    #news .news-mobile-view-all {
        display:         inline-flex;
        align-items:     center;
        justify-content: center;
        gap:             4px;
        font-family:     var(--font-primary);
        font-weight:     var(--weight-semibold);
        font-size:       var(--text-xs);
        line-height:     var(--leading-normal);
        color:           var(--color-primary);
        text-decoration: none;
        margin-top:      4px;
    }

    #news .news-mobile-view-all:hover {
        color: var(--color-primary);
    }

    /* SPONSOR */
    #sponsor {
        padding-top:    45px !important;
        padding-bottom: 0 !important;
        overflow:       hidden;
    }

    #sponsor .container {
        padding-left:  35px;
        padding-right: 35px;
    }

    #sponsor .row {
        position:    relative;
        align-items: flex-end !important;
    }

    #sponsor .img-container {
        position:        relative;
        padding:         16px 22px !important;
        border-radius:   28px;
        min-height:      118px;
        display:         flex;
        flex-direction:  column;
        align-items:     center;
        justify-content: center;
        overflow:        visible;
    }

    #sponsor p {
        font-size:     var(--text-2xs); 
        line-height:   1.2;
        margin-bottom: 12px !important;
    }

    #sponsor .img-container > img:not(.img-container-light) {
        width:      100%;
        max-height: 58px;
        object-fit: contain;
    }

    #sponsor .img-container-light-right {
        display: none;
    }

    #sponsor .img-container-light-left {
        display:        block;
        position:       absolute;
        left:           50%;
        right:          auto;
        top:            20px;
        height:         200px;
        width:          auto;
        z-index:        -1;
        transform:      translateX(-50%);
        pointer-events: none;
    }

    #sponsor .col-md-1.col-6 {
        position:   relative;
        z-index:    4;
        margin-top: 12px;
    }

    #sponsor .col-md-1.col-6.order-2 {
        justify-content: center !important;
        padding-right:   0;
    }

    #sponsor .col-md-1.col-6.order-3 {
        justify-content: center !important;
        padding-left:    0;
    }

    #sponsor .mascot-img {
        position:   relative;
        z-index:    4;
        max-height: 82px;
        width:      auto;
    }

    /* FOOTER */
    footer {
        border-top-left-radius:  60px !important;
        border-top-right-radius: 60px !important;
    }

    footer h1 {
        font-size:      var(--text-25px) !important; 
        letter-spacing: 0% !important;
    }

    footer .date,
    footer .date-year {
        font-size: var(--text-sm) !important;
    }

    footer .date-year {
        line-height: unset !important;
    }

    footer .competition-categories {
        width:           100%;
        display:         flex !important;
        flex-wrap:       wrap;
        justify-content: center;
        align-items:     center;
        column-gap:      14px;
        row-gap:         18px;
        padding:         0 10px;
    }

    footer .competition-categories .nav-item {
        position:        relative;
        display:         inline-flex;
        align-items:     center;
        justify-content: center;
        margin:          0;
        padding:         0;
        font-size:       var(--text-xs) !important;
        font-weight:     var(--weight-medium);
        line-height:     1;
        white-space:     nowrap;
    }

    footer .competition-categories .nav-item::after {
        position:    static;
        display:     inline-block;
        transform:   none;
        width:       6px;
        height:      6px;
        margin-left: 14px;
        flex-shrink: 0;
    }

    footer .competition-categories .nav-item:last-child::after {
        display: none;
    }

    footer .competition-categories a {
        display:     inline-block;
        line-height: 1;
    }

    footer .address {
        font-size: var(--text-xs) !important;
    }

    footer hr {
        width: 50%;
    }

    footer .copyright,
    footer .copyright a {
        font-size: var(--text-xs);
    }

    /* BLOG PAGE */
    #blog .header h1 {
        font-size: var(--text-lg) !important;
    }

    #blog .header p,
    #blog .item p,
    #blog .item span {
        font-size: var(--text-xs) !important;
    }

    #blog .item h4 {
        font-size: var(--text-sm) !important;
    }

    /* BLOG DETAIL */
    #blog-detail .header h1 {
        font-size: var(--text-lg) !important;
    }

    #blog-detail .header img {
        width:  20px;
        height: 20px;
    }

    #blog-detail .header p,
    #blog-detail .body p {
        font-size: var(--text-xs) !important;
    }

    #blog-detail .content {
        max-width:  100%;
        overflow-x: hidden;
    }

    #blog-detail .content * {
        max-width:   100%;
        box-sizing:  border-box;
        word-wrap:   break-word;
    }

    #blog-detail .content img {
        max-width: 100%;
        height:    auto;
    }

    #blog-detail .content table {
        width:           max-content;
        border-collapse: collapse;
        display:         block;
        overflow-x:      auto;
        padding-right:   50px;
    }

    #blog-detail .content table th,
    #blog-detail .content table td {
        white-space: nowrap;
    }

    /* MARKETPLACE */
    #marketplace {
        padding-bottom: 60px;
    }

    #marketplace .container {
        padding-left:  18px;
        padding-right: 18px;
    }

    #marketplace .header {
        row-gap: 15px;
    }

    #marketplace .header h1 {
        font-size:      var(--text-3xl);
        line-height:    var(--leading-snug);
        letter-spacing: var(--tracking-normal);
    }

    #marketplace .header p {
        font-size:      var(--text-sm);
        line-height:    var(--leading-normal);
        letter-spacing: var(--tracking-normal);
    }

    #marketplace .marketplace-filter {
        margin-top: 35px;
    }

    #marketplace .marketplace-count {
        font-size: var(--text-sm);
    }

    #marketplace .marketplace-filter-group {
        width:           100%;
        justify-content: space-between !important;
        gap:             14px !important;
    }

    #marketplace .marketplace-select-wrapper {
        width:     50%;
        min-width: unset;
    }

    #marketplace .select2-container--default .select2-selection--single .select2-selection__rendered {
        font-size:     var(--text-sm);
        padding-right: 22px;
    }

    #marketplace .select2-container--default .select2-selection--single .select2-selection__clear {
        margin-right: 16px;
    }

    #marketplace .marketplace-line {
        margin-top: 16px;
    }

    #marketplace .marketplace-product-row {
        padding-top:    35px !important;
        padding-bottom: 35px !important;
        row-gap:        34px;
    }

    #marketplace .product-img {
        border-radius: var(--radius-md);
    }

    #marketplace .discount-badge {
        padding:        7px 9px;
        font-size:      var(--text-2xs); 
        letter-spacing: var(--tracking-wide);
    }

    #marketplace .product-title {
        min-height:  44px;
        font-size:   var(--text-base);
        line-height: var(--leading-snug);
    }

    #marketplace .product-price-wrapper {
        margin-top:    6px;
        margin-bottom: 18px;
    }

    #marketplace .price {
        font-size:   var(--text-base);
        font-weight: var(--weight-normal);
        line-height: var(--leading-snug);
    }

    #marketplace .discount-price {
        font-size: var(--text-xs);
    }

    #marketplace .btn-product {
        width:     100%;
        min-width: unset;
        padding:   9px 12px;
        font-size: var(--text-xs);
    }

    #marketplace .empty-product-text {
        font-size: var(--text-sm);
    }

    /* EVENT DETAIL */
    #event-detail .header {
        padding-bottom: 120px !important;
    }

    #event-detail .header .logo-container {
        padding: 15px 20px;
    }

    #event-detail .header h1 {
        font-size:   var(--text-lg) !important;
        line-height: var(--leading-snug) !important;
        margin-bottom: 0 !important;
    }

    #event-detail .header p,
    #event-detail .event-description p,
    #event-detail .event-information p {
        font-size:      var(--text-xs) !important;
        letter-spacing: 0 !important;
    }

    #event-detail .header-desc {
        width:         100%;
        position:      absolute;
        left:          0;
        bottom:        70px;
        padding-left:  calc(var(--bs-gutter-x) * .5);
        padding-right: calc(var(--bs-gutter-x) * .5);
    }

    #event-detail .header .btn-guide {
        position:    absolute;
        left:        calc(var(--bs-gutter-x) * .5);
        bottom:      18px;
        margin-top:  0 !important;
        width:       fit-content;
        padding:     12px 18px;
        font-size:   var(--text-sm);
        z-index:     2;
    }

    #event-detail .header .btn-guide img {
        width:  15px;
        height: 15px;
    }

    #event-detail .file-cta .item {
        font-size: var(--text-xs) !important;
        padding:   8px 15px;
    }

    #event-detail .event-timeline {
        padding: 20px 25px;
        margin:  auto;
    }

    #event-detail .event-information {
        border-radius: var(--radius-xl);
        padding:       20px;
    }

    #event-detail .event-information img {
        width:  20px;
        height: 20px;
    }

    #event-detail .timeline {
        justify-items: unset;
    }

    #event-detail .timeline .dot {
        width:  20px;
        height: 20px;
    }

    #event-detail .timeline h6 {
        font-size: var(--text-xs) !important;
    }

    #event-detail .timeline p {
        font-size: var(--text-2xs) !important; 
    }

    #event-detail .event-contact-person h1 {
        font-size: var(--text-base);
    }

    #event-detail .event-contact-person img {
        width:  20px;
        height: 20px;
    }

    #event-detail .event-contact-person h6,
    #event-detail .event-contact-person p {
        font-size: var(--text-xs) !important;
    }

    #event-detail .event-banner img {
        border-radius: var(--radius-lg);
    }

    /* GALLERY */
    #gallery h1 {
        font-size: var(--text-4xl);
    }

    #gallery .year-wrapper {
        padding: 30px;
    }

    #gallery .year-wrapper::before {
        top:   35px;
        left:  36px;
        right: 36px;
    }

    #gallery .year-controls {
        top: 24px;
    }

    #gallery .control-event-slider {
        top:  65px !important;
        left: calc(50% - 80px) !important;
    }

    #gallery .event-btn-prev,
    #gallery .event-btn-next {
        width:  30px !important;
        height: 30px !important;
    }

    #gallery .dot-circle {
        width:  18px !important;
        height: 18px !important;
    }

    #gallery .item.active .dot-circle::after {
        inset: -5px;
    }

    #gallery .control-event-slider {
        position:      relative !important;
        top:           unset;
        left:          unset;
        justify-content: center;
        margin-bottom: 24px;
    }

    #gallery .event-slider {
        margin-top: 1.5rem !important;
    }

    #gallery .event-slider .item .event-detail h4 {
        font-size: var(--text-2xl);
    }

    #gallery .gallery-cutout-wrapper {
        --gallery-radius: 28px;
        --panel-width:    86%;
        --panel-height:   112px;
        --panel-overlap:  54px;
    }

    #gallery .gallery-thumb-panel {
        padding:                 14px 12px 0 0;
        border-top-right-radius: 28px;
    }

    #gallery .gallery-container .image {
        padding-bottom: 84%;
    }

    #gallery .gallery-btn-prev,
    #gallery .gallery-btn-next,
    #gallery .gallery-control-placeholder {
        width:     28px;
        height:    28px;
        min-width: 28px;
    }

    #gallery .gallery-info {
        font-size: var(--text-2xs); 
    }

    /* SPONSORSHIP */
    #sponsorship {
        padding-bottom: 60px;
    }

    #sponsorship .container {
        padding-left:  18px;
        padding-right: 18px;
    }

    #sponsorship .header {
        row-gap: 15px;
    }

    #sponsorship .header h1 {
        font-size:      var(--text-3xl);
        line-height:    var(--leading-snug);
        letter-spacing: var(--tracking-normal);
    }

    #sponsorship .header p {
        font-size:      var(--text-sm);
        line-height:    var(--leading-normal);
        letter-spacing: var(--tracking-normal);
    }

    #sponsorship .sponsor-container {
        border-radius: var(--radius-lg);
    }

    #sponsorship .sponsor-container .wrapper {
        padding: 30px 18px !important;
    }

    #sponsorship .item:not(:last-child) {
        margin-bottom: 1.5rem;
    }

    #sponsorship .item .img-container {
        padding:       10px 5px;
        border-radius: var(--radius-sm);
    }

    #sponsorship .item .img-container img {
        max-height: 90px;
        width:      auto;
        object-fit: contain;
    }

    #sponsorship .item h6 {
        font-size:     var(--text-sm);
        line-height:   var(--leading-normal);
        margin-bottom: 12px;
    }

    #sponsorship .item a {
        width:            36px;
        height:           36px;
        padding:          8px;
        display:          inline-flex;
        align-items:      center;
        justify-content:  center;
        border-radius:    var(--radius-sm);
    }

    #sponsorship .item a img {
        width:  15px;
        height: 15px;
    }

    /* REGISTRATION */
    #registration .header h1 {
        font-size: var(--text-lg) !important;
    }

    #registration .header p {
        font-size: var(--text-xs) !important;
    }

    #registration .header .logo {
        padding: 15px 20px;
    }

    #registration .header h4 {
        font-size: var(--text-base) !important;
    }

    #registration .header .icon {
        width:  18px;
        height: 18px;
    }

    #registration .form {
        margin:        auto;
        border-radius: var(--radius-lg);
        padding:       30px 25px;
    }

    #registration .form input {
        border-radius: var(--radius-sm) !important;
    }

    #registration .form label {
        font-size:      var(--text-xs) !important;
        line-height:    180% !important;
        letter-spacing: 0% !important;
    }

    #registration .form input::placeholder {
        font-size:      var(--text-xs) !important;
        line-height:    180% !important;
        letter-spacing: 0% !important;
    }

    /* QNA */
    #modal-qna h1,
    #modal-qna h4 {
        font-size: var(--text-sm) !important;
    }

    #modal-qna p,
    #modal-qna label {
        font-size: var(--text-xs) !important;
    }

    /* REGISTRATION GUIDE */
    #modal-registration-guide .modal-guide-content {
        border-radius: var(--radius-lg) !important;
        max-height:    95vh;
    }

    #modal-registration-guide .modal-guide-header {
        padding: 16px 18px;
    }

    #modal-registration-guide .modal-guide-title {
        font-size: var(--text-base);
    }

    #modal-registration-guide .modal-guide-iframe,
    #modal-registration-guide .modal-guide-loading,
    #modal-registration-guide .modal-guide-empty {
        height: 55vh;
    }

    #modal-registration-guide .modal-guide-footer {
        padding: 12px 18px;
    }
}


/* ============================================
   RESPONSIVE — md → lg (max 991px)
   ============================================ */

@media (max-width: 991.98px) {

    /* BUTTON */
    .btn-guide {
        font-size: var(--text-sm);
        padding:   9px 18px;
    }

    .btn-guide .event-card-button-icon {
        width:  16px;
        height: 16px;
    }

    /* NAVBAR */
    .navbar {
        border-bottom-left-radius:  0 !important;
        border-bottom-right-radius: 0 !important;
    }

    .navbar .navbar-brand img {
        width:  auto;
        height: 45px !important;
    }

    nav .nav-link.active {
        margin:        auto;
        width:         fit-content;
        border-radius: var(--radius-xl);
        padding:       10px 20px;
    }

    nav .nav-item::after {
        content:  "";
        position: absolute;
    }

    .navbar-toggler {
        background-color: var(--color-accent-subtle);
        border:           unset !important;
    }

    .navbar-toggler:focus {
        box-shadow: none !important;
    }

    nav .nav-btn {
        padding:   10px 45px;
        font-size: var(--text-xs) !important;
        color:     var(--color-text) !important;
    }

    nav .nav-btn img {
        width:  24px;
        height: 24px;
        filter: invert(1) brightness(2) !important;
        rotate: 180deg;
    }

    nav .contact-menu h4 {
        font-weight: var(--weight-medium);
        font-size:   1.2rem;
        line-height: var(--leading-normal);
        color:       var(--color-text-dark);
    }

    nav .contact-menu .img-container {
        background-color: var(--color-primary);
        border-radius:    var(--radius-sm);
        padding:          10px;
    }

    nav .contact-menu a {
        color:          var(--raw-grey) !important;
        padding-bottom: 20px;
    }

    nav .contact-menu a:not(:last-child) {
        border-bottom: 1px solid var(--color-border);
        margin-bottom: 20px;
    }

    nav .contact-menu a h6 {
        font-weight: var(--weight-semibold);
        font-size:   var(--text-base);
        line-height: var(--leading-normal);
    }

    nav .contact-menu a p {
        font-weight:    var(--weight-medium);
        font-size:      var(--text-base);
        line-height:    100%;
        letter-spacing: 1px;
    }

    /* SITE WRAPPER */
    .site-wrapper {
        border-top-left-radius:  var(--radius-xl);
        border-top-right-radius: var(--radius-xl);
        background-size:         100% 20%;
        background-position:     top center;
    }

    /* HERO */
    #hero {
        padding-bottom: 20px;
    }

    #hero .row {
        row-gap: 0;
    }

    #hero h3 {
        font-size:   var(--text-4xl);
        line-height: var(--leading-base);
        text-align:  center;
    }

    #hero p {
        font-size: var(--text-base);
    }

    #hero a {
        padding:   9px 24px;
        font-size: var(--text-sm);
    }

    /* ABOUT */
    #about {
        padding-top:    40px;
        padding-bottom: 40px;
    }

    #about iframe {
        height:        320px;
        border-radius: var(--radius-xl);
    }

    #about p {
        font-size: var(--text-base);
    }

    /* EVENT */
    #event {
        border-radius: var(--radius-2xl);
    }

    #event .texture {
        width: 25%;
    }

    #event h1 {
        font-size: var(--text-3xl);
    }

    #event p {
        font-size: var(--text-sm);
    }

    #event .event-card {
        min-height: 360px;
        padding:    30px 24px;
    }

    #event .event-card-title {
        font-size: var(--text-2xl);
    }

    #event .event-card-info p {
        font-size: var(--text-sm);
    }

    #event .event-card-action .btn-register,
    #event .event-card-action .btn-guide {
        font-size: var(--text-sm);
        padding:   8px 16px;
    }

    /* NEWS */
    #news .news-container {
        padding-left:  4%;
        padding-right: 4%;
    }

    #news .news {
        margin-top: 80px;
    }

    #news h1 {
        font-size: var(--text-2xl);
    }

    #news p {
        font-size: var(--text-sm);
    }

    #news .item h4 {
        font-size: var(--text-base);
    }

    #news .item p,
    #news .item a {
        font-size: var(--text-sm);
    }

    #news .news-prev-btn,
    #news .news-next-btn {
        width:           34px;
        height:          34px;
        display:         flex;
        align-items:     center;
        justify-content: center;
    }

    /* SPONSOR */
    #sponsor {
        padding-top: 100px;
    }

    #sponsor .img-container {
        padding: 20px 50px;
    }

    #sponsor p {
        font-size: var(--text-base);
    }

    .mascot-img {
        max-height: 100px;
    }

    /* GALLERY */
    #gallery h1 {
        font-size: 2.75rem;
    }

    #gallery .year-wrapper {
        padding: 30px;
    }

    #gallery .year-wrapper::before {
        top:   39px;
        left:  42px;
        right: 42px;
    }

    #gallery .year-controls {
        top: 28px;
    }

    #gallery .control-event-slider {
        top:  25px;
        left: calc(50% - -150px);
    }

    #gallery .event-btn-prev,
    #gallery .event-btn-next {
        width:  46px;
        height: 46px;
    }

    #gallery .gallery-cutout-wrapper {
        --gallery-radius: 36px;
        --panel-width:    68%;
        --panel-height:   122px;
        --panel-overlap:  66px;
    }

    #gallery .gallery-thumb-panel {
        padding:                 18px 18px 0 0;
        border-top-right-radius: 36px;
    }

    #gallery .gallery-info {
        font-size: var(--text-sm);
    }

    /* MARKETPLACE */
    #marketplace {
        padding-bottom: 70px;
    }

    #marketplace .header {
        row-gap: 20px;
    }

    #marketplace .header h1 {
        font-size:    var(--text-4xl);
        line-height:  var(--leading-snug);
        white-space:  normal;
    }

    #marketplace .header p {
        font-size:   var(--text-sm);
        line-height: var(--leading-normal);
    }

    #marketplace .marketplace-filter {
        margin-top: 40px;
    }

    #marketplace .marketplace-filter-group {
        min-width: unset;
        gap:       18px !important;
    }

    #marketplace .marketplace-select-wrapper {
        min-width: 145px;
    }

    #marketplace .marketplace-line {
        margin-top: 18px;
    }

    #marketplace .marketplace-product-row {
        padding-top:    40px !important;
        padding-bottom: 40px !important;
    }

    #marketplace .product-title {
        min-height:  50px;
        font-size:   var(--text-lg);
        line-height: var(--leading-snug);
    }

    #marketplace .product-price-wrapper {
        margin-bottom: 20px;
    }

    #marketplace .price {
        font-size: var(--text-lg);
    }

    #marketplace .btn-product {
        min-width: 130px;
        padding:   9px 28px;
    }

    /* SPONSORSHIP */
    #sponsorship .header {
        row-gap: 20px;
    }

    #sponsorship .header h1 {
        font-size:   var(--text-4xl);
        line-height: var(--leading-snug);
    }

    #sponsorship .header p {
        font-size:   var(--text-sm);
        line-height: var(--leading-normal);
    }

    #sponsorship .sponsor-container {
        border-radius: var(--radius-lg);
    }

    #sponsorship .sponsor-container .wrapper {
        padding: 40px 30px !important;
    }

    #sponsorship .item:not(:last-child) {
        margin-bottom: 2.5rem;
    }

    #sponsorship .item .img-container {
        padding:       22px 14px;
        border-radius: var(--radius-md);
    }

    #sponsorship .item h6 {
        font-size:   var(--text-base);
        line-height: var(--leading-normal);
    }

    #sponsorship .item a {
        width:           38px;
        height:          38px;
        padding:         9px;
        display:         inline-flex;
        align-items:     center;
        justify-content: center;
    }

    #sponsorship .item a img {
        width:  16px;
        height: 16px;
    }

    /* REGISTRATION */
    #registration .form {
        padding: 40px 45px;
    }

    #registration .header h4 {
        font-size: var(--text-lg);
    }

    #registration .form label {
        font-size: var(--text-sm);
    }

    #registration .form input::placeholder,
    #registration .form textarea::placeholder,
    #registration .form select::placeholder {
        font-size: var(--text-sm) !important;
    }

    /* FOOTER */
    footer .date {
        font-size: var(--text-xl);
    }

    footer .date-year {
        font-size: var(--text-5xl);
    }

    footer .address {
        font-size: var(--text-sm);
    }
}


/* ============================================
   RESPONSIVE — lg → xl (max 1199px)
   ============================================ */

@media (max-width: 1199.98px) {
    /* reserved */
}


/* ============================================
   RESPONSIVE — xl → xxl (max 1399px)
   ============================================ */

@media (max-width: 1399.98px) {
    /* reserved */
}