/* <style> */
        /* Zoom-out animation */
        @keyframes zoomOut {
            0% {
                transform: scale(1.2);
            }

            100% {
                transform: scale(1);
            }
        }

        .zoom-out-bg {
            animation: zoomOut 6s ease-out forwards;
        }
    /* </style> */


    /* <!-- strip section top --> */
    /* <!-- strip --> */
   
        /* Custom responsive breakpoints and utilities */
        @media (max-width: 640px) {
            .mobile-stack {
                flex-direction: column;
                align-items: flex-start;
            }

            .mobile-full-width {
                width: 100%;
            }

            .mobile-justify-between {
                justify-content: space-between;
            }
        }

        @media (max-width: 480px) {
            .xs-text-xs {
                font-size: 0.75rem;
            }

            .xs-space-x-2>*+* {
                margin-left: 0.5rem;
            }

            .xs-py-1 {
                padding-top: 0.25rem;
                padding-bottom: 0.25rem;
            }
        }

        /* Dropdown animations */
        .dropdown-menu {
            opacity: 0;
            transform: translateY(-10px);
            transition: all 0.2s ease-in-out;
            pointer-events: none;
        }

        .dropdown-menu.show {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        /* Ensure dropdowns don't get cut off */
        .dropdown {
            position: relative;
            z-index: 50;
        }
   
    /* <!-- strip --> */
    /* <!-- strip section top --> */

    /* <!-- nav --> */
    /* <!-- nav --> */
   
        /* Custom animations for enhanced mobile experience */
        @keyframes slideInFromLeft {
            from {
                transform: translateX(-100%);
                opacity: 0;
            }

            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes slideOutToLeft {
            from {
                transform: translateX(0);
                opacity: 1;
            }

            to {
                transform: translateX(-100%);
                opacity: 0;
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes fadeOut {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
            }
        }

        @keyframes bounceIn {
            0% {
                transform: scale(0.3) translateX(-50px);
                opacity: 0;
            }

            50% {
                transform: scale(1.05) translateX(0);
            }

            70% {
                transform: scale(0.9);
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        @keyframes pulse {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }
        }

        /* Enhanced sidebar animations */
        .sidebar-open {
            animation: slideInFromLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        .sidebar-close {
            animation: slideOutToLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        .overlay-show {
            animation: fadeIn 0.3s ease-out forwards;
        }

        .overlay-hide {
            animation: fadeOut 0.2s ease-out forwards;
        }

        .nav-item-animate {
            animation: bounceIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
        }

        /* Stagger animation delays for nav items */
        .nav-item:nth-child(1) {
            animation-delay: 0.1s;
            opacity: 0;
        }

        .nav-item:nth-child(2) {
            animation-delay: 0.15s;
            opacity: 0;
        }

        .nav-item:nth-child(3) {
            animation-delay: 0.2s;
            opacity: 0;
        }

        .nav-item:nth-child(4) {
            animation-delay: 0.25s;
            opacity: 0;
        }

        .nav-item:nth-child(5) {
            animation-delay: 0.3s;
            opacity: 0;
        }

        .nav-item:nth-child(6) {
            animation-delay: 0.35s;
            opacity: 0;
        }

        .nav-item:nth-child(7) {
            animation-delay: 0.4s;
            opacity: 0;
        }

        /* Menu button transformation animation */
        .menu-btn-active {
            animation: pulse 0.3s ease-in-out;
        }

        /* Hamburger to X transformation */
        .hamburger-line {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            transform-origin: center;
        }

        .menu-open .hamburger-line:nth-child(1) {
            transform: translateY(6px) rotate(45deg);
        }

        .menu-open .hamburger-line:nth-child(2) {
            opacity: 0;
            transform: scaleX(0);
        }

        .menu-open .hamburger-line:nth-child(3) {
            transform: translateY(-6px) rotate(-45deg);
        }

        /* Smooth transitions */
        .smooth-transition {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Custom glassmorphism effect */
        .glass-effect {
            backdrop-filter: blur(20px);
            background: rgba(255, 255, 255, 0.95);
        }

        /* Ripple effect for buttons */
        .ripple {
            position: relative;
            overflow: hidden;
        }

        .ripple::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }

        .ripple:active::before {
            width: 300px;
            height: 300px;
        }
   
    /* <!-- nav --> */
    /* <!-- nav --> */


 
    /* <!-- about and photos section --> */
 
    /* body {
      font-family: sans-serif;
      margin: 0;
      background: #f3f4f6;
      padding: 20px;
    } */

      /* #router {
         font-family: sans-serif;
      margin: 0;
      background: #f3f4f6;
      padding: 20px;
      } */


    /* section {
      background: white;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      padding: 40px;
      max-width: 1200px;
      margin: 20px auto;
    } */

    #yoyo {
        background: white;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      padding: 40px;
      max-width: 1200px;
      margin: 20px auto;
    }

    /* About Section */
    .about-section h2 {
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 10px;
      margin-top: 0;
    }

    .highlights {
      border-top: 1px solid #e5e7eb;
      border-bottom: 1px solid #e5e7eb;
      padding: 24px 0;
    }

    .highlights h3 {
      font-weight: 600;
      font-size: 1.125rem;
      margin-bottom: 12px;
      margin-top: 0;
    }

    .highlights ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .highlights li {
      display: flex;
      align-items: flex-start;
      margin-bottom: 8px;
    }

    .highlights li:last-child {
      margin-bottom: 0;
    }

    .checkmark {
      color: #6cb015;
      font-weight: bold;
      margin-right: 8px;
      flex-shrink: 0;
    }

    .highlights p {
      margin: 0;
    }

    .description {
      padding-top: 24px;
    }

    .description h3 {
      font-weight: 600;
      font-size: 1.125rem;
      margin-bottom: 12px;
      margin-top: 0;
    }

    .description p {
      line-height: 1.625;
      color: #374151;
      margin: 0;
    }

    /* Photos Section */
    .gallery h2 {
      margin-bottom: 10px;
      margin-top: 0;
      font-size: 1.5rem;
      font-weight: bold;
    }

    .photos {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: 200px;
      gap: 15px;
    }

    .photos div {
      border-radius: 10px;
      overflow: hidden;
      position: relative;
      cursor: pointer;
    }

    .photos img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.4s ease-in-out;
    }

    .photos div:hover img {
      transform: scale(1.1);
    }

    /* Hover icon overlay */
    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .photos div:hover .overlay {
      opacity: 1;
    }

    .overlay span {
      font-size: 2rem;
      color: white;
      background: rgba(0,0,0,0.6);
      padding: 10px 15px;
      border-radius: 50%;
    }

    /* Modal */
    .modal {
      display: none;
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.85);
      justify-content: center;
      align-items: center;
      animation: fadeIn 0.4s ease;
    }

    .modal img {
      max-width: 90%;
      max-height: 80%;
      border-radius: 10px;
      transform: scale(0.7);
      opacity: 0;
      transition: transform 0.4s ease, opacity 0.4s ease;
    }

    .modal.show img {
      transform: scale(1);
      opacity: 1;
    }

    .modal span {
      position: absolute;
      top: 20px;
      right: 30px;
      font-size: 2rem;
      color: white;
      cursor: pointer;
    }

    @keyframes fadeIn {
      from { background: rgba(0,0,0,0); }
      to { background: rgba(0,0,0,0.85); }
    }

    /* Special spans */
    .div1 {
      grid-column: span 2;
      grid-row: span 2;
    }

    .div9 {
      grid-column: span 2;
      grid-row: span 1;
    }

    /* Responsive */
    @media (max-width: 768px) {
      section {
        padding: 20px;
      }

      .photos {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 150px;
      }
    }

  /* <!-- about and photos section --> */

/* <!-- itinerary section --> */

 
    /* Section Wrapper */
    #itinerary-section {
      font-family: sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* padding: 40px; */
      top: -21px;
      position: relative;
      margin: 0;
    }

    /* Main Box */
    .itinerary-container {
      background: white;
      padding: 20px;
      border-radius: 12px;
      max-width: 1200px;
      width: 100%;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      margin: 20px auto;
    }

    /* Mobile responsive */
    @media (max-width: 768px) {
      .itinerary-container {
        width: 100%;
        /* padding: 15px; */
        max-width: 1200px;
      }
    }

    .itinerary-container h2 {
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 10px;
      margin-top: 0;
    }

    .itinerary-container p {
      color: #374151;
      line-height: 1.625;
      margin: 0;
    }

    .divider {
      border-top: 1px solid #e5e7eb;
      margin: 20px 0;
    }

    /* Day Item */
    .itinerary-day {
      border-bottom: 1px solid #eee;
    }

    .day-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      padding: 15px 0;
    }

    .toggle-icon {
      background: #6cb015;
      color: white;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
      transition: transform 0.3s ease;
    }

    .day-title {
      font-size: 18px;
      font-weight: 500;
      margin-left: 15px;
      flex-grow: 1;
    }

    .day-details {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease, padding 0.3s ease;
      color: #374151;
      line-height: 1.625;
    }

    .itinerary-day.active .day-details {
      max-height: 300px;
      padding: 10px 0 15px 45px;
    }

    .itinerary-day.active .toggle-icon {
      transform: rotate(45deg);
    }

    /* @media (max-width: 768px) {
      body {
        padding: 20px;
      }
    } */

/* <!-- itinerary section --> */