:root {
  --pycon-gr-primary-color: #123C62;
  --pycon-gr-secondary-color: #FFBB5B;
  --pycon-gr-light-color: #F8F6F2;
  --pycon-gr-dark-color: #0B1D2E;
  --pycon-gr-link-color: #3272AE;
}

.bg-pycon {
  background-color: var(--pycon-gr-primary-color);
}

.bg-pycon-secondary {
  background-color: var(--pycon-gr-secondary-color);
}

body {
  font-family: "Inter", sans-serif;
  background: var(--pycon-gr-light-color);
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--pycon-gr-primary-color);
}
body p {
  padding: 4px 0;
}
body h1 {
  font-size: 36px;
  font-weight: bold;
}
body h2 {
  font-size: 28px;
  font-weight: bold;
  padding: 24px 0 12px 0;
}
body h3 {
  font-size: 24px;
  font-weight: bold;
  padding: 24px 0 12px 0;
}
body h4 {
  font-size: 20px;
  font-weight: bold;
  padding: 12px 0 4px 0;
}
body h5 {
  font-size: 18px;
  font-weight: bold;
}
body ul {
  list-style: circle;
  margin: 0 24px;
  padding: 8px;
  color: var(--pycon-gr-primary-color);
}
body ul li {
  margin: 8px 0;
}
body ol {
  list-style: decimal;
  margin: 0 24px;
  padding: 8px;
  color: var(--pycon-gr-primary-color);
}

body ol li {
  margin: 8px 0;
}

/* General link styling for content areas */
body p a,
body li a,
body td a,
.base-page a {
  color: var(--pycon-gr-link-color);
  text-decoration: underline;
  transition: color 0.3s ease;
}

body p a:hover,
body li a:hover,
body td a:hover,
.base-page a:hover {
  color: var(--pycon-gr-primary-color);
}

body p a:active,
body li a:active,
body td a:active,
.base-page a:active {
  color: var(--pycon-gr-secondary-color);
}

body p a:focus,
body li a:focus,
body td a:focus,
.base-page a:focus {
  outline: 2px solid var(--pycon-gr-secondary-color);
  outline-offset: 2px;
}

footer p {
  color: white;
}

hr {
  padding: 12px 0;
}

.base-page p, .base-page h2, .base-page h3, .base-page h4, .base-page h5 {
  padding: 4px 0;
}

/* CSS for the header logo */
@media (min-width: 640px) {
  .pycon_logo img {
    min-height: 90px;
  }
}

header {
  background-color: var(--pycon-gr-primary-color);
}

.homepage.bg-pycon {
  background-image: url("/static/img/homepage_header.6a98bd7aedf2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 610px;
  position: relative;
}

/* Fade to white at the bottom of the homepage header */
.homepage.bg-pycon::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: linear-gradient(to bottom, transparent, white);
  pointer-events: none;
}

/* Homepage wrapper */
.homepage-wrapper {
  position: relative;
}

/* Animated gradient overlay - full width */
.homepage-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(18, 60, 98, 0.3) 0%,
    rgba(255, 187, 91, 0.2) 25%,
    rgba(18, 60, 98, 0.3) 50%,
    rgba(114, 159, 207, 0.2) 75%,
    rgba(18, 60, 98, 0.3) 100%
  );
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Enhanced liquid glass card */
.hero-card-modern {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.2) 40%,
      rgba(255, 255, 255, 0.4) 60%,
      rgba(255, 255, 255, 0.1) 100%
    );
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.7);
  border-left: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 24px;
  padding: 2rem 3rem;
  position: relative;
  z-index: 10;
  overflow: hidden;
  box-shadow:
    0 8px 32px rgba(18, 60, 98, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    inset 0 -1px 1px rgba(0, 0, 0, 0.05),
    0 20px 40px -10px rgba(18, 60, 98, 0.15);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  animation: cardEntrance 1s ease-out;
}

/* Liquid shimmer highlight */
.hero-card-modern::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: liquidShine 6s ease-in-out infinite;
  pointer-events: none;
  border-radius: 24px;
}

@keyframes liquidShine {
  0%, 100% {
    left: -100%;
    opacity: 0;
  }
  50% {
    left: 150%;
    opacity: 1;
  }
}

.hero-card-modern::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(
    135deg,
    rgba(255, 187, 91, 0.5) 0%,
    rgba(114, 159, 207, 0.5) 50%,
    rgba(255, 187, 91, 0.5) 100%
  );
  background-size: 200% 200%;
  border-radius: 26px;
  z-index: -1;
  animation: borderGlow 4s ease infinite;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.hero-card-modern:hover::before {
  opacity: 1;
}

.hero-card-modern:hover {
  transform: translateY(-8px) scale(1.02);
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.7) 0%,
      rgba(255, 255, 255, 0.4) 40%,
      rgba(255, 255, 255, 0.6) 60%,
      rgba(255, 255, 255, 0.3) 100%
    );
  box-shadow:
    0 20px 60px rgba(18, 60, 98, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.4) inset,
    inset 0 2px 2px rgba(255, 255, 255, 0.8),
    0 30px 50px -15px rgba(18, 60, 98, 0.2);
}

.hero-card-modern:hover::after {
  animation: none;
  opacity: 0;
}

@keyframes borderGlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes cardEntrance {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Logo animation */
.hero-logo {
  transition: transform 0.4s ease;
}

.hero-card-modern:hover .hero-logo {
  transform: scale(1.03);
}

/* Divider with gradient */
.hero-divider {
  background: linear-gradient(180deg, var(--pycon-gr-primary-color) 0%, var(--pycon-gr-secondary-color) 100%);
  transition: all 0.4s ease;
}

.hero-card-modern:hover .hero-divider {
  box-shadow: 0 0 20px rgba(255, 187, 91, 0.5);
}

/* Date text animations */
.hero-date {
  transition: all 0.3s ease;
}

.hero-card-modern:hover .hero-date-day {
  color: var(--pycon-gr-link-color);
  text-shadow: 0 0 15px rgba(50, 114, 174, 0.4);
}

@media (max-width: 768px) {
  .homepage.bg-pycon {
    background-position: center bottom;
    min-height: 200px;
  }

  .hero-card-modern {
    padding: 1.5rem 2rem;
  }

  .hero-card-modern:hover {
    transform: none;
  }
}

@media (max-width: 500px) {
  .homepage.bg-pycon {
    background-position: center bottom;
    min-height: 160px;
  }

  .hero-card-modern {
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
  }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .hero-card-modern,
  .hero-card-modern::before {
    animation: none;
  }

  .hero-card-modern:hover {
    transform: none;
  }
}

/* CSS for the top navigation */
nav {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

/* Unordered list styling */
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

/* List item styling */
nav ul li {
  margin: 0 4px;
}

/* Link styling */
nav ul li a {
  text-decoration: none;
  color: white;
  font-size: 16px;
  padding: 10px 12px;
  border-radius: 5px;
  transition: color 0.3s;
  position: relative;
}

/* Underline effect for non-dropdown menu items */
nav ul li:not(.dropdown) > a::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 12px;
  right: 12px;
  height: 2px;
  background-color: var(--pycon-gr-secondary-color);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

nav ul li:not(.dropdown) > a:hover::after,
nav ul li:not(.dropdown).active > a::after {
  transform: scaleX(1);
}

/* Link hover effect */
nav ul li a:hover {
  color: var(--pycon-gr-secondary-color);
  transition: color 0.3s;
}

nav.md\:flex {
  margin-left: 48px;
}

/* Social media header icons */
.header-separator {
  border-right: 1px solid white;
  margin-right: 12px;
  padding-right: 28px;
}

/* Glass action button */
.action-button-glass {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}

.action-button-glass:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.7);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tickets-button {
  color: var(--pycon-gr-primary-color)
}

.tickets-button:hover {
  background-color: var(--pycon-gr-secondary-color);
  transition: background-color 0.3s ease;
}

.social-icon-hover {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(157deg) brightness(104%) contrast(102%);
  transition: filter 0.3s;
}

.social-icon-hover:hover {
  filter: brightness(0) saturate(100%) invert(80%) sepia(28%) saturate(1115%) hue-rotate(334deg) brightness(96%) contrast(92%);
}

#mobile-menu-button {
  color: var(--pycon-gr-secondary-color);
}
button.mobile-btn-switcher {
  color: var(--pycon-gr-primary-color)
}

/* Dropdown menu */
#mobile-menu .dropdown-menu {
  display: block;
}

.dropdown:hover > .dropdown-menu,
.dropdown-menu:hover {
  display: block;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  list-style-type: none;
  color: var(--pycon-gr-primary-color);
  z-index: 1;
  background: white;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.dropdown > a::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.5em;
  vertical-align: middle;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease-in-out;
  margin-top: -4px;
}
.dropdown-menu li {
  padding: 4px 0;
  border-radius: 5px;
  list-style: none;
}

.dropdown-menu li a {
  position: relative;
  color: var(--pycon-gr-primary-color);
  font-weight: 500;
  display: block;
  padding: 5px 10px;
  transition: color 0.3s ease;
  width: max-content;
}

.dropdown-menu li a:hover {
  color: var(--pycon-gr-link-color);
  background: none;
}

.dropdown-menu li a:hover::before {
  color: var(--pycon-gr-primary-color);
}

.dropdown {
  position: relative;
  padding-bottom: 10px;
}

.language-selector {
  color: white;
}
.language-selector-active {
  color: var(--pycon-gr-secondary-color);
}
.language-selector:hover {
  color: var(--pycon-gr-secondary-color);
  transition: color 0.3s ease;
}

/* Dropdown for Mobile */

#mobile-menu .dropdown {
  text-align: center;
  padding-bottom: 5px;
}

#mobile-menu .dropdown-menu {
  display: none;
  position: static; /* Remove absolute positioning */
  width: 100%; /* Make it full-width */
  padding: 0 10px; /* Adjust padding */
  background: none;
  border-radius: 5px;
  margin-top: 10px;
  list-style: none;
}

#mobile-menu .dropdown-menu li a {
  color: white;
  display: block;
  padding: 0 10px;
}

#mobile-menu .dropdown-menu li {
  padding: 0;
}

#mobile-menu .dropdown-menu li a:hover {
  color: var(--pycon-gr-secondary-color);
  background: none;
}

#mobile-menu .dropdown-menu li a:hover::before {
  color: var(--pycon-gr-secondary-color);
}

#mobile-menu .dropdown a.dropdown-toggle .caret {
  display: none;
}

.dropdown-menu-block-mobile {
  display: flex !important;
}

.venue_video_iframe {
  min-width: 474px;
  height: 100%;
  border: none;
}

@media (max-width: 474px) {
  .venue_video_iframe {
    min-width: 280px;
  }
}

/* CSS for the footer content */
footer {
  position: relative;
  bottom: 0;
  width: 100%;
  min-height: 400px;
  color: white;
  padding: 20px;
  box-sizing: border-box;
}

footer.bg-pycon {
  background-image: url("/static/img/footer.64725d4827fb.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
}
h2.footer-title1 {
  font-size: 24px;
  margin-bottom: 16px;
  color: white;
}
.footer-menu a {
  color: var(--pycon-gr-primary-color);
  transition: color 0.3s ease;
}
.footer-menu a:hover {
  color: var(--pycon-gr-secondary-color);
}
.footer-menu {
  margin-top: 56px;
}

.pygreece_logo {
  transition: transform 0.8s ease;
}
.pygreece_logo:hover {
  transform: scale(1.08);
}

.social-img {
  width: 40px;
}

/* Responsive styles */
@media (max-width: 1024px) {
  header nav ul {
    flex-direction: column;
    align-items: center;
  }

  header nav ul li {
    margin: 6px 0!important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

/* Responsive styles */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
  }

  .footer-column {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }

  .footer-menu {
    flex-direction: column;
    align-items: center;
    margin-top: 8px;
    margin-bottom: 38px;
  }

  .footer-menu a {
    margin: 10px 0;
    color: white;
  }

  footer nav ul {
    flex-direction: column;
    align-items: center;
  }

  footer nav ul li {
    margin: 6px 0!important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

@media (min-width: 769px) and (max-width: 1920px) {
  .footer-menu-container {
    position: absolute;
    bottom: 2px;
    text-align: center;
    width: 100%;
  }
  footer nav ul li {
    background-color: #deedff;
  }
}

@media (min-width: 1920px) {
  footer.bg-pycon {
    background-size: 100%;
  }
}

@media (min-width: 1024px) and (max-width: 1280px) {
  nav ul li {
    margin: 0 8px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  nav ul {
    white-space: nowrap;
  }

  nav ul li {
    margin: 0 4px;
  }

  nav ul li a {
    font-size: 16px;
    padding: 10px 8px;
  }
}

/* Sidebar styling */
.sidebar > h2 {
  font-size: 24px;
  font-weight: bold;
  color: white;
  border-bottom: 1px solid var(--pycon-gr-secondary-color);
  margin-bottom: 8px;
}
.sidebar > p {
  color: white;
}
div.sidebar > ul > li > a {
  color: white;
}
div.sidebar > ul > ::marker {
  color: white;
}

.sidebar img {
  background-color: white;
  border-radius: 8px;
}

.sidebar a.btn {
  background-color: var(--pycon-gr-secondary-color);
  color: var(--pycon-gr-primary-color);
}
.sidebar a.btn:hover {
   background-color: white;
}

/* Pycon Announcement section */
.pycon_announcement {
  margin: 16px;
}
.pycon_announcement_container {
  background: linear-gradient(135deg, var(--pycon-gr-secondary-color) 0%, #ffd07a 100%);
  margin: 32px auto;
  padding: 20px 28px;
  font-size: 18px;
  border-radius: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  box-shadow: 0 4px 20px rgba(255, 187, 91, 0.35), 0 1px 4px rgba(0,0,0,0.06);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.pycon_announcement_text {
  font-size: 20px;
  font-weight: 600;
  color: var(--pycon-gr-primary-color);
  line-height: 1.4;
}
.pycon_announcement_button {
  background-color: var(--pycon-gr-primary-color);
  color: white;
  transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease;
  border-radius: 999px;
  padding: 8px 22px;
  font-size: 15px;
  white-space: nowrap;
}
.pycon_announcement_button:hover {
  background-color: var(--pycon-gr-dark-color);
  color: var(--pycon-gr-secondary-color);
  transform: translateY(-1px);
}

/* Homepage hero announcement banner */
.announcement-hero-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  padding: 0.6rem 1.25rem 0.6rem 0.75rem;
  box-shadow:
    0 4px 20px rgba(18, 60, 98, 0.12),
    inset 0 1px 1px rgba(255, 255, 255, 0.7);
  animation: cardEntrance 0.8s ease-out;
}

.announcement-hero-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pycon-gr-secondary-color);
  box-shadow: 0 0 8px rgba(255, 187, 91, 0.7);
  flex-shrink: 0;
  animation: announcementPulse 2s ease-in-out infinite;
}

@keyframes announcementPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(255, 187, 91, 0.6); }
  50%       { box-shadow: 0 0 14px rgba(255, 187, 91, 1); }
}

.announcement-hero-text {
  font-size: 15px;
  font-weight: 500;
  color: var(--pycon-gr-primary-color);
  margin: 0;
  padding: 0;
}

.announcement-hero-btn {
  font-size: 13px;
  font-weight: 700;
  color: var(--pycon-gr-primary-color);
  background: var(--pycon-gr-secondary-color);
  border-radius: 999px;
  padding: 0.35rem 1rem;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.announcement-hero-btn:hover {
  background: var(--pycon-gr-primary-color);
  color: white;
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .announcement-hero-card {
    border-radius: 16px;
    padding: 0.75rem 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .announcement-hero-dot {
    animation: none;
  }
}

/* Pycon Hero section */
/*.pycon_hero {*/
/*  margin: 32px 0;*/
/*  background-image: url("/static/img/cloud.2099b6f96564.png"), url("/static/img/cloud.2099b6f96564.png");*/
/*  background-repeat: no-repeat, no-repeat;*/
/*  background-position: -350px top, +1500px bottom;*/
/*}*/
.pycon_hero > div > p {
  margin: 12px 0;
}
.pycon_hero > div > img {
  margin-bottom: 24px;
}
.zoom-on-hover {
  transition: transform 0.8s ease;
}
.zoom-on-hover:hover {
  transform: scale(1.05);
}
.hero_welcome_text {
  font-size: 20px;
}
@media (max-width: 1024px) {
  .pycon_hero .container {
    flex-direction: column;
  }
  .hero_welcome_text {
    font-size: 20px;
  }
}
/* END Pycon Hero section */

/* Pycon Newsletter section */
.pycon-newsletter {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 16px;
  border: 3px dashed #E0DBD1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.pycon-newsletter h2, .pycon-newsletter p {
  color: var(--pycon-gr-primary-color);
}
.pycon-newsletter label {
  color: var(--pycon-gr-primary-color);
}

/* END Pycon Newsletter section */

/* Pycon Venue section */
.venue-section {
  background: linear-gradient(180deg, #F8F6F2 0%, #EBF4FA 100%);
}

.venue-building-wrapper {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1248px;
  height: 100%;
  pointer-events: none;
}

.venue-building-img {
  position: absolute;
  right: 0;
  bottom: 0;
}

.venue-badge {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(224, 219, 209, 0.5);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.venue-content {
  animation: venueContentFadeIn 0.8s ease-out;
}

@keyframes venueContentFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.venue-divider-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.9) 50%, transparent 100%);
  animation: venueDividerShine 3s ease-in-out infinite;
}

@keyframes venueDividerShine {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

.venue-richtext p {
  color: var(--pycon-gr-primary-color) !important;
  margin-bottom: 12px;
}

.venue-richtext h2,
.venue-richtext h3 {
  color: var(--pycon-gr-primary-color) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  padding: 12px 0 8px !important;
}

.venue-richtext a {
  color: var(--pycon-gr-link-color);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.venue-richtext a:hover {
  border-bottom-color: var(--pycon-gr-link-color);
}

@media (max-width: 1024px) {
  .venue-building-img {
    opacity: 0.5 !important;
  }
  .venue-content {
    max-width: 580px;
  }
}

@media (max-width: 768px) {
  .venue-section {
    min-height: auto;
  }
  .venue-building-wrapper {
    left: 0;
    transform: none;
    max-width: none;
  }
  .venue-building-img {
    width: 80%;
    right: -10%;
    max-width: none;
    opacity: 0.4;
  }
  .venue-content {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .venue-divider-glow,
  .venue-content {
    animation: none;
  }
}

/* END Pycon Venue section */

/* Pycon Sponsors section */
/* Layout handled via Tailwind — class names kept as semantic identifiers */
/* .sponsors-section, .sponsors-tier-block, .sponsors-tier-heading,      */
/* .sponsors-tier-card, .sponsor-logo-link, .sponsor-us-cta,             */
/* .sponsor-us-btn — all styled inline with Tailwind utilities            */

.separator {
  width: 100%;
  height: 20px;
  background-color: var(--pycon-gr-secondary-color);
  z-index: 1;
  position: relative;
}

/* END Pycon Sponsors section */

/* Pycon Tickets section */
.pycon_tickets_home {
  background: linear-gradient(180deg, #EBF4FA 0%, #DEECFF 100%);
}

/* Pycon Financial Aid section */
.pycon_finaid_home {
  background-color: #DEECFF;
}

/* Financial Aid: collapsible via <details>, so no JS is involved. */
.finaid-details {
  /* one duration for the chevron and the panel so they land together */
  --finaid-toggle-duration: 0.3s;
  overflow: hidden;
}

.finaid-summary {
  cursor: pointer;
  list-style: none;
  color: var(--pycon-gr-primary-color);
}

/* Hide the native disclosure triangle; the chevron below replaces it. */
.finaid-summary::-webkit-details-marker {
  display: none;
}

.finaid-summary::marker {
  content: "";
}

.finaid-summary:focus-visible {
  outline: 2px solid var(--pycon-gr-secondary-color);
  outline-offset: -4px;
  border-radius: 14px;
}

.finaid-summary-label {
  font-size: 18px;
  font-weight: 700;
}

.finaid-summary-toggle {
  font-size: 14px;
  font-weight: 600;
  color: var(--pycon-gr-link-color);
}

.finaid-summary:hover .finaid-summary-toggle {
  text-decoration: underline;
}

.finaid-chevron {
  transition: transform var(--finaid-toggle-duration) ease;
}

/* The open/close height is animated in JS (see components/finaid.html): CSS could
   only do it via interpolate-size, which is Chromium-only. */

.finaid-details[open] .finaid-chevron {
  transform: rotate(180deg);
}

/* Swap the hint text with the open state. */
.finaid-details[open] .finaid-when-closed,
.finaid-details:not([open]) .finaid-when-open {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .finaid-chevron {
    transition: none;
  }
  .finaid-details::details-content {
    transition: none;
  }
}

/* END Pycon Financial Aid section */

.tickets-footer h2 {
  padding-bottom: 18px;
}

.tickets-footer p a:hover{
  text-decoration: underline;
}

.tickets-footer-info h3{
  margin-bottom: 10px;
}

.ticket-card .register-btn.disabled {
  opacity: 0.7; 
  cursor: default;
}

.register-btn {
  background-color: var(--pycon-gr-primary-color);
  color: white;
}


.ticket-card {
  background-color: white;
}

.ribbon-1 {
    background-color: #CDEAF8;
}

.ribbon-2 {
    background-color: #FEF0E1;
}

.ribbon-3 {
    background-color: #E9EFE2;
}

.ticket-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--pycon-gr-primary-color);
}
.price-value {
  font-size: 48px;
}
.price-text {
  font-size: 16px;
  color: var(--pycon-gr-primary-color)
}


.toggle-switch {
    position: relative;
    cursor: pointer;
}

.slider {
    position: relative;
    width: 44px;
    height: 24px;
    background-color: #ccc;
    border-radius: 24px;
    transition: 0.3s;
}

.slider:before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: white;
    top: 2px;
    left: 2px;
    transition: 0.3s;
}

.tshirt-toggle-global:checked + .slider {
    background-color: var(--pycon-gr-secondary-color);
}

.tshirt-toggle-global:checked + .slider:before {
    transform: translateX(20px);
}

/*CSS for a tag in body*/
.basic_page_header {
    position: relative;
    background-color: var(--pycon-gr-dark-color);
    background-image: url("/static/img/basicpage-header-bg.0c4718c73022.svg");
    background-repeat: repeat-x;
    background-size: cover;
    background-position: bottom;
    padding: 16px;
}

.basic_page_header > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 457px) {
  .basic_page_header {
    background-position: 2693px;
  }
}

.basic_page_bottom {
  background-image: url("/static/img/basicpage-bottom-bg.60a6f331302f.svg");
  background-repeat: repeat-x;
  background-size: cover;
  background-position: bottom;
}

.base-page .prose a {
  color: var(--pycon-gr-link-color);
  font-weight: 500;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.base-page .prose a:hover {
  color: var(--pycon-gr-dark-color);
}

.base-page .prose a:active {
  color: var(--pycon-gr-secondary-color);
}

.base-page .prose a:focus {
  outline: 2px solid var(--pycon-gr-secondary-color);
  outline-offset: 2px;
}

/* END Pycon Tickets section */

/* Updates Section */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Fade edges on desktop for updates scroller */
@media (min-width: 1024px) {
  .updates-scroller-fade {
    mask-image: linear-gradient(to right, transparent, black 60px, black calc(100% - 60px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 60px, black calc(100% - 60px), transparent);
  }
}
/* END Updates Section */

/* END Venue Section */

/* Keynoters Section */
/* Layout handled via Tailwind in keynote_speakers.html; these rules only
   neutralize the global `body p` / `p { color: … }` styles inside the
   rich-text fields rendered in the cards */
.keynoter-role p,
.keynoter-bio p,
.keynoter-talk-title p {
  color: inherit;
  padding: 0;
}

/* END of Keynoters Section */

/* Team Page*/
.linkedin-text,
.github-text,
.x-text,
.instagram-text,
.website-text {
  color: var(--pycon-gr-link-color);
}

.team-description, .team-title {
  color: var(--pycon-gr-primary-color);
}

.team-member .job-title {
  color: var(--pycon-gr-dark-color);
}

.member-tags {
  color: var(--pycon-gr-link-color);
  border-color: var(--pycon-gr-link-color);
}

/* End of Team Page */

/* Communities Page */

/* Deep-link targets (e.g. from the homepage community partners row). */
.community-card {
  scroll-margin-top: 32px;
  transition: box-shadow 0.4s ease;
}

.community-card:target {
  box-shadow: 0 0 0 3px var(--pycon-gr-secondary-color);
}

/* Sponsors Page */

@media (max-width: 768px) {
  .community-img{
    margin-right: auto!important;
    margin-left: auto!important;
  }
}
/* Pycon Community Partners section (homepage logo marquee) */
.community-partners-section {
  background: #DEECFF;
}

/* Badge, carousel and "meet all the communities" link. Grid rather than flex so the
   link can sit next to the badge on desktop and below the carousel on smaller screens
   without duplicating the markup. */
.community-partners-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "badge"
    "marquee"
    "link";
}

.community-partners-layout .cp-badge {
  grid-area: badge;
}

.community-partners-layout .community-marquee {
  grid-area: marquee;
}

.community-partners-layout .cp-link {
  grid-area: link;
  justify-self: start;
}

@media (min-width: 1024px) {
  .community-partners-layout {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "badge link"
      "marquee marquee";
    align-items: center;
  }
  .community-partners-layout .cp-link {
    justify-self: end;
  }
}

.community-marquee {
  --cp-item-w: 162px;
  --cp-gap: 16px;
  --cp-card-h: 110px;
  /* edge fade colour — keep in sync with .community-partners-section */
  --cp-fade-color: #DEECFF;
  position: relative;
  /* clip, not hidden, and only on the x axis: the hover tooltip has to be able to
     overflow below the row, which `hidden` (or a mask) would cut off. */
  overflow-x: clip;
  overflow-y: visible;
  padding: 4px 0 12px;
}

/* Logos fade out instead of being cut off at the edges of the row. Done with
   overlays rather than mask-image, because a mask is clipped to the element box
   (mask-clip) and takes the overflowing tooltip with it. */
.community-marquee::before,
.community-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  pointer-events: none;
  z-index: 3;
}

.community-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--cp-fade-color), transparent);
}

.community-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--cp-fade-color), transparent);
}

/* Without overflow: clip the box clips both axes, so reserve room for the tooltip. */
@supports not (overflow: clip) {
  .community-marquee {
    overflow: hidden;
    padding-bottom: 40px;
  }
}

.community-marquee-track {
  display: flex;
  width: max-content;
  animation: communityMarquee var(--cp-duration, 44s) linear infinite;
}

.community-marquee-copy {
  display: flex;
}

/* Spacing lives on the items (not as a flex gap) so one copy is exactly 50% of
   the track and the -50% keyframe lines the copies up seamlessly. */
.community-marquee-item {
  position: relative;
  flex: 0 0 auto;
  width: var(--cp-item-w);
  margin-right: var(--cp-gap);
  display: flex;
  justify-content: center;
}

.community-marquee-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--cp-card-h);
  padding: 14px;
  background: #fff;
  border: 2px dashed #E0DBD1;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(18, 60, 98, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.community-marquee-item:hover .community-marquee-card,
.community-marquee-item:focus-visible .community-marquee-card {
  border-color: var(--pycon-gr-secondary-color);
  box-shadow: 0 12px 26px -12px rgba(18, 60, 98, 0.28);
  transform: translateY(-4px);
}

.community-marquee-item:focus-visible {
  outline: none;
}

.community-marquee-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 4px);
  max-width: 210px;
  width: max-content;
  padding: 5px 10px;
  background: var(--pycon-gr-primary-color);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 2;
}

.community-marquee-tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-bottom-color: var(--pycon-gr-primary-color);
}

.community-marquee-item:hover .community-marquee-tooltip,
.community-marquee-item:focus-visible .community-marquee-tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Hovering or tabbing into the row stops it so a logo can be read and clicked. */
.community-marquee:hover .community-marquee-track,
.community-marquee:focus-within .community-marquee-track {
  animation-play-state: paused;
}

@keyframes communityMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 1024px) {
  .community-marquee {
    --cp-item-w: 140px;
    --cp-card-h: 100px;
  }
}

@media (max-width: 640px) {
  .community-marquee {
    --cp-item-w: 120px;
    --cp-gap: 12px;
    --cp-card-h: 90px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* No auto-scroll: show a single copy the visitor can swipe through instead. */
  .community-marquee {
    overflow-x: auto;
    overflow-y: hidden;
    /* a scroll container clips its content, so re-reserve the tooltip's space */
    padding-bottom: 40px;
  }
  /* the fades would drift with the scroll position */
  .community-marquee::before,
  .community-marquee::after {
    display: none;
  }
  .community-marquee-track {
    animation: none;
  }
  .community-marquee-copy[aria-hidden="true"] {
    display: none;
  }
}

/* END Pycon Community Partners section */