/* css/style.css */

/* Custom Font Declaration */
@font-face {
  font-family: 'FCVision';
  src: url('FCVision-Black.otf') format('opentype');
  font-weight: 900; /* Black weight */
  font-style: normal;
  font-display: swap; /* Better loading performance */
}

/* CSS custom properties for navigation bar height only */
:root {
  --nav-height: 350px; /* Full header height initially */
  --nav-height-compressed: 175px; /* Compressed header height */
  --scroll-offset: 10vh; /* 1/4 of viewport height for section positioning */
}

/* Language Switcher Styles */
.language-switcher {
  margin-left: auto;
}

.lang-btn {
  position: relative;
  transition: all 0.3s ease;
  border-radius: 4px;
  cursor: pointer;
}

.lang-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.lang-btn.active {
  color: #fbbf24 !important; /* yellow-400 */
  font-weight: bold;
}

.lang-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background-color: #fbbf24;
  border-radius: 1px;
}

/* Ensure proper text color inheritance */
.lang-btn.text-yellow-400 {
  color: #fbbf24 !important;
}

.lang-btn.text-white {
  color: #ffffff !important;
}

/* Language visibility styles - Enhanced approach using body classes */
body.lang-th .lang-en,
body.lang-th .english-content,
body.lang-th [lang="en"],
body.lang-th [data-detected-lang="en"] {
  display: none !important;
  visibility: hidden !important;
}

body.lang-en .lang-th,
body.lang-en .thai-content,
body.lang-en [lang="th"],
body.lang-en [data-detected-lang="th"] {
  display: none !important;
  visibility: hidden !important;
}

/* Default state - only hide specifically marked Thai content */
body:not(.lang-th) .lang-th,
body:not(.lang-th) .thai-content,
body:not(.lang-th) [lang="th"] {
  display: none;
  visibility: hidden;
}

/* Language group containers */
[data-lang-group="en"] {
  display: block;
}

[data-lang-group="th"] {
  display: none;
}

body.lang-th [data-lang-group="th"] {
  display: block !important;
  visibility: visible !important;
}

body.lang-th [data-lang-group="en"] {
  display: none !important;
  visibility: hidden !important;
}

body.lang-en [data-lang-group="en"] {
  display: block !important;
  visibility: visible !important;
}

body.lang-en [data-lang-group="th"] {
  display: none !important;
  visibility: hidden !important;
}

/* Smooth transitions for language switching */
.lang-text,
[data-lang-group] {
  transition: opacity 0.3s ease-in-out;
}

/* Debug mode - shows detected language elements with colored borders */
body.debug-lang [data-detected-lang="en"] {
  border: 2px solid blue !important;
}

body.debug-lang [data-detected-lang="th"] {
  border: 2px solid red !important;
}
}

/* Mobile language switcher adjustments */
@media (max-width: 768px) {
  .language-switcher {
    width: 100%;
    justify-content: center;
    margin: 16px 0;
    padding-top: 16px;
    border-top: 1px solid #374151;
    border-left: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
}

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--scroll-offset); /* Account for compressed sticky nav */
}

section[id] {
  scroll-margin-top: var(--scroll-offset); /* Account for compressed sticky nav */
}

/* No body padding needed since header is not fixed */
body {
  font-family: Open Sans, Arial, sans-serif !important;
  color: #666;
  margin: 0;
  padding: 0;
}

/* Main Header Styles - New Multi-Image Layout */
#main-header {
  position: sticky;
  top: 0;
  z-index: 1001;
  width: 100%;
  transition: all 0.3s ease;
  background: white;
}

.header-container {
  width: 100%;
  height: 350px; /* Fixed height for header background */
  background-image: url('../assets/images/CM24_BG.png');
  background-size: 100% 100%; /* Force 100% width and height coverage */
  background-position: 0 0; /* Start position x=0, y=0 - you can adjust this */
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* This ensures nav stays at bottom */
  transition: all 0.3s ease;
  position: relative;
}

.header-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center the logos */
   /*padding: 1rem 2rem; Add some padding */
   /*padding-bottom: 0; Remove bottom padding for navigation */
}

.header-logos {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.header-left {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.header-right {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.header-date {
  margin-top: 1rem;
}

/* Logo Images */
.header-logo-left,
.header-logo-center,
.header-logo-right,
.header-logo-date {
  max-width: 100%;
  height: auto;
  transition: all 0.3s ease;
}

.header-logo-left {
  max-width: 400px;
}

.header-logo-center {
  max-width: 400px;
}

.header-logo-right {
  max-width: 400px;
}

.header-logo-date {
  max-width: 250px;
}

/* Navigation in Header */
.header-navigation {
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  padding: 1rem 0; /* Remove horizontal padding */
  margin: 0; /* Remove all margins */
  position: relative;
  flex-shrink: 0; /* Prevent navigation from shrinking */
  margin-top: auto; /* Push navigation to bottom */
}

.header-navigation .nav-container {
  width: 100%;
  max-width: none; /* Remove max-width constraint */
  margin: 0;
  padding: 0 1rem; /* Add horizontal padding only to container */
}

.header-navigation .nav-link {
  color: white;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Sticky Compressed State */
#main-header.compressed {
  height: 185px !important; /* 50% of 350px */
}

#main-header.compressed .header-container {
  height: 185px !important; /* 50% of 350px */
}

#main-header.compressed .header-content {
  flex: 1; /* Use full available space */
  overflow: hidden; /* Hide any overflow if images are too large */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Keep content vertically centered */
  min-height: 0; /* Allow shrinking */
  max-height: 130px; /* Specific height limit for compressed state */
}

/* Reduce images by 30% when compressed */
#main-header.compressed .header-logo-left,
#main-header.compressed .header-logo-right,
#main-header.compressed .header-logo-date {
  transform: scale(0.7); /* 70% of original size = 30% reduction */
  transform-origin: center;
  max-height: 80px; /* Limit height to ensure they fit */
  width: auto; /* Maintain aspect ratio */
}

#main-header.compressed .header-logo-center{
  transform: scale(1); /* 70% of original size = 30% reduction */
  transform-origin: center;
  width: auto; /* Maintain aspect ratio */
}

/* Ensure images stay vertically centered when compressed */
#main-header.compressed .header-left {
  align-items: center;
  justify-content: center; /* Center the content within the smaller space */
  height: 100%; /* Take full height of available space */
  overflow: hidden; /* Prevent overflow */
  min-height: 0; /* Allow shrinking */
  padding-left: 1rem; /* Add padding to shift content toward center */
}

#main-header.compressed .header-center {
  align-items: center;
  justify-content: center;
  height: 100%; /* Take full height of available space */
  overflow: hidden; /* Prevent overflow */
  min-height: 0; /* Allow shrinking */
}

#main-header.compressed .header-right {
  align-items: center;
  justify-content: center; /* Center the content within the smaller space */
  height: 100%; /* Take full height of available space */
  overflow: hidden; /* Prevent overflow */
  min-height: 0; /* Allow shrinking */
  padding-right: 1rem; /* Add padding to shift content toward center */
}

#main-header.compressed .header-logos {
  align-items: center;
  height: 100%; /* Take full height */
  min-height: 0; /* Allow shrinking */
  overflow: hidden; /* Prevent overflow */
  gap: 0.5rem; /* Further reduce gap when compressed */
  
}

/* Ensure center section date doesn't add extra height */
#main-header.compressed .header-date {
  margin-top: -1rem; /* Reduce margin */
}

#main-header.compressed .header-navigation {
  font-size: 0.875rem;
  padding: 0.5rem 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .header-logos {
    grid-template-columns: 1fr; /* Single column layout */
    gap: 0rem;
    text-align: center;
  }
  
  /* Hide left and right sections on mobile */
  .header-left,
  .header-right {
    /* display: none; */
  }
  
  /* Show only center section */
  .header-center {
    justify-content: center;
    grid-column: 1; /* Take full width */
  }
  
  .header-logo-left,
  .header-logo-center,
  .header-logo-right {
    max-width: 250px;
  }
  
  .header-logo-date {
    max-width: 200px;
  }
  
  .header-container {
    height: 300px; /* Slightly smaller on mobile */
  }
  
  .header-content {
    padding: 0.5rem 1rem; /* Reduce padding on mobile */
  }
  
  #main-header.compressed {
    height: 150px !important;
  }
  
  #main-header.compressed .header-container {
    height: 150px !important;
  }
  
  #main-header.compressed .header-content {
    flex: 1; /* Use full available space on mobile */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    max-height: 100px; /* Smaller height limit on mobile */
  }
  
  /* Hide left and right on compressed mobile too */
  #main-header.compressed .header-left,
  #main-header.compressed .header-right {
    display: none;
  }
}

@media (max-width: 480px) {
  .header-logo-left,
  .header-logo-center,
  .header-logo-right {
    max-width: 200px;
  }
  
  .header-logo-date {
    max-width: 150px;
  }
  
  .header-container {
    height: 250px; /* Even smaller on very small screens */
  }
  
  .header-content {
    padding: 0.25rem 0.5rem; /* Minimal padding on very small screens */
  }
  
  /* Ensure left and right are hidden on very small screens too */
  .header-left,
  .header-right {
    /* display: none !important; */
  }
  
  #main-header.compressed {
    height: 125px !important;
  }
  
  #main-header.compressed .header-container {
    height: 125px !important;
  }
  
  #main-header.compressed .header-content {
    flex: 1; /* Use full available space on small screens */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    max-height: 75px; /* Even smaller height limit on small screens */
  }
  
  /* Hide left and right on compressed small screens too */
  #main-header.compressed .header-left,
  #main-header.compressed .header-right {
    display: none !important;
  }
}

/* Separate Sticky Navigation Bar - Removed (now integrated in header) */

.top_header span{
    font-size: 14px;
}
/* General container styling */
.container {
  max-width: 1440px;
  margin: 0 auto;
  /* padding: 0 15px; */
}

/* Navigation specific container */
.nav-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Event Highlight Section Styles */
.event-highlight {
    /* padding: 80px 0; */
    background-color: #f7f7f7;
    width: 100%;
    border-bottom: 1px solid #e0e0e0;
}

.highlight-container {
    display: flex;
    align-items: stretch; /* Ensures both columns are the same height */
    /* gap: 50px; */ /* Ensure this is removed or 0 if it was there */
    max-width: 100%; /* This is good, similar to reference's content constraint */
    /* margin: 0 auto; */
}

.highlight-text {
    flex: 40%;
    background-color: #ef2829;
    padding: 60px 50px; /* Added substantial padding. Adjust as needed. Reference uses ~80px top/bottom, ~60px sides */
    display: flex; /* To control alignment of content within */
    flex-direction: column; /* Stack text elements vertically */
    justify-content: center; /* Vertically center the text block */
}

.highlight-text h2 {
    font-size: 2rem;
    color: #FFF;
    margin-bottom: 20px;
    line-height: 1.2;
    font-weight: 700;
}

.highlight-text .highlight-subtitle {
    font-size: 1.2rem;
    color: #c1201e;
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.highlight-text p {
    font-size: 1.4rem;
    color: #FFF;
    margin-bottom: 30px;
    line-height: 1.7;
}

.highlight-text p.location {
    margin-bottom: 0px;
}

.highlight-text p span {
    font-size: 0.9rem;
}

.register-button-red {
    display: inline-block;
    background-color: #E53935;       /* Bold red background like in the image */
    color: #fff;                     /* White text */
    padding: 15px 40px;              /* Generous padding for bold appearance */
    text-decoration: none;
    font-weight: 900;                /* Extra bold font weight */
    font-size: 1.2rem;               /* Larger font size for impact */
    border-radius: 8px;              /* Slightly rounded corners */
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 2px;             /* Increased letter spacing for bold look */
    border: none;                    /* No border for clean look */
    align-self: flex-start;
    box-shadow: 0 4px 15px rgba(229, 57, 53, 0.4); /* Red shadow for depth */
    font-family: 'Arial Black', Arial, sans-serif; /* Bold font family */
}

.learn-more-button:hover {
    background-color: #D32F2F;       /* Darker red on hover */
    transform: translateY(-2px);     /* Subtle lift effect */
    box-shadow: 0 6px 20px rgba(229, 57, 53, 0.6); /* Enhanced shadow on hover */
    color: #fff;                     /* Keep white text on hover */
}

.register-button {
    display: inline-block;
    background-color: #fff;       /* Bold red background like in the image */
    color: #D32F2F;                     /* White text */
    padding: 15px 40px;              /* Generous padding for bold appearance */
    text-decoration: none;
    font-weight: 900;                /* Extra bold font weight */
    font-size: 1.2rem;               /* Larger font size for impact */
    border-radius: 8px;              /* Slightly rounded corners */
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 2px;             /* Increased letter spacing for bold look */
    border: none;                    /* No border for clean look */
    align-self: flex-start;
    box-shadow: 0 4px 15px rgba(229, 57, 53, 0.4); /* Red shadow for depth */
    font-family: 'Arial Black', Arial, sans-serif; /* Bold font family */
}

.register-button:hover {
    background-color: #fff;       /* Darker red on hover */
    transform: translateY(-2px);     /* Subtle lift effect */
    box-shadow: 0 6px 20px rgba(229, 57, 53, 0.6); /* Enhanced shadow on hover */
    color: #D32F2F;                     /* Keep white text on hover */
}

.highlight-image {
    flex: 60%;
    /* height: auto; */ /* This is fine, will stretch due to align-items: stretch on parent */
    display: flex; /* Keeps image centered if it's not 100% width/height, though img style below handles it */
    /* align-items: center; */ /* Not strictly necessary if img is 100% height */
    /* justify-content: center; */ /* Not strictly necessary if img is 100% width */
}

.highlight-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* border-radius: 8px; */ /* Reference image does not have rounded corners */
    /* box-shadow: 0 4px 20px rgba(0,0,0,0.15); */ /* Reference image does not have a shadow */
}

/* Responsive adjustments for Event Highlight Section */
@media (max-width: 992px) { /* Adjust breakpoint as needed, e.g. for tablets */
    .highlight-text h2 {
        font-size: 2rem;
    }
    .highlight-text .highlight-subtitle {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) { /* For smaller tablets and mobile */
    .event-highlight {
        padding: 50px 0;
    }
    
    .highlight-container {
        flex-direction: column;
        /* gap: 30px */
    }

    .highlight-text {
        /* padding-right: 0;
        text-align: center; */
        flex-basis: auto; /* Reset flex-basis for stacked layout */
        padding: 60px 20px; /* Adjust padding for mobile */
        text-align: center;
    }

    .highlight-image {
        /* max-width: 100%; */
        flex-basis: auto;
    }

    .highlight-text h2 {
        font-size: 1.8rem;
    }
    
    .learn-more-button {
        padding: 8px 18px;
        align-self: center; /* Center button on mobile if text is centered */
        font-size: 1.1rem;
        padding: 12px 30px;
        letter-spacing: 1.5px;
    }

    /* Responsive styles for fullscreen header */
    .header-image-fullscreen {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }
  
  #main-header.scrolled .header-image-fullscreen {
    max-height: 50px; /* Smaller height on mobile when scrolled */
  }
  
  .logo-wrapper-fullscreen .container {
    padding: 10px 15px; /* Add some padding on mobile */
  }
}

@media (max-width: 480px) {
  #main-header.scrolled .header-image-fullscreen {
    max-height: 40px; /* Even smaller on very small screens */
  }
  
  .learn-more-button {
        font-size: 1rem;
        padding: 10px 25px;
        letter-spacing: 1px;
    }
}

/* Updated yellow background color */
.bg-yellow {
  background-color: #c1201e !important;
}

/* Center-align text in the Event Highlight section */
.text-event-highlight {
  text-align: center;
}

/* Main Header Styles */
#main-header {
  z-index: 1001;
  background-color: white;
  transition: all 0.3s ease;
  width: 100%;
}

/* Navigation bar - sticky behavior */
#main-header nav {
  background-color: #000000;
  color: #ffffff;
  border-bottom: 1px solid #333333;
  position: sticky;               /* Make nav sticky */
  top: 0;                        /* Stick to top */
  z-index: 1001;                 /* High z-index for visibility */
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Add shadow when sticky */
}

/* Top header styling (now part of fixed header) */
.top_header {
  position: relative; /* Changed from sticky since main header is fixed */
  width: 100%;
  z-index: 1001;
}

/* Logo wrapper for smooth resizing */
.logo-wrapper {
  transition: padding 0.3s ease-in-out; /* More specific transition */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 0;
  background-color: white;
}

/* Fullscreen logo wrapper */
.logo-wrapper-fullscreen {
  transition: all 0.3s ease-in-out;
  background-color: white;
  width: 100%;
  padding: 0;
}

/* Header image fullscreen styles */
.header-image-fullscreen {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  transition: all 0.3s ease-in-out;
}

/* Remove logo wrapper styling for scrolled state - no longer needed */

/* Logo resizing on scroll */
#main-header img {
  transition: max-height 0.3s ease-in-out; /* More specific transition */
  max-height: 120px;
  width: auto;
}

#main-header.scrolled img {
  max-height: 70px; /* Smaller fixed height */
}

/* Override for fullscreen header image */
#main-header .header-image-fullscreen {
  max-height: none; /* Remove height restriction for fullscreen */
  width: 100%;
  height: auto;
}

#main-header.scrolled .header-image-fullscreen {
  max-height: 70px; /* Apply height restriction when scrolled */
  width: auto;
}

/* Remove old navigation styling - already updated above */

/* Navigation links styling for sticky nav */
#sticky-nav a {
  color: #ffffff;
  font-weight: 500;
  transition: color 0.3s ease;
}

#sticky-nav a:hover {
  color: #fbbf24; /* yellow-400 */
  text-decoration: underline;
}

/* Mobile menu styling for sticky nav */
#sticky-nav #menu-links {
  background-color: #000000;
}

/* Navigation responsive text sizing and spacing */
.nav-links {
  font-size: 18px;
  white-space: nowrap;
}

.nav-link {
  font-weight: 800;
  transition: color 0.3s ease;
  padding: 0.5rem 0.75rem;
}

/* Mobile Navigation Improvements */
@media (max-width: 767px) {
  .nav-container {
    max-width: 100%;
    padding: 0 10px;
  }
  
  #menu-links {
    background-color: #000000;
    border-top: 1px solid #333333;
    max-width: 100%;
    left: 0;
    right: 0;
  }
  
  .nav-link {
    color: #ffffff;
    padding: 12px 20px;
    border-bottom: 1px solid #333333;
    font-size: 18px;
    white-space: normal;
    text-align: center;
    display: block;
    width: 100%;
  }
  
  .nav-link:hover {
    background-color: #333333;
    color: #fbbf24;
  }
}

/* Very small screens */
@media (max-width: 480px) {
  .nav-link {
    font-size: 18px;
    line-height: 1.3;
    padding: 10px 15px;
  }
}

/* Ensure navigation text doesn't wrap on desktop */
@media (min-width: 768px) {
  .nav-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  
  #menu-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  
  .nav-link {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* For very wide screens, ensure optimal spacing */
@media (min-width: 1600px) {
  .nav-container {
    max-width: 1800px;
  }
  
  .nav-links {
    font-size: 18px;
  }
  
  .nav-link {
    padding: 0.5rem 1.5rem;
  }
  
  #menu-links {
    gap: 2rem;
  }
}

/* Responsive navigation adjustments */
@media (max-width: 768px) {
  :root {
    --nav-height: 70px; /* Slightly taller nav on mobile */
  }
}

@media (max-width: 480px) {
  :root {
    --nav-height: 65px;
  }
}

/* Sticky Navigation Logo Styles */
.sticky-nav-logo {
  width: 150px;
  height: auto;
  max-width: 90%;
  display: block;
  margin: 0 auto;
}

/* Responsive adjustments for sticky nav logo */
@media (max-width: 768px) {
  .sticky-nav-logo {
    width: 250px;
  }
}

@media (max-width: 480px) {
  .sticky-nav-logo {
    width: 200px;
  }
}

/* Dropdown Menu Styles */
/* Default state for dropdown menu items is managed by Tailwind classes in HTML */
/* e.g., hidden, static, md:absolute etc. */

/* Desktop hover effect for dropdowns */
@media (min-width: 768px) { /* md breakpoint from Tailwind */
  .dropdown:hover .dropdown-menu {
    display: block; /* Show dropdown on hover */
  }
  .dropdown:hover > a .fas.fa-chevron-down {
    transform: rotate(180deg); /* Rotate chevron on hover */
  }
  /* Desktop specific positioning is primarily handled by Tailwind classes in the HTML 
     (e.g., md:absolute, md:bg-white, md:shadow-lg, md:rounded, md:mt-1, md:w-auto, md:min-w-max) */
}

/* Ensure text wrapping is handled for dropdown items if they become too long */
.dropdown-menu a {
  white-space: nowrap; /* Original style, keep if desired */
  /* Consider changing to 'normal' if nowrap causes issues on small dropdowns */
}

/* Chevron transition - applies to both hover and potential JS-driven rotation */
.dropdown > a .fas.fa-chevron-down {
  transition: transform 0.2s ease-in-out;
}

#lightbox {
  z-index: 1001;;
}

/* Optional: If you add a class like 'mobile-dropdown-open' via JS for chevron rotation on mobile */
/*
.dropdown > a.mobile-dropdown-open .fas.fa-chevron-down {
  transform: rotate(180deg);
}
*/

/* Old sticky logo section styles removed - now integrated in main header */

/* Background styles for specific sections */
#race-categories,
#registration-fees,
#finisher-categories,
#finisher-rewards,
#race-awards,
#race-info {
  background-image: url('../assets/images/cm24-longBG.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#race-awards,
#race-info {
  background-repeat: repeat;
}

.section-title {
  color: #fff;
  padding-left: 6%;
  font-size: 3.5rem;
  line-height: 1;
  font-family: 'FCVision', 'Arial Black', sans-serif;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.section-title-bk {
  color: #000;
  padding-left: 6%;
  font-size: 3.5rem;
  line-height: 1;
  font-family: 'FCVision', 'Arial Black', sans-serif;
  font-weight: 900;
  letter-spacing: 0.02em;
}

@media (max-width: 768px) {
  .section-title,
  .section-title-bk {
    font-size: 2rem;
    line-height: 1;
  }
}

@media (max-width: 480px) {
  .section-title,
  .section-title-bk {
    font-size: 2rem;
    line-height: 1;
  }
}

.sub-title-bk {
  color: #000;
  padding-left: 9%;
}

.section-sub-title {
  color: #fff;
  padding-left: 6%;
}

ul.section-list {
  color: #fff;
  padding-left: 6%;
}

ul.section-list-x2 {
  color: #fff;
  padding-left: 9%;
}

.section-text {
  color: #fff;
  padding-left: 1%;
  padding-right: 1%;
  background-color: rgba(255, 50, 47, 0.5);
  border-radius: 2px;
  padding-top: 15px;
  padding-bottom: 15px;
  margin: 20px 9%;
  font-size: 1.1rem;
}

.section-text-bk {
  color: #000;
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 1.1rem;
}

.unsection-space{
  padding-left: 6%;
}

/* Active navigation link styling */
.nav-link.active {
  color: #fbdb0a !important; /* text-yellow-600 */
  font-weight: 800 !important; /* font-bold */
  text-decoration: underline !important; /* Underline active link */
}

.nav-link.active:hover {
  color: #fbdb0a !important; /* Keep same color on hover */
  text-decoration: none !important; /* Remove underline */
  text-decoration: underline !important; /* Underline active link */
}

/* Sticky Register Button Styles */
.sticky-register-button {
  display: flex;
  align-items: center;
  justify-content: center;
  /* width: 80px;
  height: 200px; */
  width: 200px;
  height: 80px;
  padding: 12px;
  border-radius: 12px 0 0 12px;
  text-decoration: none;
  /* writing-mode: vertical-rl; */
  text-orientation: mixed;
  background-color: white;
  border: 3px solid #dc2626;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}

.sticky-register-button:hover {
    background-color: white !important;
}

.sticky-register-text {
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: 3px;
  color: #dc2626;
  text-transform: uppercase;
  white-space: nowrap;
  font-family: 'Arial Black', Arial, sans-serif;
}

/* Hide sticky button on very small screens */
@media (max-width: 768px) {
  #sticky-register-btn {
    position: fixed;
    right: 10px;
    bottom: 20px;
    top: auto;
    transform: none;
  }
  
  .sticky-register-button {
    width: 120px;
    height: 50px;
    border-radius: 8px;
    writing-mode: horizontal-tb;
    font-size: 12px;
  }
  
  .sticky-register-text {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
  }
}

/* Adjust positioning for tablet screens */
@media (max-width: 1024px) and (min-width: 769px) {
  .sticky-register-button {
    width: 200px;
    height: 80px;
  }
  
  .sticky-register-text {
    font-size: 14px;
    letter-spacing: 2px;
  }
}