/* styles.css - Custom Styles for Tak Trail Series Thailand */

 body {
   font-family: 'Inter', sans-serif;
   overflow-x: hidden;
 }


 .logo-img {
   height: 110px;
 }

 @media (max-width: 768px) {
   .logo-img {
     height: 70px;
   }

   .carousel-control-prev,
   .carousel-control-next {
     pointer-events: none;
   }

   .carousel-control-prev span,
   .carousel-control-next span {
     pointer-events: auto;
   }


 }

 .menu-toggle {
   background: transparent;
   border: none;
   color: white;
   font-size: 30px;
   z-index: 1050;
   position: relative;
 }

 #mobileMenu a {
   margin-left: 10px;
   padding: 5px 15px;
   border: 1px solid white;
   color: white;
   text-decoration: none;
   border-radius: 4px;
 }

 #mobileMenu a:hover {
   background-color: white;
   color: black;
 }

 @media (max-width: 991.98px) {
   #mobileMenu {
     position: absolute;
     top: 70px;
     right: 16px;
     background-color: rgba(0, 0, 0, 0.95);
     border-radius: 8px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
     padding: 15px;
     z-index: 1045;
     display: none;
     flex-direction: column;
     align-items: flex-start;
     min-width: 150px;
     max-width: calc(100vw - 32px);
     box-sizing: border-box;
   }

   #mobileMenu.show {
     display: flex !important;
   }

   #mobileMenu a {
     display: block;
     padding: 10px 15px;
     border: 1px solid white;
     margin-bottom: 8px;
     margin-left: 0px;
     border-radius: 5px;
     background-color: transparent;
     color: white;
     text-align: center;
     width: 100%;
   }

   #mobileMenu a:hover {
     background-color: rgba(255, 255, 255, 0.1);
   }

   .menu-toggle {
     z-index: 1000;
   }
 }

 .hero-header {
   position: relative;
   height: 100vh;
   overflow: hidden;
 }

 .hero-header .carousel-item img {
   width: 100%;
   height: 100vh;
   object-fit: cover;
   object-position: center;
 }

 .hero-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.4);
   z-index: 1;
 }

 .hero-content {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: #fff;
   z-index: 2;
   text-align: center;
 }

 .hero-navbar {
   position: absolute;
   top: 20px;
   left: 30px;
   right: 30px;
   z-index: 1040;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .hero-navbar .nav-btns a {
   margin-left: 10px;
   padding: 5px 15px;
   border: 1px solid white;
   color: white;
   text-decoration: none;
   border-radius: 4px;
 }

 .hero-navbar .nav-btns a:hover {
   background-color: white;
   color: black;
 }

 .carousel-control-prev,
 .carousel-control-next {
   z-index: 10;
 }

 .gallery-item {
   overflow: hidden;
   border-radius: 10px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
   transition: transform 0.3s ease;
 }

 .gallery-item img {
   width: 100%;
   height: 200px;
   object-fit: cover;
   border-radius: 10px;
 }

 .gallery-item:hover {
   transform: scale(1.03);
 }

 .section-title {
   font-size: 1.8rem;
   border-bottom: 3px solid #6C2BD9;
   display: inline-block;
   padding-bottom: 10px;
   margin-bottom: 30px;
 }

 .about-section {
   position: relative;
   overflow: hidden;
   z-index: 1;
   padding: 60px 0;
 }

 @media (min-width: 1200px) {
   .about-section {
     padding: 80px 0;
   }
 }

 .bg-image-wrapper {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   overflow: hidden;
   z-index: 0;
   will-change: transform;
 }

 .bg-layer {
   background-color: rgba(0, 0, 0, 0.5);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
 }

 .bg-image {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 120%;
   background-size: cover;
   background-position: center center;
   transform: translate3d(0, 0, 0);
   transition: transform 0.1s ease-out;
   z-index: 0;
 }

 .about-section .container {
   z-index: 2;
   position: relative;
   padding: 40px 20px;
   text-align: center;
 }

 #registration {
   background-color: #f9f9f9;
 }

 #registration .btn-primary {
   background-color: #6C2BD9;
   border-color: #6C2BD9;
 }

 #registration .btn-primary:hover {
   background-color: #5021a6;
   border-color: #5021a6;
 }

 .footer-custom {
   background-color: #33087c;
   /* หรือใช้ #1C1C72 ตามโทนภาพจริง */
   color: #fff;
 }

 .footer-custom a {
   color: #fff;
   text-decoration: none;
 }

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

 .card-img-overlay-container {
   position: relative;
 }

 .card-img-overlay-container img {
   width: 100%;
   height: auto;
   display: block;
   border-radius: 0.375rem;
 }

 .overlay-distance,
 .overlay-elevation {
   position: absolute;
   background-color: rgba(0, 0, 0, 0.6);
   color: #fff;
   font-weight: 600;
   padding: 8px 14px;
   border-radius: 12px;
   font-size: 0.875rem;
   line-height: 1.4;
   display: inline-block;
 }

 .overlay-distance {
   top: 10px;
   left: 10px;
 }

 .overlay-elevation {
   bottom: 10px;
   right: 10px;
   text-align: right;
 }

 .card-img-top {
   height: 320px;
   object-fit: cover;
 }

 .card .position-absolute h5 {
   font-size: 1rem;
 }

 .card .btn-danger {
   background-color: #d71920;
   border: none;
 }
 .race-card {
   position: relative;
   color: white;
 }

 .race-card .overlay {
   z-index: 1;
 }

 .race-card .z-2 {
   z-index: 2;
 }
 .race-logo {
   height: 80px;
   border-radius: 12px;
   padding: 1.5px;
   background-color: rgba(255, 255, 255, 0.15);
   box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
 }

 .btn-view-more {
   background-color: #6C2BD9;
   /* สีม่วงเข้ม */
   color: #fff;
   border: none;
   padding: 10px 24px;
   font-weight: 600;
   font-size: 1rem;
   border-radius: 8px;
   transition: background-color 0.3s ease;
 }

 .btn-view-more:hover {
   background-color: #5021a6;
   /* สีม่วงเข้มขึ้นเมื่อ hover */
   color: #fff;
 }