/* =========================================================
   Combined stylesheet
   Sources merged from default.css and main.css
   Organized into:
   1) Base / reset
   2) Utility framework (.df-*)
   3) Site theme / layout
   4) Components
   5) Responsive rules
   ========================================================= */

/* =========================================================
   1) THEME TOKENS
   ========================================================= */
:root {
  --bg-primary: #000015;
  --bg-overlay: rgba(0, 0, 21, 0.7);
  --surface-primary: #1a022b;
  --surface-glass: rgba(255, 75, 255, 0.1);
  --surface-muted: rgba(255, 255, 255, 0.08);
  --text-primary: #ffffff;
  --text-muted: #cbd5e1;
  --text-subtle: gray;
  --accent-primary: #ff9800;
  --accent-secondary: #00ff80;
  --tag-bg: #237a00;
  --tag-text: #ffffff;
  --border-light: rgba(255, 255, 255, 0.18);
  --border-muted: rgba(255, 255, 255, 0.14);
  --shadow-glow: 0 8px 40px 0 rgba(45, 57, 231, 0.37);
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-pill: 999px;
}

/* =========================================================
   2) BASE / RESET
   ========================================================= */
html {
  box-sizing: border-box;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

*, *::before, *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  font-family: Verdana, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  background-color: var(--bg-primary);
}

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section {
  display: block;
}

summary {
  display: list-item;
}

audio, canvas, progress, video {
  display: inline-block;
}

progress {
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden], template {
  display: none;
}

a {
  background-color: transparent;
  color: inherit;
}

a:active,
a:hover {
  outline-width: 0;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline dotted;
}

b, strong {
  font-weight: bolder;
}

dfn {
  font-style: italic;
}

mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub { bottom: -0.25em; }
sup { top: -0.5em; }

figure {
  margin: 1em 40px;
}

img {
  border-style: none;
  vertical-align: middle;
}

code, kbd, pre, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid #eee;
  margin: 20px 0;
}

button,
input,
select,
textarea,
optgroup {
  font: inherit;
  margin: 0;
}

optgroup {
  font-weight: bold;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

html,
body {
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Segoe UI", Arial, sans-serif;
  font-weight: 400;
  margin: 10px 0;
}

h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

/* =========================================================
   3) UTILITY FRAMEWORK (.df-*)
   ========================================================= */
.bc-serif { font-family: serif; }
.df-sans-serif { font-family: sans-serif; }
.df-cursive { font-family: cursive; }
.df-monospace { font-family: monospace; }
.df-wide { letter-spacing: 4px; }
.df-image { max-width: 100%; height: auto; }

.df-table,
.df-table-all {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  display: table;
}

.df-table-all {
  border: 1px solid #ccc;
}

.df-bordered tr,
.df-table-all tr {
  border-bottom: 1px solid #ddd;
}

.df-striped tbody tr:nth-child(even),
.df-table-all tr:nth-child(even) {
  background-color: #f1f1f1;
}

.df-table-all tr:nth-child(odd) {
  background-color: #fff;
}

.df-hoverable tbody tr:hover,
.df-ul.df-hoverable li:hover {
  background-color: #ccc;
}

.df-centered tr th,
.df-centered tr td {
  text-align: center;
}

.df-table td,
.df-table th,
.df-table-all td,
.df-table-all th {
  padding: 8px;
  display: table-cell;
  text-align: left;
  vertical-align: top;
}

.df-table th:first-child,
.df-table td:first-child,
.df-table-all th:first-child,
.df-table-all td:first-child {
  padding-left: 16px;
}

.df-btn,
.df-button {
  border: none;
  display: inline-block;
  padding: 8px 16px;
  vertical-align: middle;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background-color: inherit;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.df-btn:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.df-disabled,
.df-btn:disabled,
.df-button:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

.df-disabled *,
:disabled * {
  pointer-events: none;
}

.df-btn.df-disabled:hover,
.df-btn:disabled:hover {
  box-shadow: none;
}

.df-badge,
.df-tag {
  background-color: #000;
  color: #fff;
  display: inline-block;
  padding-inline: 8px;
  text-align: center;
}

.df-badge { border-radius: 50%; }

.df-ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.df-ul li {
  padding: 8px 16px;
  border-bottom: 1px solid #ddd;
}

.df-ul li:last-child {
  border-bottom: none;
}

.df-tooltip,
.df-display-container {
  position: relative;
}

.df-tooltip .df-text { display: none; }
.df-tooltip:hover .df-text { display: inline-block; }
.df-ripple:active { opacity: 0.5; }
.df-ripple { transition: opacity 0s; }

.df-input {
  padding: 8px;
  display: block;
  border: none;
  border-bottom: 1px solid #ccc;
  width: 100%;
}

.df-select {
  padding: 9px 0;
  width: 100%;
  border: none;
  border-bottom: 1px solid #ccc;
}

.df-dropdown-click,
.df-dropdown-hover {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.df-dropdown-hover:hover .df-dropdown-content {
  display: block;
}

.df-dropdown-hover:first-child,
.df-dropdown-click:hover,
.df-dropdown-hover:hover > .df-button:first-child,
.df-dropdown-click:hover > .df-button:first-child {
  background-color: #ccc;
  color: #000;
}

.df-dropdown-content {
  cursor: auto;
  color: #000;
  background-color: #fff;
  display: none;
  position: absolute;
  min-width: 160px;
  margin: 0;
  padding: 0;
  z-index: 1;
}

.df-check,
.df-radio {
  width: 24px;
  height: 24px;
  position: relative;
  top: 6px;
}

.df-sidebar {
  height: 100%;
  width: 200px;
  background-color: #fff;
  position: fixed !important;
  z-index: 1;
  overflow: auto;
}

.df-bar-block .df-dropdown-hover,
.df-bar-block .df-dropdown-click {
  width: 100%;
}

.df-bar-block .df-dropdown-hover .df-dropdown-content,
.df-bar-block .df-dropdown-click .df-dropdown-content {
  min-width: 100%;
}

.df-bar-block .df-dropdown-hover .df-button,
.df-bar-block .df-dropdown-click .df-button,
.df-bar-block .df-bar-item {
  width: 100%;
  display: block;
  padding: 8px 16px;
  text-align: left;
  border: none;
  white-space: normal;
  float: none;
  outline: 0;
}

.df-main,
#main {
  transition: margin-left 0.4s;
}

.df-modal {
  z-index: 3;
  display: none;
  padding-top: 100px;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.df-modal-content {
  margin: auto;
  background-color: #fff;
  position: relative;
  padding: 0;
  outline: 0;
  width: 600px;
}

.df-bar {
  width: 100%;
  overflow: hidden;
}

.df-center .df-bar {
  display: inline-block;
  width: auto;
}

.df-bar .df-bar-item {
  padding: 8px 16px;
  float: left;
  width: auto;
  border: none;
  display: block;
  outline: 0;
}

.df-bar .df-dropdown-hover,
.df-bar .df-dropdown-click {
  position: static;
  float: left;
}

.df-bar .df-button { white-space: normal; }
.df-bar-block.df-center .df-bar-item { text-align: center; }
.df-block { display: block; width: 100%; }
.df-responsive { display: block; overflow-x: auto; }

.df-container::after,
.df-container::before,
.df-panel::after,
.df-panel::before,
.df-row::after,
.df-row::before,
.df-row-padding::after,
.df-row-padding::before,
.df-cell-row::before,
.df-cell-row::after,
.df-clear::after,
.df-clear::before,
.df-bar::before,
.df-bar::after {
  content: "";
  display: table;
  clear: both;
}

.df-col,
.df-half,
.df-third,
.df-twothird,
.df-threequarter,
.df-quarter {
  float: left;
  width: 100%;
}

.df-col.s1 { width: 8.33333%; }
.df-col.s2 { width: 16.66666%; }
.df-col.s3 { width: 24.99999%; }
.df-col.s4 { width: 33.33333%; }
.df-col.s5 { width: 41.66666%; }
.df-col.s6 { width: 49.99999%; }
.df-col.s7 { width: 58.33333%; }
.df-col.s8 { width: 66.66666%; }
.df-col.s9 { width: 74.99999%; }
.df-col.s10 { width: 83.33333%; }
.df-col.s11 { width: 91.66666%; }
.df-col.s12 { width: 99.99999%; }

.df-rest { overflow: hidden; }
.df-stretch { margin-left: -16px; margin-right: -16px; }
.df-content, .df-auto { margin-left: auto; margin-right: auto; }
.df-content { max-width: 980px; }
.df-auto { max-width: 1140px; }
.df-cell-row { display: table; width: 100%; }
.df-cell { display: table-cell; }
.df-cell-top { vertical-align: top; }
.df-cell-middle { vertical-align: middle; }
.df-cell-bottom { vertical-align: bottom; }
.df-hide { display: none !important; }
.df-show-block, .df-show { display: block !important; }
.df-show-inline-block { display: inline-block !important; }
.df-top, .df-bottom { position: fixed; width: 100%; z-index: 1; }
.df-top { top: 0; }
.df-bottom { bottom: 0; }

.df-overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  inset: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
}

.df-display-topleft { position: absolute; left: 0; top: 0; }
.df-display-topright { position: absolute; right: 0; top: 0; }
.df-display-bottomleft { position: absolute; left: 0; bottom: 0; }
.df-display-bottomright { position: absolute; right: 0; bottom: 0; }
.df-display-middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.df-display-left {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
}
.df-display-right {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
}
.df-display-topmiddle {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
}
.df-display-bottommiddle {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
}

.df-display-container:hover .df-display-hover { display: block; }
.df-display-container:hover span.df-display-hover { display: inline-block; }
.df-display-hover { display: none; }
.df-display-position { position: absolute; }
.df-circle { border-radius: 50%; }
.df-round-small { border-radius: 2px; }
.df-round, .df-round-medium { border-radius: 4px; }
.df-round-large { border-radius: 8px; }
.df-round-xlarge { border-radius: 16px; }
.df-round-xxlarge { border-radius: 32px; }

.df-row-padding,
.df-row-padding > .df-half,
.df-row-padding > .df-third,
.df-row-padding > .df-twothird,
.df-row-padding > .df-threequarter,
.df-row-padding > .df-quarter,
.df-row-padding > .df-col {
  padding: 0 8px;
}

.df-container,
.df-panel {
  padding: 0.01em 16px;
}

.df-panel {
  margin-top: 16px;
  margin-bottom: 16px;
}

.df-code,
.df-codespan {
  font-family: Consolas, "courier new", monospace;
  font-size: 16px;
}

.df-code {
  width: auto;
  background-color: #fff;
  padding: 8px 12px;
  border-left: 4px solid #4CAF50;
  word-wrap: break-word;
}

.df-codespan {
  color: crimson;
  background-color: #f1f1f1;
  padding-inline: 4px;
  font-size: 110%;
}

.df-card,
.df-card-2 {
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}

.df-card-4,
.df-hover-shadow:hover {
  box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), 0 4px 20px 0 rgba(0,0,0,0.19);
}

.df-spin { animation: w3-spin 2s infinite linear; }
@keyframes w3-spin { from { transform: rotate(0deg); } to { transform: rotate(359deg); } }
.df-animate-fading { animation: fading 10s infinite; }
@keyframes fading { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
.df-animate-opacity { animation: opac 0.8s; }
@keyframes opac { from { opacity: 0; } to { opacity: 1; } }
.df-animate-top { position: relative; animation: animatetop 0.4s; }
@keyframes animatetop { from { top: -300px; opacity: 0; } to { top: 0; opacity: 1; } }
.df-animate-left { position: relative; animation: animateleft 0.4s; }
@keyframes animateleft { from { left: -300px; opacity: 0; } to { left: 0; opacity: 1; } }
.df-animate-right { position: relative; animation: animateright 0.4s; }
@keyframes animateright { from { right: -300px; opacity: 0; } to { right: 0; opacity: 1; } }
.df-animate-bottom { position: relative; animation: animatebottom 0.4s; }
@keyframes animatebottom { from { bottom: -300px; opacity: 0; } to { bottom: 0; opacity: 1; } }
.df-animate-zoom { animation: animatezoom 0.6s; }
@keyframes animatezoom { from { transform: scale(0); } to { transform: scale(1); } }
.df-animate-input { transition: width 0.4s ease-in-out; }
.df-animate-input:focus { width: 100% !important; }
.df-opacity, .df-hover-opacity:hover { opacity: 0.6; }
.df-opacity-off, .df-hover-opacity-off:hover { opacity: 1; }
.df-opacity-max { opacity: 0.25; }
.df-opacity-min { opacity: 0.75; }
.df-greyscale-max, .df-grayscale-max, .df-hover-greyscale:hover, .df-hover-grayscale:hover { filter: grayscale(100%); }
.df-greyscale, .df-grayscale { filter: grayscale(75%); }
.df-greyscale-min, .df-grayscale-min { filter: grayscale(50%); }
.df-sepia { filter: sepia(75%); }
.df-sepia-max, .df-hover-sepia:hover { filter: sepia(100%); }
.df-sepia-min { filter: sepia(50%); }
.df-tiny { font-size: 10px !important; }
.df-small { font-size: 12px !important; }
.df-medium { font-size: 15px !important; }
.df-large { font-size: 18px !important; }
.df-xlarge { font-size: 24px !important; }
.df-xxlarge { font-size: 36px !important; }
.df-xxxlarge { font-size: 48px !important; }
.df-jumbo { font-size: 64px !important; }
.df-left-align { text-align: left !important; }
.df-right-align { text-align: right !important; }
.df-justify { text-align: justify !important; }
.df-center { text-align: center !important; }
.df-border-0 { border: 0 !important; }
.df-border { border: 1px solid #ccc !important; }
.df-border-top { border-top: 1px solid #ccc !important; }
.df-border-bottom { border-bottom: 1px solid #ccc !important; }
.df-border-left { border-left: 1px solid #ccc !important; }
.df-border-right { border-right: 1px solid #ccc !important; }
.df-topbar { border-top: 6px solid #ccc !important; }
.df-bottombar { border-bottom: 6px solid #ccc !important; }
.df-leftbar { border-left: 6px solid #ccc !important; }
.df-rightbar { border-right: 6px solid #ccc !important; }
.df-section, .df-code { margin-top: 16px !important; margin-bottom: 16px !important; }
.df-margin { margin: 16px !important; }
.df-margin-top { margin-top: 16px !important; }
.df-margin-bottom { margin-bottom: 16px !important; }
.df-margin-left { margin-left: 16px !important; }
.df-margin-right { margin-right: 16px !important; }
.df-padding-small { padding: 4px 8px !important; }
.df-padding { padding: 8px 16px !important; }
.df-padding-large { padding: 12px 24px !important; }
.df-padding-16 { padding-top: 16px !important; padding-bottom: 16px !important; }
.df-padding-24 { padding-top: 24px !important; padding-bottom: 24px !important; }
.df-padding-32 { padding-top: 32px !important; padding-bottom: 32px !important; }
.df-padding-48 { padding-top: 48px !important; padding-bottom: 48px !important; }
.df-padding-64 { padding-top: 64px !important; padding-bottom: 64px !important; }
.df-padding-top-64 { padding-top: 64px !important; }
.df-padding-top-48 { padding-top: 48px !important; }
.df-padding-top-32 { padding-top: 32px !important; }
.df-padding-top-24 { padding-top: 24px !important; }
.df-left { float: left !important; }
.df-right { float: right !important; }
.df-button:hover { color: #000 !important; background-color: #ccc !important; }
.df-transparent, .df-hover-none:hover { background-color: transparent !important; }
.df-hover-none:hover { box-shadow: none !important; }

/* Utility colors */
.df-amber,.df-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
.df-aqua,.df-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
.df-blue,.df-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
.df-light-blue,.df-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
.df-brown,.df-hover-brown:hover{color:#fff!important;background-color:#795548!important}
.df-cyan,.df-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
.df-blue-grey,.df-hover-blue-grey:hover,.df-blue-gray,.df-hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
.df-green,.df-hover-green:hover{color:#fff!important;background-color:#4CAF50!important}
.df-light-green,.df-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}
.df-indigo,.df-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
.df-khaki,.df-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}
.df-lime,.df-hover-lime:hover{color:#000!important;background-color:#cddc39!important}
.df-orange,.df-hover-orange:hover{color:#000!important;background-color:#ff9800!important}
.df-deep-orange,.df-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
.df-pink,.df-hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
.df-purple,.df-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
.df-deep-purple,.df-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
.df-red,.df-hover-red:hover{color:#fff!important;background-color:#f44336!important}
.df-sand,.df-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
.df-teal,.df-hover-teal:hover{color:#fff!important;background-color:#009688!important}
.df-yellow,.df-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
.df-white,.df-hover-white:hover{color:#000!important;background-color:#fff!important}
.df-black,.df-hover-black:hover{color:#fff!important;background-color:#000!important}
.df-grey,.df-hover-grey:hover,.df-gray,.df-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
.df-light-grey,.df-hover-light-grey:hover,.df-light-gray,.df-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
.df-dark-grey,.df-hover-dark-grey:hover,.df-dark-gray,.df-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
.df-pale-red,.df-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
.df-pale-green,.df-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
.df-pale-yellow,.df-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
.df-pale-blue,.df-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important}
.df-text-amber,.df-hover-text-amber:hover{color:#ffc107!important}
.df-text-aqua,.df-hover-text-aqua:hover{color:#00ffff!important}
.df-text-blue,.df-hover-text-blue:hover{color:#2196F3!important}
.df-text-light-blue,.df-hover-text-light-blue:hover{color:#87CEEB!important}
.df-text-brown,.df-hover-text-brown:hover{color:#795548!important}
.df-text-cyan,.df-hover-text-cyan:hover{color:#00bcd4!important}
.df-text-blue-grey,.df-hover-text-blue-grey:hover,.df-text-blue-gray,.df-hover-text-blue-gray:hover{color:#607d8b!important}
.df-text-green,.df-hover-text-green:hover{color:#4CAF50!important}
.df-text-light-green,.df-hover-text-light-green:hover{color:#8bc34a!important}
.df-text-indigo,.df-hover-text-indigo:hover{color:#3f51b5!important}
.df-text-khaki,.df-hover-text-khaki:hover{color:#b4aa50!important}
.df-text-lime,.df-hover-text-lime:hover{color:#cddc39!important}
.df-text-orange,.df-hover-text-orange:hover{color:#ff9800!important}
.df-text-deep-orange,.df-hover-text-deep-orange:hover{color:#ff5722!important}
.df-text-pink,.df-hover-text-pink:hover{color:#e91e63!important}
.df-text-purple,.df-hover-text-purple:hover{color:#9c27b0!important}
.df-text-deep-purple,.df-hover-text-deep-purple:hover{color:#673ab7!important}
.df-text-red,.df-hover-text-red:hover{color:#f44336!important}
.df-text-sand,.df-hover-text-sand:hover{color:#fdf5e6!important}
.df-text-teal,.df-hover-text-teal:hover{color:#009688!important}
.df-text-yellow,.df-hover-text-yellow:hover{color:#d2be0e!important}
.df-text-white,.df-hover-text-white:hover{color:#fff!important}
.df-text-black,.df-hover-text-black:hover{color:#000!important}
.df-text-grey,.df-hover-text-grey:hover,.df-text-gray,.df-hover-text-gray:hover{color:#757575!important}
.df-text-light-grey,.df-hover-text-light-grey:hover,.df-text-light-gray,.df-hover-text-light-gray:hover{color:#f1f1f1!important}
.df-text-dark-grey,.df-hover-text-dark-grey:hover,.df-text-dark-gray,.df-hover-text-dark-gray:hover{color:#3a3a3a!important}
.df-border-amber,.df-hover-border-amber:hover{border-color:#ffc107!important}
.df-border-aqua,.df-hover-border-aqua:hover{border-color:#00ffff!important}
.df-border-blue,.df-hover-border-blue:hover{border-color:#2196F3!important}
.df-border-light-blue,.df-hover-border-light-blue:hover{border-color:#87CEEB!important}
.df-border-brown,.df-hover-border-brown:hover{border-color:#795548!important}
.df-border-cyan,.df-hover-border-cyan:hover{border-color:#00bcd4!important}
.df-border-blue-grey,.df-hover-border-blue-grey:hover,.df-border-blue-gray,.df-hover-border-blue-gray:hover{border-color:#607d8b!important}
.df-border-green,.df-hover-border-green:hover{border-color:#4CAF50!important}
.df-border-light-green,.df-hover-border-light-green:hover{border-color:#8bc34a!important}
.df-border-indigo,.df-hover-border-indigo:hover{border-color:#3f51b5!important}
.df-border-khaki,.df-hover-border-khaki:hover{border-color:#f0e68c!important}
.df-border-lime,.df-hover-border-lime:hover{border-color:#cddc39!important}
.df-border-orange,.df-hover-border-orange:hover{border-color:#ff9800!important}
.df-border-deep-orange,.df-hover-border-deep-orange:hover{border-color:#ff5722!important}
.df-border-pink,.df-hover-border-pink:hover{border-color:#e91e63!important}
.df-border-purple,.df-hover-border-purple:hover{border-color:#9c27b0!important}
.df-border-deep-purple,.df-hover-border-deep-purple:hover{border-color:#673ab7!important}
.df-border-red,.df-hover-border-red:hover{border-color:#f44336!important}
.df-border-sand,.df-hover-border-sand:hover{border-color:#fdf5e6!important}
.df-border-teal,.df-hover-border-teal:hover{border-color:#009688!important}
.df-border-yellow,.df-hover-border-yellow:hover{border-color:#ffeb3b!important}
.df-border-white,.df-hover-border-white:hover{border-color:#fff!important}
.df-border-black,.df-hover-border-black:hover{border-color:#000!important}
.df-border-grey,.df-hover-border-grey:hover,.df-border-gray,.df-hover-border-gray:hover{border-color:#9e9e9e!important}
.df-border-light-grey,.df-hover-border-light-grey:hover,.df-border-light-gray,.df-hover-border-light-gray:hover{border-color:#f1f1f1!important}
.df-border-dark-grey,.df-hover-border-dark-grey:hover,.df-border-dark-gray,.df-hover-border-dark-gray:hover{border-color:#616161!important}
.df-border-pale-red,.df-hover-border-pale-red:hover{border-color:#ffe7e7!important}
.df-border-pale-green,.df-hover-border-pale-green:hover{border-color:#e7ffe7!important}
.df-border-pale-yellow,.df-hover-border-pale-yellow:hover{border-color:#ffffcc!important}
.df-border-pale-blue,.df-hover-border-pale-blue:hover{border-color:#e7ffff!important}

/* =========================================================
   4) SITE LAYOUT / THEME
   ========================================================= */
#navDemo {
  display: none;
  background-color: var(--bg-primary);
}

#navDemo a {
  font-size: 13px !important;
  color: var(--accent-primary);
}

#navDemo.is-open {
  display: block;
}

.header-large-screen {
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--accent-primary);
  font-size: 18px !important;
  padding: 0 12px;
}

.header-large-screen .df-bar-item {
  padding: 10px 12px !important;
}

.header-main {
  position: relative;
}

.hero {
  height: 650px;
  background-image: url("../images/banner.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-primary);
}

.hero-description {
  height: 650px;
  background-color: var(--bg-overlay);
  display: flex;
}

.hero-text {
  width: 70% !important;
  margin: auto !important;
  display: flex;
  flex-wrap: wrap;
}

.hero-summary {
  width: 100%;
  text-align: center;
}

.hero-summary p {
  color: var(--text-primary);
  width: min(900px, 90%);
  margin: 0 auto;
  font-size: 1.15rem;
  line-height: 1.6;
}

.hero-text p {
  color: var(--text-primary);
  width: 50%;
}

.hero-title,
.hero-title2 {
  font-weight: 800;
  text-transform: uppercase;
  color: var(--accent-primary);
  text-align: center;
  margin-right: 65px;
}

.hero-title { font-size: 80px; }
.hero-title2 { font-size: 50px; }

.social { width: 100%; }
.icons { font-size: 20px; letter-spacing: 5px; }

main {
  width: 80% !important;
  margin: auto !important;
}

.title {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 40px;
  margin: 50px 0;
  text-align: center;
  text-transform: uppercase;
}

.main-style { padding-bottom: 40px; }

h3,
h4,
h5 {
  color: var(--text-primary);
}

h3,
.pro-title {
  text-align: center;
}

.pro-title {
  color: var(--accent-primary);
}

span { padding-right: 10px; }
.person { color: var(--accent-secondary); }
.df-back { background-color: var(--bg-primary); }
.pro-size { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.side-margin { margin-top: 50px; }
.side-margin2 { margin-top: 80px; }
.side-small { font-size: clamp(1.15rem, 3vw, 2rem); }
.title-style { margin-top: 50px; text-align: left; }
.nas { color: var(--text-primary); padding: 15px; }
.skill-label { display: block; color: var(--accent-primary); font-weight: 600; margin-bottom: 4px; }

/* =========================================================
   5) SITE COMPONENTS
   ========================================================= */
.games,
.game-store,
.contact {
  display: flex;
  flex-wrap: wrap;
}

.games {
  align-items: center;
  justify-content: space-evenly;
}

.game-list,
.game-store-list,
.event-hero,
.event-hero2,
.event-hero3,
.contact-card,
.game-card {
  border-radius: var(--radius-lg);
}

.game-list {
  margin: 30px;
  padding: 20px;
  height: auto;
  width: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--surface-glass);
  box-shadow: var(--shadow-glow);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid var(--border-light);
}

.game-list:hover,
.game-store-list:hover {
  transform: scale(1.05);
}

.game-logo img,
.game-image img,
.event-image img,
.article-image img,
.cert-modal-content img {
  width: 100%;
  height: auto;
}

.game-logo img { object-fit: contain; }
.store { margin-top: 50px; }
.game-store { margin-top: 20px !important; justify-content: space-evenly; }

.game-store-list {
  width: 300px;
  min-height: 520px;
  height: auto;
  margin: 20px;
  overflow: hidden;
  border-top: none;
  box-shadow: var(--shadow-glow);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid blueviolet;
  color: var(--text-primary);
}

.game-image {
  width: 100%;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
}

.game-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.game-image a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.game-image.nextcloud-img {
  padding: 0;
}

.game-image.nextcloud-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-store-p { padding-top: 10px; padding-bottom: 20px; }

.store-text-description {
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.event-hero,
.event-hero2 {
  display: flex;
  flex-wrap: wrap;
  background: var(--surface-glass);
  align-items: center;
  padding: 50px;
  border: 1px solid black;
}

.event-hero {
  justify-content: space-evenly;
  margin-top: 50px;
}

.event-hero2 {
  justify-content: center;
  margin: 50px auto;
  max-width: 900px;
}

.event-hero3 {
  background: var(--surface-glass);
  padding: 50px;
  margin: 50px auto;
  line-height: 1.7;
  color: var(--text-primary);
  max-width: 1400px;
  border-radius: var(--radius-xl);
}

.event-hero3 h2,
.event-hero3 h3,
.event-hero3 p,
.article-content h3,
.article-content p,
.article-content ul,
.article-content ol,
.article-content .image-caption,
.article-image.left-align {
  text-align: left;
}

.event-hero3 h2 {
  color: var(--text-primary);
  margin: 0 0 12px;
}

.event-hero3 h3 {
  color: var(--accent-primary);
  margin: 28px 0 18px;
}

.event-hero3 p {
  color: var(--text-primary);
  margin: 0 0 18px;
}

.event-text {
  color: var(--accent-primary);
  padding-bottom: 20px;
}

.event-title {
  font-size: 40px;
  text-transform: uppercase;
  font-weight: 600;
}

.event-image {
  width: 400px;
  height: 500px;
}

.event-image img { object-fit: contain; }
.event-text p { color: var(--text-primary); }

.contact {
  justify-content: space-evenly;
}

.contact-list {
  margin-top: 15px !important;
  color: var(--text-primary);
}

.email-contact {
  width: 80%;
  color: var(--text-subtle);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  width: fit-content;
  background-color: var(--accent-primary);
  color: var(--bg-primary);
  padding: 10px 16px;
  line-height: 1.2;
  font-size: clamp(1.15rem, 3vw, 2.2rem);
  white-space: normal;
  overflow-wrap: break-word;
}

.badge2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  width: fit-content;
  background-color: var(--accent-primary);
  color: var(--bg-primary);
  padding: 10px 16px;
  line-height: 1.2;
  font-size: clamp(1.15rem, 3vw, 2rem);
  white-space: normal;
  overflow-wrap: break-word;
}

.contact-card {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 32px;
  padding: 40px;
  background: var(--surface-primary);
  color: var(--text-primary);
  border-radius: 20px;
}

.contact-left,
.contact-right {
  flex: 1 1 0;
  min-width: 0;
  color: var(--text-primary);
}

.contact-divider {
  width: 1px;
  background: rgba(255,255,255,0.7);
}

.contact-highlights {
  padding: 30px;
  color: var(--text-primary);
}

.contact-highlights ul {
  line-height: 1.9;
  margin: 0;
  padding-left: 22px;
}

.contact-highlights li {
  margin-bottom: 8px;
}

.contact-highlights2 {
  list-style: none;
  padding-left: 0;
}

.contact-p { padding-top: 20px; }

.contact-p2 {
  border-left: 3px solid var(--accent-primary);
  padding-left: 16px;
  margin-bottom: 24px;
}

.contact-buttons,
.article-buttons {
  padding-top: 20px;
}

.article-buttons { text-align: center; }

.article-image {
  text-align: center;
  margin: 30px 0;
}

.article-image img,
.article-content .article-image img,
.cert-modal-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.image-caption {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-top: 8px;
}

.article-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

.article-content p,
.article-content ul,
.article-content ol {
  line-height: 1.7;
}

.article-content ul,
.article-content ol {
  padding-left: 22px;
}

.article-content .article-image {
  margin: 30px auto;
  text-align: center;
}

.hover-preview {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.tag {
  display: inline-flex;
  align-items: center;
  background: #2e7d32;
  color: #fff;
  font-size: 0.9rem;
  padding: 0.28rem 0.65rem;
  border-radius: 6px;
  font-weight: 700;
  line-height: 1.2;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;

  margin: 4px 6px 4px 0;
}

.forage { height: 1em; vertical-align: middle; }
.aws { height: 1.5em; vertical-align: middle; }

.banner-chips {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.chip {
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-muted);
  color: var(--text-muted);
  font-size: 13px;
  backdrop-filter: blur(6px);
}

.game-card {
  max-width: 565px;
  margin: 20px auto;
  padding: 20px;
  background: var(--surface-muted);
  color: var(--text-primary);
}

.game-card button {
  margin: 8px 6px 8px 0;
  padding: 10px 12px;
  font-size: 1rem;
  min-width: 150px;
}

.game-card input {
  min-width: 200px;
  padding: 10px;
  font-size: 1rem;
}

.skills-sublist {
  list-style-type: none;
  padding-left: 14px;
  margin-top: 6px;
  border-left: 2px solid var(--accent-primary);
}


.lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
}

.lightbox-content {
  display: block;
  margin: auto;
  width: 95vw;
  height: 90vh;
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: 25px;
  right: 40px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

.zoomable {
  cursor: zoom-in;
  transition: 0.2s ease;
}

.zoomable:hover {
  opacity: 0.9;
}

.cert-link {
  background: none;
  border: none;
  color: var(--text-primary);
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
}

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

.cert-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.cert-modal-content {
  position: relative;
  background: var(--surface-primary);
  border-radius: var(--radius-xl);
  padding: 20px;
  max-width: 900px;
  width: 100%;
  text-align: center;
}

.cert-close {
  position: absolute;
  top: 10px;
  right: 16px;

  background: none;
  border: none;
  padding: 0;

  font-size: 32px;
  color: #ff9800;
  cursor: pointer;

  line-height: 1;
}

.cert-close:hover {
  color: #ff9800;
}

.cert-modal-header {
  position: relative;
  text-align: center;
  margin-bottom: 10px;
}

#certTitle {
  display: block;
  width: 100%;
  text-align: center;
  margin: 0 auto 15px;
  padding-right: 30px;
}

/* =========================================================
   6) RESPONSIVE
   ========================================================= */
@media (min-width: 601px) {
  .df-col.m1 { width: 8.33333%; }
  .df-col.m2 { width: 16.66666%; }
  .df-col.m3, .df-quarter { width: 24.99999%; }
  .df-col.m4, .df-third { width: 33.33333%; }
  .df-col.m5 { width: 41.66666%; }
  .df-col.m6, .df-half { width: 49.99999%; }
  .df-col.m7 { width: 58.33333%; }
  .df-col.m8, .df-twothird { width: 66.66666%; }
  .df-col.m9, .df-threequarter { width: 74.99999%; }
  .df-col.m10 { width: 83.33333%; }
  .df-col.m11 { width: 91.66666%; }
  .df-col.m12 { width: 99.99999%; }
}

@media (min-width: 993px) {
  .df-col.l1 { width: 8.33333%; }
  .df-col.l2 { width: 16.66666%; }
  .df-col.l3 { width: 24.99999%; }
  .df-col.l4 { width: 33.33333%; }
  .df-col.l5 { width: 41.66666%; }
  .df-col.l6 { width: 49.99999%; }
  .df-col.l7 { width: 58.33333%; }
  .df-col.l8 { width: 66.66666%; }
  .df-col.l9 { width: 74.99999%; }
  .df-col.l10 { width: 83.33333%; }
  .df-col.l11 { width: 91.66666%; }
  .df-col.l12 { width: 99.99999%; }
  .df-modal-content { width: 900px; }
  .df-hide-large { display: none !important; }
  .df-sidebar.df-collapse { display: block !important; }
}

@media screen and (max-width: 1100px) {
  .badge2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  width: fit-content;
  background-color: var(--accent-primary);
  color: var(--bg-primary);
  padding: 10px 7px;
  line-height: 1.2;
  font-size: clamp(1.15rem, 3vw, .7rem);
  white-space: normal;
  overflow-wrap: break-word;
}

  #menuToggleBtn {
    display: block !important;
  }

  .header-large-screen > div .df-hide-small {
    display: none !important;
  }

  .header-large-screen {
    justify-content: space-between !important;
  }

  .tag-row {
    gap: 8px;
  }

  .tag {
    font-size: 0.85rem;
  }
}

@media (max-width: 1500px) {
  .hero {
    height: 550px !important;
    background-image: url("../images/banner.jpg");
  }

  .hero-description {
    height: 550px;
  }

  .hero-title { font-size: 50px; }
  .hero-title2 { font-size: 25px; margin: auto; }

  .badge2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  width: fit-content;
  background-color: var(--accent-primary);
  color: var(--bg-primary);
  padding: 10px 7px;
  line-height: 1.2;
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  white-space: normal;
  overflow-wrap: break-word;
}

 .header-large-screen {
    font-size: 16px !important;
  }

  .header-large-screen .df-bar-item {
    padding: 8px 10px !important;
  }
}

@media (max-width: 1205px) {
  .df-auto { max-width: 95%; }

  .badge2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  width: fit-content;
  background-color: var(--accent-primary);
  color: var(--bg-primary);
  padding: 10px 7px;
  line-height: 1.2;
  font-size: clamp(1.15rem, 3vw, .7rem);
  white-space: normal;
  overflow-wrap: break-word;
}
}

@media (max-width: 1024px) {
  main {
    width: 100% !important;
    margin: auto !important;
  }
}

@media (max-width: 992px) and (min-width: 601px) {
  .df-hide-medium { display: none !important; }
}

@media (max-width: 992px) {
  .df-sidebar.df-collapse { display: none; }
  .df-main { margin-left: 0 !important; margin-right: 0 !important; }
  .df-auto { max-width: 100%; }
}

@media (max-width: 768px) {
  .df-modal-content {
    width: 500px;
  }

  .df-modal {
    padding-top: 50px;
  }

  .header-large-screen {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 15px !important;
  }

  header a,
  #navDemo a,
  #menuToggleBtn {
    font-size: 14px !important;
  }

  .hero {
    height: 400px !important;
    background-image: url("../images/banner.jpg");
  }

  .hero-description {
    height: 400px;
    background-color: var(--bg-overlay);
  }

  .hero-text {
    width: 90% !important;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .hero-title {
    font-size: 35px;
    margin: auto;
    padding-top: 40px;
  }

  .hero-title2 {
    font-size: 25px;
    text-align: center;
    margin: auto;
    padding-top: 60px;
  }

  .hero-text p {
    width: 100% !important;
    margin: 0 auto;
    text-align: center;
    font-size: 13px;
  }

  .title { text-align: center; font-size: 30px; }
  .event-text { width: 100%; color: var(--accent-primary); }
  .event-text p { font-size: 13px; }
  .event-title { font-size: 30px; }
  .pro-size { padding-top: 80px; }

  .event-hero,
  .event-hero2,
  .event-hero3,
  .contact-card {
    width: 100%;
    max-width: 100%;
    margin: 20px auto;
    padding: 24px;
    gap: 24px;
  }

  .contact-card {
    flex-direction: column;
    align-items: stretch;
  }

  .contact-divider { display: none; }

  .event-image {
    width: 250px;
    height: 400px;
  }

  .event-image img { object-fit: cover; }
  .contact-list { width: 300px; }
  .contact { justify-content: space-around; }
  .contact-list p { font-size: 14px; }
  h5 { font-size: 17px; }

  .hover-preview:is-open img {
    opacity: 1;
    visibility: visible;
  }

  .tag-row {
    gap: 8px;
  }

  .tag {
    font-size: 0.85rem;
  }
}

@media (max-width: 600px) {
  .df-modal-content { margin: 0 10px; width: auto !important; }
  .df-modal { padding-top: 30px; }
  .df-dropdown-hover.df-mobile .df-dropdown-content,
  .df-dropdown-click.df-mobile .df-dropdown-content { position: relative; }
  .df-hide-small { display: none !important; }
  .df-mobile { display: block; width: 100% !important; }
  .df-bar-item.df-mobile,
  .df-dropdown-hover.df-mobile,
  .df-dropdown-click.df-mobile { text-align: center; }
  .df-dropdown-hover.df-mobile,
  .df-dropdown-hover.df-mobile .df-btn,
  .df-dropdown-hover.df-mobile .df-button,
  .df-dropdown-click.df-mobile,
  .df-dropdown-click.df-mobile .df-btn,
  .df-dropdown-click.df-mobile .df-button { width: 100%; }
}

@media (max-width: 480px) {
  .hero {
    height: auto !important;
    min-height: 450px;
    background-image: url("../images/banner.jpg");
  }

  .hero-description {
    height: auto;
    min-height: 450px;
    background-color: var(--bg-overlay);
    padding: 80px 20px 40px;
  }

  .hero-text {
    width: 100% !important;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .hero-title {
    font-size: 30px;
    padding-top: 0;
    margin: auto;
  }

  .hero-title2 {
    font-size: 15px;
    padding-top: 0;
    text-align: center;
    margin: auto;
  }

  .hero-text p {
    width: 100% !important;
    max-width: 32rem;
    margin: 0 auto;
    text-align: center;
    font-size: 1rem;
    line-height: 1.6;
  }

  .title { text-align: center; font-size: 25px; }
  .event-text { width: 100%; color: blueviolet; }
  .event-text p { font-size: 13px; }
  .event-title { font-size: 30px; }

  .event-hero,
  .event-hero2,
  .event-hero3,
  .contact-card {
    width: 100%;
    max-width: 100%;
    margin: 20px auto;
    padding: 20px;
    gap: 20px;
  }

  .contact-card {
    flex-direction: column;
    align-items: stretch;
  }

  .contact-divider { display: none; }

  .event-image {
    width: 250px;
    height: 400px;
  }

  .event-image img { object-fit: cover; }

  .contact-list {
    width: 300px;
    padding: 25px;
    border: 1px solid rgba(49, 45, 45, 0.5);
    border-radius: var(--radius-lg);
  }

  .contact-list p { font-size: 12px; }
  h5 { font-size: 15px; }
  .contact-highlights { padding: 20px 0 0; }
  .contact-buttons .df-btn { width: 100%; }
  p { font-size: 12px; }
}