@media (max-width: 860px){

  .nav-toggle{ display:block; }



  /* Mobile nav container */

  .site-nav{

    display: none;

    width: 100%;

    margin-top: 10px;

    padding: 12px;

    border: 1px solid var(--border);

    background: rgba(255,255,255,.85);

    border-radius: 18px;



    /* ✅ force vertical */

    flex-direction: column;

    flex-wrap: nowrap;      /* ✅ prevents “3 lines” wrapping */

    align-items: stretch;

    gap: 8px;

  }



  .site-nav.open{ display:flex; }



  /* Links as full-width rows */

  .site-nav a{

    width: 100%;

    display: block;

    padding: 12px 14px;

    border-radius: 16px;

    text-align: center;

  }



  /* Make CTA buttons centered */

  .site-nav a.pill,

  .site-nav a.pill-2{

    text-align: center;

    font-weight: 700;

  }



  .header-inner{ flex-wrap: wrap; }

  .card{ grid-column: span 12; }

}

/* Mobile: stack content vertically */
@media (max-width: 860px) {
  .countdown-section {
    height: auto;
    grid-template-columns: 1fr; /* Stack sections vertically */
  }

  .countdown-left {
    width: 100%; /* Make the left section take full width */
    margin-right: 0;
    padding: 22px;
  }

  .countdown-right {
    grid-template-columns: 1fr;
    width: 100%; /* Ensure the right section takes full width */
  }

  .countdown-image {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    height: 220px;
    margin-bottom: 12px;
  }

  .timer {
    display: flex;
    gap: 10px;
    justify-content: center; /* Center the timer */
    flex-wrap: nowrap; /* Ensure all countdown boxes stay on the same line */
  }

  .tbox {
    margin-right: 10px; /* Space between countdown boxes */
  }
}

@media (max-width: 860px){
  .admin-sidebar{
    position:relative;
    width:100%;
    height:auto;
    border-right:none;
    margin-bottom:12px;
  }

  .admin-content{
    margin-left:0;
  }
}

/* Mobile-specific slider adjustments */
@media only screen and (max-width: 768px) {
    /* Remove dots */
    .slider-dots {
        display: none !important;
    }

    /* Remove navigation arrows */
    .slider-controls, .slider-btn {
        display: none !important;
    }

    /* Set slider width to 100% and remove border-radius */
    .slider {
        width: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important; /* Ensure no additional margins */
    }

    /* Enable touch swipe navigation */
    .slider-track {
        touch-action: pan-y; /* Allow vertical scrolling while enabling horizontal sliding */
    }

    /* Adjust image height for mobile */
    .slide img {
        height: 260px !important;
    }
}
