body {
            font-family: 'Segoe UI', system-ui, sans-serif;
            padding-top: 120px;
        }

        .fixed-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            width: 100%;
        }

        .top-nav {
            background: linear-gradient(to right, #3D6B89, #3D6B89, #00CCF9) !important;
            border-bottom: 1px solid #e5e7eb;
        }

        .main-nav {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            border-bottom: 1px solid #e5e7eb;
        }

        .section-title {
            font-size: 1.875rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 1.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #3b82f6;
        }

        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-top: 2rem;
        }

        .card {
            border-radius: 0.75rem;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            background: white;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }

        .card-img {
            height: 180px;
            background-color: #2563eb;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .card-content {
            padding: 1.5rem;
        }

        .card-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 0.75rem;
        }

        .card-text {
            color: #4b5563;
            line-height: 1.6;
        }

        .booking-button {
            background-color: #3D6B89 !important;
        }

        @media (min-width: 768px) {
            .md\:text-blue-700 {
                --tw-text-opacity: 1;
                color: #000 !important;
            }
        }

        @media (min-width: 768px) {
            .md\:hover\:text-blue-700:hover {
                --tw-text-opacity: 1;
                color: #000 !important;
            }
        }
        .bg-accent{
            background-color: #3D6B89 !important;
        }
        .border-accent{
            border-color: #3D6B89 !important;
        }
        .wavy-bg{
            background: linear-gradient(to right, #3D6B89, #3D6B89, #00CCF9) !important;
        }
        .text-accent{
            color: #3D6B89 !important;
        }
        .bg-box{
            background: linear-gradient(to right, #3D6B89, #3D6B89, #00CCF9) !important;
        }
#whatsapp-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    cursor: pointer;
  }
  #whatsapp-widget .whatsapp-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
  }
  #whatsapp-widget .whatsapp-icon:hover {
    transform: scale(1.1);
  }
  #whatsapp-widget img {
    width: 35px;
    height: 35px;
  }
  .stat-circle {
            transition: transform 0.3s ease;
        }
        .stat-circle:hover {
            transform: scale(1.1);
        }
        .wavy-bg {
            background: linear-gradient(135deg, #a3e4b7 0%, #4ecdc4 100%);
            background-size: 200% 200%;
            animation: wave 5s ease infinite;
        }
        @keyframes wave {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .hero-pattern {
            background: linear-gradient(rgba(26, 54, 93, 0.85), rgba(26, 54, 93, 0.9)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect fill="%23f8fafc" width="100" height="100"/><path d="M0 0L100 100" stroke="%23d4af37" stroke-width="2"/><path d="M100 0L0 100" stroke="%23d4af37" stroke-width="2"/></svg>');
            background-size: cover;
        }
        .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
        .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
            width: 16px !important;
            height: 4px !important;
            border-radius: 5px !important;
            margin: 0 6px !important;
        }

        .swiper-pagination {
            bottom: 2px !important;
        }

        .swiper-wrapper {
            height: max-content !important;
            width: max-content !important;
            padding-bottom: 64px;
            display: flex !important;
            /* Ensure horizontal layout */
        }

        .swiper-pagination-bullet-active {
            background: #4F46E5 !important;
        }

        .swiper-slide.swiper-slide-active>.slide_active\:border-indigo-600 {
            --tw-border-opacity: 1;
            border-color: rgb(79 70 229 / var(--tw-border-opacity));
        }

        .swiper-slide.swiper-slide-active>.group .slide_active\:text-gray-800 {
            ---tw-text-opacity: 1;
            color: rgb(31 41 55 / var(--tw-text-opacity));
        }
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

        .form-container {
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
            border-radius: 16px;
            overflow: hidden;
        }

        .input-focus:focus {
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
            border-color: #6366f1;
        }

        .btn-primary {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);
        }

        .image-container {
            position: relative;
            height: 100%;
        }

        .image-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, rgba(79, 70, 229, 0.8) 0%, rgba(124, 58, 237, 0.7) 100%);
            opacity: 0.2;
            z-index: 1;
        }

        .image-content {
            position: relative;
            z-index: 2;
        }
        .image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .equal-height-container {
            display: flex;
            flex-direction: column;
        }

        @media (min-width: 1024px) {
            .equal-height-container {
                flex-direction: row;
            }
        }