.palette-card {
  background: var(--color-white);
  border-radius: 16px;
  box-shadow: var(--shadow-light);
  border: 2px solid var(--color-primary-green);
  transition: all .3s ease;
  margin-bottom: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
   padding:20px;
}

.summit-event {
  margin-bottom: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

@media (max-width: 767.98px) {
  .palette-card, .summit-event {
    margin-bottom: 18px;
  }
}
:root{
  --color-primary-green:#0A733A;
  --color-light-green:#C9DA2B;
  --color-sky-blue:#2A9CD7;
  --color-yellow:#F9C320;
  --color-light-blue:#5ACAEB;
  --color-text:#333333;

  /* Legacy variables for backward compatibility */
  --color-light-green-legacy:#A8E6A3;
  --color-sky-blue-legacy:#87CEEB;
  --color-yellow-legacy:#FFD93D;

  /* New shadow derivatives using new colors */
  --shadow-light:0 2px 16px rgba(10, 115, 58, 0.15);
  --shadow-sky:0 6px 24px rgba(42, 156, 215, 0.25);
  --shadow-yellow:0 4px 20px rgba(249, 195, 32, 0.2);
  --shadow-light-blue:0 3px 16px rgba(90, 202, 235, 0.18);
}

/* Base text and backgrounds */
html,body{
    color:var(--color-text);
    background-color:var(--color-white);
}

a{ color:var(--color-sky-blue); }
a:hover{ color:var(--color-primary-green); }

.btn, .vl-btn2, button{
  background:var(--color-yellow);
  color:var(--color-text);
  border-color:var(--color-yellow);
}
.btn:hover, .vl-btn2:hover, button:hover{
  background:var(--color-light-green);
  border-color:var(--color-light-green);
}

/* Sponsor card palette alignment (generic classes to reuse) */

@media (max-width: 767.98px) {
  .palette-card, .summit-event {
    margin-bottom: 18px;
    padding: 30px;
  }
}
.palette-card:hover{
  box-shadow:var(--shadow-sky);
  border-color:var(--color-light-blue);
}

.palette-arrow{
  background:#f5f5f5;
  color:var(--color-yellow);
}

/* New preloader styles */
.preloader{position:fixed;inset:0;background:rgba(236,255,171,.95);display:flex;align-items:center;justify-content:center;z-index:9998;}
.loading-container{display:flex;align-items:center;justify-content:center;}
.spinner-wrapper{display:flex;flex-direction:column;align-items:center;gap:16px}
.spinner{display:flex;gap:10px}
.spinner-circle{width:16px;height:16px;border-radius:50%;background:var(--color-primary-green);animation:bounce 1.2s infinite ease-in-out}
.spinner-circle:nth-child(2){animation-delay:.15s;background:var(--color-yellow)}
.spinner-circle:nth-child(3){animation-delay:.3s;background:var(--color-light-blue)}
@keyframes bounce{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}
.loading-text{font-weight:600;letter-spacing:.15em;color:var(--color-text)}
.loading-text span{display:inline-block;animation:blink 1.4s infinite}
.loading-text .dots span{animation:blink 1.4s infinite;}
.loading-text span:nth-child(2){animation-delay:.1s}
.loading-text span:nth-child(3){animation-delay:.2s}
.loading-text span:nth-child(4){animation-delay:.3s}
.loading-text span:nth-child(5){animation-delay:.4s}
.loading-text span:nth-child(6){animation-delay:.5s}
.loading-text span:nth-child(7){animation-delay:.6s}
@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}

/* Optional: hide preloader after page load via JS (site may already have a handler) */
body.preloader-hidden .preloader{display:none}

/* Optional image above spinner */
.preloader-image{
  display:block;
  width: clamp(300px, 50vw, 800px) !important;
  height:auto;
  margin: 0 auto 16px auto;
}

@media (max-width: 480px){
  .preloader-image{ width: clamp(220px, 80vw, 360px) !important; }
}

/* Header & Mobile: Dual logo group alignment */
.header-area .site-logo,
.mobile-header .mobile-logo,
.mobile-sidebar .logosicon-area .logos {
    display: inline-flex !important;
    align-items: start !important;
    justify-content: flex-start !important;
    gap: 6px !important; /* tighter space between logos */
}

.header-area .site-logo a,
.mobile-header .mobile-logo a,
.mobile-sidebar .logosicon-area .logos a {
    display: inline-flex !important;
    align-items: start !important;
    line-height: 0 !important;
    margin: 0 !important;
}

/* Logo sizes (desktop header, mobile header, mobile sidebar) */
.header-area .site-logo img { height: 44px !important; display: block !important; }
.mobile-header .mobile-logo img { height: 36px !important; display: block !important; }
.mobile-sidebar .logosicon-area .logos img { height: 40px !important; display: block !important; }

/* Remove unintended borders if markup uses Bootstrap .border */
.site-logo.border { border: none !important; }

@media (max-width: 576px){
    .header-area .site-logo img { height: 38px !important; }
}

/* Enhanced color theme utilities */
.text-primary-green { color: var(--color-primary-green) !important; }
.text-light-green { color: var(--color-light-green) !important; }
.text-sky-blue { color: var(--color-sky-blue) !important; }
.text-yellow { color: var(--color-yellow) !important; }
.text-light-blue { color: var(--color-light-blue) !important; }

.bg-primary-green { background-color: var(--color-primary-green) !important; }
.bg-light-green { background-color: var(--color-light-green) !important; }
.bg-sky-blue { background-color: var(--color-sky-blue) !important; }
.bg-yellow { background-color: var(--color-yellow) !important; }
.bg-light-blue { background-color: var(--color-light-blue) !important; }

/* Enhanced button styles */
.btn-primary-green {
  background-color: var(--color-primary-green);
  border-color: var(--color-primary-green);
  color: var(--color-white);
}
.btn-primary-green:hover {
  background-color: var(--color-light-green);
  border-color: var(--color-light-green);
  color: var(--color-text);
}

.btn-sky-blue {
  background-color: var(--color-sky-blue);
  border-color: var(--color-sky-blue);
  color: var(--color-white);
}
.btn-sky-blue:hover {
  background-color: var(--color-light-blue);
  border-color: var(--color-light-blue);
}

/* Enhanced card gradients */
.gradient-card-1 {
  background: linear-gradient(135deg, var(--color-primary-green) 0%, var(--color-sky-blue) 100%);
}
.gradient-card-2 {
  background: linear-gradient(135deg, var(--color-yellow) 0%, var(--color-light-green) 100%);
}
.gradient-card-3 {
  background: linear-gradient(135deg, var(--color-sky-blue) 0%, var(--color-light-blue) 100%);
}

/* Enhanced Video Section Styles */
/* Video Section */
.video-wrapper {
    transition: transform 0.2s ease;
}

.video-wrapper:hover {
    transform: translateY(-2px);
}

/* Gallery Styles */
.gallery-area {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--color-white) 0%, #f8f9fa 100%);
}

/* Gallery Tab Enhancements for proper switching */
.gallery-nav-tabs .nav-pills {
    border: 2px solid var(--color-primary-green);
    border-radius: 50px;
    padding: 8px;
    background: var(--color-white);
    box-shadow: var(--shadow-light);
    display: inline-flex;
    margin: 0 auto;
}

.gallery-tab-btn {
    border-radius: 50px !important;
    padding: 12px 32px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    border: none !important;
    background: transparent !important;
    color: var(--color-primary-green) !important;
    text-decoration: none !important;
    position: relative;
    z-index: 1;
}

.gallery-tab-btn:focus,
.gallery-tab-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.gallery-tab-btn.active,
.gallery-tab-btn[aria-selected="true"] {
    background: var(--color-primary-green) !important;
    color: var(--color-white) !important;
    box-shadow: 0 4px 16px rgba(10, 115, 58, 0.3) !important;
}

.gallery-tab-btn:hover:not(.active) {
    background: rgba(10, 115, 58, 0.1) !important;
    color: var(--color-primary-green) !important;
}

/* Force override any Bootstrap interference */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--color-primary-green) !important;
    color: var(--color-white) !important;
}

.nav-pills .nav-link {
    color: var(--color-primary-green) !important;
    background-color: transparent !important;
}

.nav-pills .nav-link:hover {
    background-color: rgba(10, 115, 58, 0.1) !important;
    color: var(--color-primary-green) !important;
}

/* Gallery Cards */
.gallery-card {
    background: var(--color-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: all 0.3s ease;
    height: 100%;
}

.gallery-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-sky);
}

.gallery-image {
    position: relative;
    overflow: hidden;
    height: 250px;
}

.gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-card:hover .gallery-image img {
    transform: scale(1.1);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 115, 58, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-card:hover .gallery-overlay {
    opacity: 1;
}

.gallery-zoom-btn {
    background: var(--color-yellow);
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--color-text);
    transition: all 0.3s ease;
}

.gallery-zoom-btn:hover {
    background: var(--color-light-green);
    transform: scale(1.1);
}

.gallery-info {
    padding: 20px;
}

.gallery-info h5 {
    color: var(--color-primary-green);
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.gallery-info p {
    color: var(--color-text);
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Video Cards */
.video-card {
    background: var(--color-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: all 0.3s ease;
    height: 100%;
    cursor: pointer;
}

.video-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-sky);
}

.video-thumbnail {
    position: relative;
    overflow: hidden;
    height: 280px;
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.video-card:hover .video-thumbnail img {
    transform: scale(1.05);
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(42, 156, 215, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-card:hover .video-overlay {
    opacity: 1;
}

.video-play-btn {
    background: var(--color-white);
    border: none;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--color-sky-blue);
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.video-play-btn:hover {
    transform: scale(1.1);
    color: var(--color-primary-green);
}

.video-duration {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.8);
    color: var(--color-white);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.video-info {
    padding: 20px;
}

.video-info h5 {
    color: var(--color-primary-green);
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.video-info p {
    color: var(--color-text);
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Modal Styles */
.modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
}

.modal-header {
    background: var(--color-primary-green);
    color: var(--color-white);
    border: none;
    padding: 16px 24px;
}

.modal-title {
    font-weight: 700;
    margin: 0;
}

.btn-close {
    filter: invert(1);
    opacity: 0.8;
}

.btn-close:hover {
    opacity: 1;
}

.modal-body {
    padding: 0;
}

#modalImage {
    border-radius: 0;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .gallery-area {
        padding: 60px 0;
    }
    
    .gallery-nav-tabs .nav-pills {
        width: 100%;
        justify-content: center;
    }
    
    .gallery-tab-btn {
        padding: 10px 24px !important;
        font-size: 0.9rem;
    }
    
    .gallery-image,
    .video-thumbnail {
        height: 200px;
    }
    
    .video-play-btn {
        width: 60px;
        height: 60px;
        font-size: 1.4rem;
    }
    
    .gallery-zoom-btn {
        width: 50px;
        height: 50px;
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .gallery-info,
    .video-info {
        padding: 16px;
    }
    
    .gallery-info h5,
    .video-info h5 {
        font-size: 1rem;
    }
    
    .gallery-info p,
    .video-info p {
        font-size: 0.85rem;
    }
}

/* Mobile Overlay for Mobile Menu */
.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 98;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

body.mobile-menu-active .mobile-overlay {
    opacity: 1;
    visibility: visible;
}

/* Navigation Bar Link Colors - Responsive to Scroll State */

/* Default Navigation Links (Before Scrolling) - BLACK */
.main-menu ul li a {
    color: #000000 !important;
    transition: color 0.3s ease !important;
}

.main-menu ul li:hover > a {
    color: #FFFFFF !important;
}

.main-menu ul li a.nav-link.active {
    color: #000000 !important;
}

/* Desktop Header Navigation (Before Scrolling) - BLACK */
.header-area .main-menu ul li a {
    color: #000000 !important;
    transition: color 0.3s ease !important;
}

.header-area .main-menu ul li:hover > a {
    color: #FFFFFF !important;
}

.header-area .header-elements .main-menu ul li a {
    color: #000000 !important;
    transition: color 0.3s ease !important;
}

.header-area .header-elements .main-menu ul li:hover > a {
    color: #FFFFFF !important;
}

/* All homepage variants navigation (Before Scrolling) - BLACK */
.homepage1-body .header-area .main-menu ul li a,
.homepage2-body .header-area .main-menu ul li a,
.homepage3-body .header-area .main-menu ul li a,
.homepage4-body .header-area .main-menu ul li a,
.homepage5-body .header-area .main-menu ul li a,
.homepage6-body .header-area .main-menu ul li a,
.homepage7-body .header-area .main-menu ul li a,
.homepage8-body .header-area .main-menu ul li a,
.homepage9-body .header-area .main-menu ul li a,
.homepage10-body .header-area .main-menu ul li a {
    color: #000000 !important;
}

.homepage1-body .header-area .main-menu ul li:hover > a,
.homepage2-body .header-area .main-menu ul li:hover > a,
.homepage3-body .header-area .main-menu ul li:hover > a,
.homepage4-body .header-area .main-menu ul li:hover > a,
.homepage5-body .header-area .main-menu ul li:hover > a,
.homepage6-body .header-area .main-menu ul li:hover > a,
.homepage7-body .header-area .main-menu ul li:hover > a,
.homepage8-body .header-area .main-menu ul li:hover > a,
.homepage9-body .header-area .main-menu ul li:hover > a,
.homepage10-body .header-area .main-menu ul li:hover > a {
    color: #FFFFFF !important;
}

/* STICKY HEADER NAVIGATION (After Scrolling) - WHITE */
.header-area.sticky .main-menu ul li a {
    color: #FFFFFF !important;
    transition: color 0.3s ease !important;
}

.header-area.sticky .main-menu ul li:hover > a {
    color: #000000 !important;
}

.header-area.sticky .main-menu ul li a.nav-link.active {
    color: #FFFFFF !important;
}

.header-area.sticky .header-elements .main-menu ul li a {
    color: #FFFFFF !important;
    transition: color 0.3s ease !important;
}

.header-area.sticky .header-elements .main-menu ul li:hover > a {
    color: #000000 !important;
}

/* Sticky header for all homepage variants - WHITE */
.homepage1-body .header-area.sticky .main-menu ul li a,
.homepage2-body .header-area.sticky .main-menu ul li a,
.homepage3-body .header-area.sticky .main-menu ul li a,
.homepage4-body .header-area.sticky .main-menu ul li a,
.homepage5-body .header-area.sticky .main-menu ul li a,
.homepage6-body .header-area.sticky .main-menu ul li a,
.homepage7-body .header-area.sticky .main-menu ul li a,
.homepage8-body .header-area.sticky .main-menu ul li a,
.homepage9-body .header-area.sticky .main-menu ul li a,
.homepage10-body .header-area.sticky .main-menu ul li a {
    color: #FFFFFF !important;
}

.homepage1-body .header-area.sticky .main-menu ul li:hover > a,
.homepage2-body .header-area.sticky .main-menu ul li:hover > a,
.homepage3-body .header-area.sticky .main-menu ul li:hover > a,
.homepage4-body .header-area.sticky .main-menu ul li:hover > a,
.homepage5-body .header-area.sticky .main-menu ul li:hover > a,
.homepage6-body .header-area.sticky .main-menu ul li:hover > a,
.homepage7-body .header-area.sticky .main-menu ul li:hover > a,
.homepage8-body .header-area.sticky .main-menu ul li:hover > a,
.homepage9-body .header-area.sticky .main-menu ul li:hover > a,
.homepage10-body .header-area.sticky .main-menu ul li:hover > a {
    color: #000000 !important;
}

/* Ultra specific overrides to eliminate yellow hover colors - matching exact main.css selectors */
html body.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li:hover > a,
html body.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li:hover > a,
html body.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li:hover > a,
html body.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li:hover > a,
html body.homepage5-body .header-area.homepage5 .header-elements .main-menu ul li:hover > a,
html body.homepage6-body .header-area.homepage6 .header-elements .main-menu ul li:hover > a,
html body.homepage7-body .header-area.homepage7 .header-elements .main-menu ul li:hover > a,
html body.homepage8-body .header-area.homepage8 .header-elements .main-menu ul li:hover > a,
html body.homepage9-body .header-area.homepage9 .header-elements .main-menu ul li:hover > a,
html body.homepage10-body .header-area.homepage10 .header-elements .main-menu ul li:hover > a,
html body .header-area .header-elements .main-menu ul li:hover > a,
html body .main-menu ul li:hover > a {
    color: #FFFFFF !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
    font-weight: normal !important;
    transition: color 0.3s ease !important;
}

/* Override the CSS variable that causes yellow color */
html body.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li:hover > a,
html body.homepage2-body .header-area.homepage2 .header-elements .main-menu ul li:hover > a,
html body.homepage3-body .header-area.homepage3 .header-elements .main-menu ul li:hover > a,
html body.homepage4-body .header-area.homepage4 .header-elements .main-menu ul li:hover > a,
html body.homepage5-body .header-area.homepage5 .header-elements .main-menu ul li:hover > a,
html body.homepage6-body .header-area.homepage6 .header-elements .main-menu ul li:hover > a,
html body.homepage7-body .header-area.homepage7 .header-elements .main-menu ul li:hover > a,
html body.homepage8-body .header-area.homepage8 .header-elements .main-menu ul li:hover > a,
html body.homepage9-body .header-area.homepage9 .header-elements .main-menu ul li:hover > a,
html body.homepage10-body .header-area.homepage10 .header-elements .main-menu ul li:hover > a {
    --ztc-text-text-4: #FFFFFF !important;
}

/* Ultra specific sticky header hover overrides */
html body.homepage1-body .header-area.sticky.homepage1 .header-elements .main-menu ul li:hover > a,
html body.homepage2-body .header-area.sticky.homepage2 .header-elements .main-menu ul li:hover > a,
html body.homepage3-body .header-area.sticky.homepage3 .header-elements .main-menu ul li:hover > a,
html body.homepage4-body .header-area.sticky.homepage4 .header-elements .main-menu ul li:hover > a,
html body.homepage5-body .header-area.sticky.homepage5 .header-elements .main-menu ul li:hover > a,
html body.homepage6-body .header-area.sticky.homepage6 .header-elements .main-menu ul li:hover > a,
html body.homepage7-body .header-area.sticky.homepage7 .header-elements .main-menu ul li:hover > a,
html body.homepage8-body .header-area.sticky.homepage8 .header-elements .main-menu ul li:hover > a,
html body.homepage9-body .header-area.sticky.homepage9 .header-elements .main-menu ul li:hover > a,
html body.homepage10-body .header-area.sticky.homepage10 .header-elements .main-menu ul li:hover > a,
html body .header-area.sticky .header-elements .main-menu ul li:hover > a {
    color: #000000 !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
    font-weight: normal !important;
    transition: color 0.3s ease !important;
}

/* Override the CSS variable for sticky headers */
html body.homepage1-body .header-area.sticky.homepage1 .header-elements .main-menu ul li:hover > a,
html body.homepage2-body .header-area.sticky.homepage2 .header-elements .main-menu ul li:hover > a,
html body.homepage3-body .header-area.sticky.homepage3 .header-elements .main-menu ul li:hover > a,
html body.homepage4-body .header-area.sticky.homepage4 .header-elements .main-menu ul li:hover > a,
html body.homepage5-body .header-area.sticky.homepage5 .header-elements .main-menu ul li:hover > a,
html body.homepage6-body .header-area.sticky.homepage6 .header-elements .main-menu ul li:hover > a,
html body.homepage7-body .header-area.sticky.homepage7 .header-elements .main-menu ul li:hover > a,
html body.homepage8-body .header-area.sticky.homepage8 .header-elements .main-menu ul li:hover > a,
html body.homepage9-body .header-area.sticky.homepage9 .header-elements .main-menu ul li:hover > a,
html body.homepage10-body .header-area.sticky.homepage10 .header-elements .main-menu ul li:hover > a {
    --ztc-text-text-4: #000000 !important;
}

/* Walking Loris Animation - Click to Hide Functionality */
.walking-loris {
    position: fixed;
    bottom: 0;
    right: -150px;
    height: 350px;
    z-index: 9999;
    pointer-events: auto !important; /* Enable clicking */
    animation: walkRightToLeft 30s linear 1 forwards; /* play once and end offscreen */
    cursor: pointer; /* Show it's clickable */
    transition: opacity 0.3s ease, transform 0.2s ease;
}

.walking-loris:hover {
    transform: scale(1.05); /* Slight hover effect */
}

.walking-loris.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
}

@keyframes walkRightToLeft {
    0% {
        right: -150px;
    }
    100% {
        right: 100vw;
    }
}

/* Utility: explicit ecffab background to replace Bootstrap bg-white */
.bg-ecffab { background-color: #ecffab !important; }

/* Responsive - Hide on mobile devices */
@media (max-width: 768px) {
    .walking-loris {
        display: none;
    }
}

@media (max-width: 480px) {
    .walking-loris {
        display: none;
    }
}

/* Speakers Section Styles */
.speakers-section-area {
    background: linear-gradient(135deg, var(--color-white) 0%, #f8f9fa 100%);
    padding: 80px 0;
}

.speaker-card {
    background: var(--color-white);
    border-radius: 20px;
    padding: 30px 20px;
    box-shadow: var(--shadow-light);
    transition: all 0.3s ease;
    height: 100%;
    border: 2px solid transparent;
}

.speaker-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-sky);
    border-color: var(--color-primary-green);
}

.speaker-image {
    margin-bottom: 20px;
    position: relative;
}

.speaker-image img {
    border: 4px solid var(--color-primary-green);
    transition: all 0.3s ease;
}

.speaker-card:hover .speaker-image img {
    border-color: var(--color-yellow);
    transform: scale(1.02);
}

.speaker-info h4 {
    margin-bottom: 12px;
    line-height: 1.3;
}

.speaker-info p {
    margin: 0;
    line-height: 1.5;
}

/* Agenda Section Styles */
.agenda-section-area {
    background: linear-gradient(135deg, var(--color-white) 0%, #f8f9fa 100%);
    padding: 80px 0;
}

.agenda-timeline {
    position: relative;
}

.agenda-day {
    margin-bottom: 60px;
}

.day-header {
    margin-bottom: 40px;
    position: relative;
}

.day-badge h3 {
    box-shadow: var(--shadow-light);
    transition: all 0.3s ease;
}

.day-badge:hover h3 {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sky);
}

.agenda-item {
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.agenda-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, var(--color-primary-green), var(--color-sky-blue));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.agenda-item:hover::before {
    opacity: 1;
}

.agenda-item:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-sky);
    border-color: var(--color-sky-blue);
}

.time-badge {
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.agenda-item:hover .time-badge {
    transform: scale(1.05);
}

.agenda-details {
    margin-top: 16px;
}

.agenda-details span {
    transition: all 0.3s ease;
}

.agenda-item:hover .agenda-details span {
    transform: translateX(4px);
}

.special-activities {
    border-top: 2px solid var(--color-primary-green);
    padding-top: 40px;
}

.special-activity {
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
}

.special-activity:hover {
    transform: translateY(-12px);
    box-shadow: var(--shadow-yellow);
    border-color: var(--color-yellow);
}

.special-activity div:first-child {
    transition: all 0.3s ease;
}

.special-activity:hover div:first-child {
    transform: scale(1.1) rotate(5deg);
}

/* Responsive Adjustments for Agenda */
@media (max-width: 992px) {
    .agenda-section-area {
        padding: 60px 0;
    }
    
    .agenda-day {
        margin-bottom: 50px;
    }
    
    .day-header {
        margin-bottom: 35px;
    }
    
    .day-badge h3 {
        font-size: 1.2rem !important;
        padding: 10px 24px !important;
    }
}

@media (max-width: 768px) {
    .agenda-section-area {
        padding: 50px 0;
    }
    
    .agenda-item {
        margin-bottom: 25px;
        padding: 25px 20px !important;
    }
    
    .day-badge h3 {
        font-size: 1.1rem !important;
        padding: 8px 20px !important;
    }
    
    .agenda-item h4 {
        font-size: 1.1rem !important;
    }
    
    .time-badge {
        font-size: 0.85rem !important;
        padding: 6px 14px !important;
    }
    
    .special-activity {
        margin-bottom: 20px;
        padding: 25px 15px !important;
    }
    
    .special-activity div:first-child {
        font-size: 2rem !important;
    }
    
    .special-activity h5 {
        font-size: 1.1rem !important;
    }
}

@media (max-width: 576px) {
    .agenda-section-area {
        padding: 40px 0;
    }
    
    .agenda-day {
        margin-bottom: 40px;
    }
    
    .day-header {
        margin-bottom: 25px;
    }
    
    .day-badge h3 {
        font-size: 1rem !important;
        padding: 8px 16px !important;
    }
    
    .agenda-item {
        padding: 20px 15px !important;
        margin-bottom: 20px;
    }
    
    .agenda-item h4 {
        font-size: 1rem !important;
        margin-bottom: 10px !important;
    }
    
    .agenda-item p {
        font-size: 0.9rem !important;
        margin-bottom: 10px !important;
    }
    
    .time-badge {
        font-size: 0.8rem !important;
        padding: 6px 12px !important;
        margin-bottom: 14px !important;
    }
    
    .agenda-details span {
        font-size: 0.8rem !important;
        padding: 3px 10px !important;
    }
    
    .special-activities {
        padding-top: 30px;
        margin-top: 30px;
    }
    
    .special-activity {
        padding: 20px 15px !important;
    }
    
    .special-activity div:first-child {
        font-size: 1.8rem !important;
        margin-bottom: 12px !important;
    }
    
    .special-activity h5 {
        font-size: 1rem !important;
    }
    
    .special-activity p {
        font-size: 0.85rem !important;
    }
}

/* Article page button fixes for mobile */
.back-to-news {
    margin-top: 40px;
}

.back-to-news .vl-btn1 {
    display: inline-block;
    padding: 12px 24px;
    margin: 0 8px 12px 0;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* Mobile responsive button layout */
@media (max-width: 768px) {
    .back-to-news .vl-btn1 {
        display: block;
        width: 100%;
        margin: 0 0 15px 0 !important;
        text-align: center;
        padding: 14px 20px;
        font-size: 0.95rem;
    }
    
    .back-to-news {
        margin-top: 30px;
    }
}

@media (max-width: 576px) {
    .back-to-news .vl-btn1 {
        padding: 12px 16px;
        font-size: 0.9rem;
        margin-bottom: 12px;
    }
}

/* Responsive adjustments for speakers */
@media (max-width: 992px) {
    .speakers-section-area {
        padding: 60px 0;
    }
    
    .speaker-card {
        padding: 25px 20px;
        margin-bottom: 30px;
    }
    
    .speaker-image img {
        width: 180px !important;
        height: 180px !important;
    }
}

@media (max-width: 768px) {
    .speaker-card {
        padding: 20px 15px;
        margin-bottom: 25px;
    }
    
    .speaker-image img {
        width: 160px !important;
        height: 160px !important;
    }
    
    .speaker-info h4 {
        font-size: 1.1rem !important;
    }
    
    .speaker-info p {
        font-size: 0.9rem !important;
    }
}

@media (max-width: 576px) {
    .speakers-section-area {
        padding: 40px 0;
    }
    
    .speaker-card {
        padding: 20px 15px;
        margin-bottom: 20px;
    }
    
    .speaker-image img {
        width: 140px !important;
        height: 140px !important;
    }
    
    .speaker-info h4 {
        font-size: 1rem !important;
    }
    
    .speaker-info p {
        font-size: 0.85rem !important;
    }
}