<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Idukki - Premium Drone Photography & Tourism Services | Idukki Attractions</title>
    <meta name="description" content="Get Idukki offers professional drone photography, guided tours, and room booking services at Idukki's top attractions. Licensed photographer with 4K aerial videos starting at ₹499.">
    <meta name="keywords" content="drone photography Idukki, Getidukki, GetIdukki aerial videography, tourism guide, room booking, Anamudi, Thekkady, Munnar">
    <meta name="author" content="Get Idukki">
    <meta name="theme-color" content="#0f172a">
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Inter', 'Segoe UI', sans-serif;
            background: #f8fafc;
            color: #1e293b;
            line-height: 1.6;
        }

        /* ==================== ANIMATIONS ==================== */
        @keyframes slideInDown {
            from {
                opacity: 0;
                transform: translateY(-40px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(40px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-40px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(40px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.7;
            }
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-15px);
            }
        }

        @keyframes scaleIn {
            from {
                opacity: 0;
                transform: scale(0.95);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes bounce {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }

        @keyframes marquee {
            0% {
                transform: translateX(100%);
            }
            100% {
                transform: translateX(-100%);
            }
        }

        @keyframes glow {
            0%, 100% {
                box-shadow: 0 0 20px rgba(251, 146, 60, 0.4);
            }
            50% {
                box-shadow: 0 0 40px rgba(251, 146, 60, 0.8);
            }
        }

        .animate-slideInDown {
            animation: slideInDown 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .animate-slideInUp {
            animation: slideInUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .animate-slideInLeft {
            animation: slideInLeft 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .animate-slideInRight {
            animation: slideInRight 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .animate-fadeIn {
            animation: fadeIn 0.8s ease-out;
        }

        .animate-pulse {
            animation: pulse 2s infinite;
        }

        .animate-float {
            animation: float 3s ease-in-out infinite;
        }

        .animate-scaleIn {
            animation: scaleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .animate-bounce {
            animation: bounce 2s infinite;
        }

        .animate-marquee {
            animation: marquee 20s linear infinite;
        }

        .animate-glow {
            animation: glow 3s ease-in-out infinite;
        }

        /* ==================== NAVBAR ==================== */
        nav {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .nav-container {
            max-width: 7xl;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 70px;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: 800;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 10px;
            letter-spacing: -0.5px;
        }

        .logo span {
            color: #fb923c;
        }

        .nav-links {
            display: flex;
            gap: 2rem;
            list-style: none;
        }

        .nav-links a {
            color: #cbd5e1;
            text-decoration: none;
            font-weight: 500;
            font-size: 0.95rem;
            position: relative;
            transition: color 0.3s ease;
        }

        .nav-links a::before {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, #fb923c, #f97316);
            transition: width 0.3s ease;
            border-radius: 2px;
        }

        .nav-links a:hover {
            color: #fb923c;
        }

        .nav-links a:hover::before {
            width: 100%;
        }

        .hamburger {
            display: none;
            flex-direction: column;
            cursor: pointer;
            gap: 6px;
        }

        .hamburger span {
            width: 25px;
            height: 3px;
            background: #fff;
            border-radius: 2px;
            transition: all 0.3s ease;
        }

        .mobile-menu {
            display: none;
            position: absolute;
            top: 70px;
            left: 0;
            right: 0;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            flex-direction: column;
            padding: 20px;
            gap: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .mobile-menu.active {
            display: flex;
        }

        .mobile-menu a {
            color: #cbd5e1;
            text-decoration: none;
            font-weight: 500;
            padding: 12px 0;
            border-bottom: 1px solid rgba(251, 146, 60, 0.2);
            transition: color 0.3s ease;
        }

        .mobile-menu a:hover {
            color: #fb923c;
        }

        @media (max-width: 768px) {
            .hamburger {
                display: flex;
            }

            .nav-links {
                display: none;
            }

            .nav-container {
                height: 60px;
            }
        }

        /* ==================== MARQUEE ==================== */
        .marquee-container {
            background: linear-gradient(90deg, #dc2626 0%, #991b1b 100%);
            color: white;
            padding: 15px 0;
            overflow: hidden;
            font-weight: 700;
            font-size: 1rem;
            box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
        }

        .marquee-content {
            display: inline-block;
            padding-left: 100%;
            white-space: nowrap;
            animation: marquee 25s linear infinite;
        }

        .marquee-icon {
            color: #fbbf24;
            margin-right: 10px;
        }

        /* ==================== CAROUSEL ==================== */
        .carousel-container {
            position: relative;
            width: 100%;
            height: 600px;
            overflow: hidden;
            background: #000;
        }

        .carousel-slide {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.8s ease-in-out;
        }

        .carousel-slide.active {
            opacity: 1;
        }

        .carousel-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .carousel-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.5) 0%, rgba(30, 41, 59, 0.3) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color: white;
            text-align: center;
            padding: 20px;
        }

        .carousel-overlay h1 {
            font-size: 4rem;
            font-weight: 900;
            margin-bottom: 20px;
            animation: slideInDown 0.8s ease-out;
            text-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
            letter-spacing: -1px;
        }

        .carousel-overlay p {
            font-size: 1.8rem;
            margin-bottom: 40px;
            animation: slideInUp 0.8s ease-out 0.2s both;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
            font-weight: 500;
        }

        .carousel-button {
            padding: 16px 40px;
            background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1.1rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            animation: slideInUp 0.8s ease-out 0.4s both;
            box-shadow: 0 10px 30px rgba(251, 146, 60, 0.4);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .carousel-button:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(251, 146, 60, 0.6);
        }

        .carousel-button:active {
            transform: translateY(-2px);
        }

        .carousel-dots {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 12px;
            z-index: 10;
        }

        .carousel-dot {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.4);
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid rgba(255, 255, 255, 0.6);
        }

        .carousel-dot.active {
            background: #fb923c;
            width: 36px;
            border-radius: 8px;
            border-color: #fb923c;
        }

        @media (max-width: 768px) {
            .carousel-container {
                height: 350px;
            }

            .carousel-overlay h1 {
                font-size: 2.2rem;
            }

            .carousel-overlay p {
                font-size: 1.1rem;
                margin-bottom: 30px;
            }

            .carousel-button {
                padding: 12px 30px;
                font-size: 0.95rem;
            }
        }

        /* ==================== CARDS & GRID ==================== */
        .card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            border: 1px solid rgba(251, 146, 60, 0.1);
        }

        .card:hover {
            transform: translateY(-12px);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
            border-color: rgba(251, 146, 60, 0.3);
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 30px;
            padding: 60px 20px;
            max-width: 7xl;
            margin: 0 auto;
        }

        /* ==================== BUTTONS ==================== */
        .btn {
            padding: 12px 28px;
            border: none;
            border-radius: 8px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-size: 0.95rem;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-primary {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            color: white;
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.3);
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.5);
        }

        .btn-secondary {
            background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
            color: white;
            box-shadow: 0 8px 20px rgba(251, 146, 60, 0.3);
        }

        .btn-secondary:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 30px rgba(251, 146, 60, 0.5);
        }

        .btn-outline {
            background: transparent;
            color: #fb923c;
            border: 2px solid #fb923c;
        }

        .btn-outline:hover {
            background: #fb923c;
            color: white;
            transform: translateY(-3px);
        }

        /* ==================== SECTIONS ==================== */
        .section {
            display: none;
            animation: fadeIn 0.6s ease-out;
        }

        .section.active {
            display: block;
        }

        .section-title {
            font-size: 3.5rem;
            font-weight: 900;
            text-align: center;
            margin-bottom: 60px;
            color: #0f172a;
            position: relative;
            padding-bottom: 20px;
            letter-spacing: -1px;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 5px;
            background: linear-gradient(90deg, #fb923c, #f97316);
            border-radius: 3px;
        }

        /* ==================== HERO SECTION ==================== */
        .hero-section {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            color: white;
            text-align: center;
            padding: 120px 20px;
            margin-top: -2px;
        }

        .hero-content {
            max-width: 800px;
            margin: 0 auto;
        }

        .hero-content h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            animation: slideInDown 0.8s ease-out;
            font-weight: 900;
            letter-spacing: -1px;
        }

        .hero-content p {
            font-size: 1.4rem;
            margin-bottom: 40px;
            animation: slideInUp 0.8s ease-out 0.2s both;
            font-weight: 500;
            color: #cbd5e1;
        }

        /* ==================== OFFER BADGES ==================== */
        .offer-badge {
            position: absolute;
            top: 15px;
            right: 15px;
            background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
            color: white;
            padding: 10px 18px;
            border-radius: 8px;
            font-weight: 800;
            font-size: 0.85rem;
            animation: pulse 2s infinite;
            box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .price-badge {
            position: absolute;
            top: 15px;
            left: 15px;
            background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
            color: white;
            padding: 12px 20px;
            border-radius: 8px;
            font-weight: 800;
            font-size: 1.2rem;
            animation: float 3s ease-in-out infinite;
            box-shadow: 0 4px 15px rgba(251, 146, 60, 0.4);
        }

        /* ==================== FORM STYLING ==================== */
        .form-container {
            background: white;
            padding: 50px 40px;
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(251, 146, 60, 0.1);
        }

        .form-group {
            margin-bottom: 24px;
            animation: slideInUp 0.6s ease-out;
        }

        .form-group label {
            display: block;
            margin-bottom: 10px;
            font-weight: 700;
            color: #0f172a;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 14px 16px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 1rem;
            font-family: inherit;
            transition: all 0.3s ease;
            background: #f8fafc;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #fb923c;
            background: white;
            box-shadow: 0 0 0 4px rgba(251, 146, 60, 0.1);
        }

        .form-group textarea {
            resize: vertical;
            min-height: 120px;
        }

        .form-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
        }

        /* ==================== CONTACT INFO ==================== */
        .contact-item {
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            padding: 30px;
            border-radius: 12px;
            border: 1px solid #e2e8f0;
            transition: all 0.3s ease;
            animation: slideInUp 0.6s ease-out;
        }

        .contact-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
            border-color: rgba(251, 146, 60, 0.3);
        }

        .contact-icon {
            font-size: 2.5rem;
            margin-bottom: 15px;
            color: #fb923c;
        }

        .contact-item h3 {
            font-weight: 800;
            margin-bottom: 10px;
            color: #0f172a;
            font-size: 1.1rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .contact-item p {
            color: #475569;
            font-weight: 500;
        }

        .contact-item a {
            color: #fb923c;
            text-decoration: none;
            font-weight: 700;
            transition: color 0.3s ease;
        }

        .contact-item a:hover {
            color: #f97316;
        }

        /* ==================== SOCIAL LINKS ==================== */
        .social-links {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }

        .social-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            color: white;
            border-radius: 50%;
            transition: all 0.3s ease;
            text-decoration: none;
            font-size: 1.3rem;
            box-shadow: 0 4px 15px rgba(15, 23, 42, 0.3);
            border: 2px solid transparent;
        }

        .social-link:hover {
            transform: translateY(-6px) scale(1.1);
            box-shadow: 0 10px 30px rgba(251, 146, 60, 0.4);
            border-color: #fb923c;
            background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
        }

        /* ==================== ALERT ==================== */
        .alert {
            padding: 18px 24px;
            border-radius: 8px;
            margin-bottom: 30px;
            animation: slideInDown 0.6s ease-out;
            border-left: 5px solid;
            font-weight: 700;
        }

        .alert-warning {
            background: #fff7ed;
            color: #7c2d12;
            border-color: #fb923c;
            box-shadow: 0 4px 15px rgba(251, 146, 60, 0.2);
        }

        .alert-success {
            background: #f0fdf4;
            color: #166534;
            border-color: #22c55e;
        }

        /* ==================== MODAL ==================== */
        .modal {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(5px);
            animation: fadeIn 0.4s ease-out;
        }

        .modal.active {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-content {
            background: white;
            padding: 50px 40px;
            border-radius: 12px;
            text-align: center;
            max-width: 500px;
            animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(251, 146, 60, 0.2);
        }

        .checkmark {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
            margin: 0 auto 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 3.5rem;
            animation: scaleIn 0.6s ease-out;
            box-shadow: 0 10px 30px rgba(34, 197, 94, 0.4);
        }

        .modal-content h2 {
            color: #22c55e;
            margin-bottom: 15px;
            font-size: 2rem;
            font-weight: 900;
        }

        .modal-content p {
            color: #475569;
            margin-bottom: 20px;
            line-height: 1.8;
            font-weight: 500;
        }

        .modal-close-btn {
            padding: 14px 32px;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 700;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 4px 15px rgba(15, 23, 42, 0.3);
        }

        .modal-close-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(15, 23, 42, 0.5);
        }

        /* ==================== FEATURE CARDS ==================== */
        .feature-box {
            background: white;
            padding: 40px 30px;
            border-radius: 12px;
            text-align: center;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        }

        .feature-box:hover {
            transform: translateY(-10px);
            border-color: #fb923c;
            box-shadow: 0 15px 40px rgba(251, 146, 60, 0.15);
        }

        .feature-icon {
            font-size: 3.5rem;
            margin-bottom: 20px;
        }

        .feature-box h3 {
            font-size: 1.3rem;
            font-weight: 800;
            margin-bottom: 15px;
            color: #0f172a;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .feature-box p {
            color: #64748b;
            line-height: 1.7;
            font-weight: 500;
        }

        /* ==================== VIDEO CARD ==================== */
        .video-card {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            height: 240px;
        }

        .video-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }

        .card:hover .video-card img {
            transform: scale(1.08);
        }

        /* ==================== PACKAGE CARD ==================== */
        .package-card {
            text-align: center;
        }

        .package-title {
            font-size: 1.5rem;
            font-weight: 800;
            margin: 20px 0 15px;
            color: #0f172a;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .package-description {
            color: #64748b;
            margin-bottom: 25px;
            line-height: 1.7;
            font-weight: 500;
        }

        .package-features {
            text-align: left;
            margin-bottom: 30px;
            padding: 0 20px;
            list-style: none;
        }

        .package-features li {
            padding: 10px 0;
            color: #475569;
            border-bottom: 1px solid #e2e8f0;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .package-features li::before {
            content: '✓';
            color: #fb923c;
            font-weight: 800;
            font-size: 1.2rem;
        }

        .package-features li:last-child {
            border-bottom: none;
        }

        /* ==================== FOOTER ==================== */
        footer {
            background: #0f172a;
            color: white;
            padding: 60px 20px 20px;
        }

        .footer-content {
            max-width: 7xl;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }

        .footer-section h3 {
            font-size: 1.2rem;
            font-weight: 800;
            margin-bottom: 20px;
            color: #fb923c;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .footer-section p {
            color: #cbd5e1;
            line-height: 1.8;
            font-weight: 500;
        }

        .footer-links {
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 12px;
        }

        .footer-links a {
            color: #cbd5e1;
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 500;
        }

        .footer-links a:hover {
            color: #fb923c;
        }

        .footer-bottom {
            border-top: 1px solid rgba(251, 146, 60, 0.2);
            padding-top: 30px;
            text-align: center;
            color: #94a3b8;
            font-weight: 500;
        }

        /* ==================== RESPONSIVE ==================== */
        @media (max-width: 768px) {
            .section-title {
                font-size: 2.2rem;
                margin-bottom: 40px;
            }

            .hero-content h1 {
                font-size: 2rem;
            }

            .hero-content p {
                font-size: 1.1rem;
                margin-bottom: 30px;
            }

            .form-container {
                padding: 30px 20px;
            }

            .grid-container {
                padding: 40px 20px;
                gap: 20px;
            }

            .modal-content {
                padding: 40px 25px;
                margin: 20px;
            }

            .footer-content {
                grid-template-columns: 1fr;
                gap: 30px;
            }
        }

        /* ==================== UTILITY ==================== */
        .max-w-7xl {
            max-width: 80rem;
            margin: 0 auto;
        }

        .px-20 {
            padding-left: 20px;
            padding-right: 20px;
        }

        .py-20 {
            padding-top: 20px;
            padding-bottom: 20px;
        }

        .text-center {
            text-align: center;
        }

        .hidden {
            display: none !important;
        }

        @media (max-width: 768px) {
            .hidden-mobile {
                display: none !important;
            }
        }
    </style>
    
    
    <style>
        
        /* Placeholder content for the webpage */
        .content {
            text-align: center;
            color: #333;
        }
        
        h1 {
            font-weight: 300;
            color: #FFde59;
        }

        /* 
           ========================================
           TOAST NOTIFICATION STYLES 
           ========================================
        */
        #toast {
            visibility: hidden; /* Hidden by default */
            min-width: 350px;   /* Minimum width */
            max-width: 90%;     /* Responsive max width */
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); /* Professional Blue Gradient */
            color: #fff;
            text-align: center;
            border-radius: 12px;
            padding: 20px 25px;
            position: fixed;
            z-index: 1000;      /* Ensure it sits on top of everything */
            left: 50%;
            bottom: 30px;
            transform: translateX(-50%); /* Center horizontally */
            box-shadow: 0 10px 25px rgba(0,0,0,0.2); /* Soft shadow for depth */
            font-family: inherit;
            
            /* Animation Setup */
            opacity: 0;
            transition: opacity 0.5s ease, bottom 0.5s ease, transform 0.5s ease;
        }

        /* The class added by JS to show the toast */
        #toast.show {
            visibility: visible;
            opacity: 1;
            bottom: 60px; /* Slide up distance */
            transform: translateX(-50%) scale(1.05); /* Slight pop effect */
        }

        /* Toast Internal Styling */
        .toast-header {
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #ffd700; /* Gold color for branding */
            border-bottom: 1px solid rgba(255,255,255,0.2);
            padding-bottom: 8px;
        }

        .toast-body {
            font-size: 0.95rem;
            line-height: 1.5;
            margin-bottom: 10px;
        }

        .toast-footer {
            font-size: 0.85rem;
            font-weight: 600;
            color: #e0e0e0;
            margin-top: 5px;
        }

        .contact-number {
            color: #fff;
            text-decoration: none;
            border: 1px solid rgba(255,255,255,0.4);
            padding: 4px 10px;
            border-radius: 20px;
            transition: background 0.3s;
        }
        
        .contact-number:hover {
            background: rgba(255,255,255,0.1);
        }

    </style>
    
    
    <style>
        /* Container to keep the Instagram post responsive */
        .instagram-embed-container {
            position: relative;
            padding-bottom: 100%; /* Maintains aspect ratio (1:1) */
            height: 0;
            overflow: hidden;
            max-width: 100%;
            background: #fff;
            margin: 0 auto;
        }

        /* Styles for iframe embedding */
        .instagram-embed-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
    
        <style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

/* The grid: Four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
}

/* Style the images inside the grid */
.column img {
  opacity: 0.8; 
  cursor: pointer; 
}

.column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container */
.container {
  position: relative;
  display: none;
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

/* Closable button inside the expanded image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}
</style>
    
    
</head>
<body>
    <!-- ==================== NAVBAR ==================== -->
    <nav>
        <div class="nav-container">
            <div class="logo">
                <span>📷🌄</span> Get Idukki .Com
            </div>
            <ul class="nav-links">
                <li><a href="#" class="menu-link" data-section="home">Home</a></li>
                <li><a href="#" class="menu-link" data-section="about">About Us</a></li>
                <li><a href="#" class="menu-link" data-section="services">Services</a></li>
                <li><a href="#" class="menu-link" data-section="contact">Contact</a></li>
                <li><a href="#" class="menu-link" data-section="booking">Booking</a></li>
            </ul>
            <div class="hamburger" onclick="toggleMobileMenu()">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="mobile-menu" id="mobileMenu">
            <a href="#" class="menu-link mobile-link" data-section="home">Home</a>
            <a href="#" class="menu-link mobile-link" data-section="about">About Us</a>
            <a href="#" class="menu-link mobile-link" data-section="services">Services</a>
            <a href="#" class="menu-link mobile-link" data-section="contact">Contact</a>
            <a href="#" class="menu-link mobile-link" data-section="booking">Booking</a>
        </div>
    </nav>

    <!-- ==================== MARQUEE ==================== -->
    <div class="marquee-container">
        <div class="marquee-content">
            <span class="marquee-icon">⚠️</span> EMERGENCY OFFER CLOSING SOON! Get professional drone HD raw videos at ₹999 (3 videos), ₹800 (2 videos), or ₹499 (1 video)! <span class="marquee-icon">🚁</span> BOOK NOW BEFORE OFFER EXPIRES! Limited time only!
        </div>
    </div>

    <!-- ==================== HOME SECTION ==================== -->
    <div id="home" class="section active">
        <!-- Carousel -->
        <div class="carousel-container">
            <div class="carousel-slide active">
                <img src="https://blogger.googleusercontent.com/img/a/AVvXsEje1f0NvexPLwahE0Pe354ulMxC_PzieT6gXoq1MoC2bCV-jrN8-qNSEKGyztlFQNuW_IijH51pIHStRrh-GN_3mf5b6GOYMTRkqc6G0YSM9J8mD4QZSE8lzOhd75FJ3LPq5Pv2BlqUyRkMy-ysU-tawz_-r50v3FV1F2L16nwO5XohAD3STuklvbDUIJ4=s16000" alt="Idukki Mountain Aerial View">
                <div class="carousel-overlay">
                    <h1>Welcome to Idukki</h1>
                    <p>Experience Heaven From Above</p>
                    <button class="carousel-button" onclick="showSection('booking')">Book Your Aerial Experience</button>
                </div>
            </div>
            <div class="carousel-slide">
                <img src="https://blogger.googleusercontent.com/img/a/AVvXsEg6LMR_LnrJUvKEDxrd3UjoYKqtC6d8HGAKSJDo90clzDV7FRkw8V3rQfGzkTmagxuy1c4YlLAooU3oIMWRUiXTu07uWYnzKwlsmAGrAg6lbEYZ097114YiGOGAJ61KrY-bcDJWGRDMmmiA8kD4iwyeerf4xuvuw_OLlkj38WXwmpmqdY4rgJt2u9Jlyls=s16000" alt="Professional Drone Photography">
                <div class="carousel-overlay">
                    <h1>Professional Drone Services</h1>
                    <p>Licensed Photographers | Premium HD Quality</p>
                    <button class="carousel-button" onclick="showSection('services')">Explore Our Services</button>
                </div>
            </div>
            <div class="carousel-slide">
                <img src="https://blogger.googleusercontent.com/img/a/AVvXsEh7F6YkyqtE983kMzB_M1tjWSc930io-HE6yVn67_-OueISqedZgiqo7Ii1tesIablOfryMb9aDH1EIyKgwM5pxNfqvbBl37AtOBYBJ18_tqq4aRfa2eAqq77YHN1HFNa34tFrqi5iEneaU_tglPmQjc0y-xgLXwgJ-gelwQMVFwJWYhjEbwZchNBrgte4=s16000" alt="Complete Tourism Packages">
                <div class="carousel-overlay">
                    <h1>Complete Tour Solutions</h1>
                    <p>Guided Tours | Room Booking | Exclusive Footage</p>
                    <button class="carousel-button" onclick="showSection('booking')">Plan Your Visit</button>
                </div>
            </div>

            <div class="carousel-dots">
                <span class="carousel-dot active" onclick="changeSlide(0)"></span>
                <span class="carousel-dot" onclick="changeSlide(1)"></span>
                <span class="carousel-dot" onclick="changeSlide(2)"></span>
            </div>
        </div>

        <!-- Hero Section -->
        <div class="hero-section">
            <div class="hero-content">
                <h1>Discover Idukki's Beauty</h1>
                <p>Professional Aerial Photography & Comprehensive Tourism Solutions</p>
            </div>
        </div>

        <!-- Offers Section -->
        <section style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); padding: 80px 20px;">
            <div class="max-w-7xl px-20">
                <h2 class="section-title animate-slideInDown">Special Offer Packages</h2>
                
                <div class="grid-container">
                    <!-- Package 1 -->
                    <div class="card animate-slideInLeft">
                        <div class="offer-badge">Best Value</div>
                        <div class="video-card">
                            <img src="https://blogger.googleusercontent.com/img/a/AVvXsEgldW1E2nTbodhC-qm-a85QY53-ZEiCMspbcPmOdaDtG8v_gMLccPwRRUSfqqbLHbQpK6i5wHw9CX_r3YdfQ8u6MsVY3yft4csEwcLI0Ihmt5FBOZVu6hkBt8a766HaMvMpX0TaUyub8WaKOgy1WZf9ggHsR0k7ZeWUC8q0S9zBe7Vuz2M-azgS40zoR2U=s16000" alt="Premium 3-Video Package">
                        </div>
                        <div class="package-card p-6">
                            <div class="price-badge">₹999</div>
                            <h3 class="package-title">3 Premium Videos</h3>
                            <p class="package-description">Professional HD Raw Aerial Footage Package</p>
                            <ul class="package-features">
                                <li>3 High-Resolution HD Raw Videos</li>
                                <li>30-45 Seconds Each</li>
                                <li>Multiple Angles Coverage</li>
                                <li>Licensed Photographer</li>
                                <li>Quick Turnaround (24hrs)</li>
                            </ul>
                            <button class="btn btn-secondary w-full" onclick="showSection('booking')">Book Now</button>
                        </div>
                    </div>

                    <!-- Package 2 -->
                    <div class="card animate-slideInUp">
                        <div style="position: absolute; top: 15px; right: 15px; background: linear-gradient(135deg, #f97316 0%, #fb923c 100%); color: white; padding: 10px 18px; border-radius: 8px; font-weight: 800; font-size: 0.85rem; z-index: 5; text-transform: uppercase; letter-spacing: 0.5px;">Most Popular</div>
                        <div class="video-card">
                            <img src="https://blogger.googleusercontent.com/img/a/AVvXsEjItHHpDtWn8_avZ0cl6QcjG4BQ2uHVLaWxY6BwTIP81ncCBFN3BbQpom4TCNRykx1LitZQmd8oyAQiVTQwo5gs9EQDfdXLPhXdv-iIBwEgYoRJHq3mlqBLJDt_KksvZ6vQtrYrnpsz48ra8lhfNdZYa-PAjzk3yZKr2UPNVtEpd6yf_rvz3fgrTIZuNCM=s16000" alt="Standard 2-Video Package">
                        </div>
                        <div class="package-card p-6">
                            <div class="price-badge">₹800</div>
                            <h3 class="package-title">2 Premium Videos</h3>
                            <p class="package-description">Perfect Balance of Quality & Value</p>
                            <ul class="package-features">
                                <li>2 High-Resolution HD Raw Videos</li>
                                <li>30-45 Seconds Each</li>
                                <li>Custom Location Selection</li>
                                <li>Licensed Photographer</li>
                                <li>Same-Day Delivery Available</li>
                            </ul>
                            <button class="btn btn-secondary w-full" onclick="showSection('booking')">Book Now</button>
                        </div>
                    </div>

                    <!-- Package 3 -->
                    <div class="card animate-slideInRight">
                        <div class="video-card">
                            <img src="https://images.unsplash.com/photo-1511632765486-a01980e01a18?w=500&h=280&fit=crop&q=80" alt="Starter 1-Video Package">
                        </div>
                        <div class="package-card p-6">
                            <div class="price-badge">₹499</div>
                            <h3 class="package-title">1 Premium Video</h3>
                            <p class="package-description">Perfect For First-Time Customers</p>
                            <ul class="package-features">
                                <li>1 High-Resolution HD Raw Video</li>
                                <li>30-45 Seconds Duration</li>
                                <li>Premium Location Capture</li>
                                <li>Licensed Photographer Certified</li>
                                <li>No Hidden Charges</li>
                            </ul>
                            <button class="btn btn-secondary w-full" onclick="showSection('booking')">Book Now</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Instagram Embed Container -->
    <div class="instagram-embed-container">
        <blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/jaleeladimaly/" data-instgrm-version="13" style="width: 100%; max-width: 540px; min-width: 326px; margin: 0 auto;">
            <a href="https://www.instagram.com/jaleeladimaly/" target="_blank" style="color: #f7f7f7;">View this post on Instagram</a>
        </blockquote>
    </div>

    <!-- Instagram Embed Script -->
    <script async src="https://www.instagram.com/embed.js"></script>
        
        
        
        

        <!-- Highlights Section -->
        <section style="background: white; padding: 80px 20px;">
            <div class="max-w-7xl px-20">
                <h2 class="section-title animate-slideInDown">Why Choose Get Idukki?</h2>
                
                <div class="grid-container">
                    <div class="feature-box animate-slideInLeft">
                        <div class="feature-icon">🚁</div>
                        <h3>Licensed Expertise</h3>
                        <p>Professional certified drone pilots with extensive experience capturing stunning aerial footage across all Idukki attractions.</p>
                    </div>
                    <div class="feature-box animate-slideInUp">
                        <div class="feature-icon">🎥</div>
                        <h3>HD Raw Quality</h3>
                        <p>Premium unprocessed HD raw videos maintaining maximum detail, clarity, and professional-grade output quality.</p>
                    </div>
                    <div class="feature-box animate-slideInRight">
                        <div class="feature-icon">🏨</div>
                        <h3>Complete Packages</h3>
                        <p>Full-service tourism solutions including guided tours, accommodation booking, and exclusive aerial footage services.</p>
                    </div>
                </div>
            </div>
            
            
            
        <div style="text-align:center">
  <h2>DGCA Approved </h2>
  <p>View Certificate:</p>
</div>

<!-- The four columns -->
<div class="row">
  <div class="column">
    <img src="https://blogger.googleusercontent.com/img/a/AVvXsEgkodHOuVVTDpwg8BZpVW_wF9LxddTtj6MpNegYrT4N_2TOC6cnsCVA1Qo4QO-FRHYAPWiNzMwPLbj_0xMioiRYExe1CnXTONfbbS5fgN7bb_Jc1tib9FgNnC_6vwhoMRc0B9I3N-6kUss9p-I-rBBYWIoK-9qcaSXJa272uAduSPt8booe9ugZM2flz_Y=s16000" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://blogger.googleusercontent.com/img/a/AVvXsEhFQj2JHGrKey_9ga4paivyKSkXmPtAQeBkLqx9QdXdSLq52rhN3Ge5ucY2TegrMlHwFIQ9M9mYC6kJTnEy1dIaq75rIRY3P-eygOxeiHUN5WDgxurG8RFmAgy7LX8eZdqG2LBIHlfZmlJF7uBhYMSzWFoRycNG7azxvhYJuzWP9fC1bGUUXPxw5A7kvCU=s16000" alt="Snow" style="width:100%" onclick="myFunction(this);">
  </div>
 
</div>

<div class="container">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <img id="expandedImg" style="width:100%">
  <div id="imgtext"></div>
</div>

<script>
function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}
</script>
    
            
            
            
            
            
        </section>
    </div>

    <!-- ==================== ABOUT SECTION ==================== -->
    <div id="about" class="section">
        <section style="background: white; padding: 80px 20px;">
            <div class="max-w-7xl px-20">
                <h2 class="section-title animate-slideInDown">About Get Idukki</h2>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 60px;">
                    <div class="animate-slideInLeft">
                        <img src="https://blogger.googleusercontent.com/img/a/AVvXsEj8NuI4ZRbPVLdBe6Ir-aH3308g7w4rIk8LYUZMJA8JHKbzif-JnMHY2AEMDVEKFybW0pB2gK8eAdDumU1w4C0C0Z-SDW8_uZ26YI260U_sEfqedsi2CyswuH3virANMYXWZARxpnlmWtq6Zkgwh8eslv0kU9rOHZ0oQ13xqwjf6NHFcQ6TNBZ_EU-itro=s16000" alt="Professional Drone Photography Team" style="border-radius: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15); width: 100%;">
                    </div>
                    <div class="animate-slideInRight">
                        <h3 style="font-size: 2rem; font-weight: 900; margin-bottom: 25px; color: #0f172a;">Capturing Idukki's Majesty</h3>
                        <p style="font-size: 1.1rem; line-height: 1.8; color: #475569; margin-bottom: 20px; font-weight: 500;">Get Idukki is Kerala's premier destination for professional drone photography and comprehensive tourism services. With state-of-the-art drone technology and licensed certified photographers, we bring your vision to life through breathtaking aerial footage.</p>
                        <p style="font-size: 1.1rem; line-height: 1.8; color: #475569; margin-bottom: 20px; font-weight: 500;">Our team combines technical expertise, creative vision, and deep local knowledge to deliver exceptional results that exceed expectations. Whether capturing weddings, real estate, tourism content, or commercial projects, we're your trusted partner.</p>
                        <p style="font-size: 1.1rem; line-height: 1.8; color: #475569; font-weight: 500;">Dedicated to excellence in every frame, every project, and every client interaction. Your satisfaction is our success.</p>
                    </div>
                </div>

                <h3 style="font-size: 2rem; font-weight: 900; margin: 60px 0 40px; color: #0f172a; text-align: center;">Our Expertise</h3>

                <div class="grid-container">
                    <div class="feature-box animate-slideInLeft">
                        <div class="feature-icon">📸</div>
                        <h3>Aerial Photography</h3>
                        <p>Professional aerial landscape photography capturing stunning vistas and scenic beauty from unique perspectives that ground photography cannot achieve.</p>
                    </div>
                    <div class="feature-box animate-slideInUp">
                        <div class="feature-icon">🎬</div>
                        <h3>Video Production</h3>
                        <p>Cinematic drone videography for weddings, events, commercials, and promotional content with professional color grading and editing.</p>
                    </div>
                    <div class="feature-box animate-slideInRight">
                        <div class="feature-icon">🗺️</div>
                        <h3>Mapping & Surveys</h3>
                        <p>Accurate drone mapping, land surveys, and 3D modeling services for real estate, construction, and agricultural applications.</p>
                    </div>
                    <div class="feature-box animate-slideInLeft" style="animation-delay: 0.2s;">
                        <div class="feature-icon">🎓</div>
                        <h3>Certified Expertise</h3>
                        <p>Fully licensed and insured drone operators maintaining highest safety and regulatory compliance standards across all operations.</p>
                    </div>
                    <div class="feature-box animate-slideInUp" style="animation-delay: 0.2s;">
                        <div class="feature-icon">🏆</div>
                        <h3>Awards & Recognition</h3>
                        <p>Award-winning aerial photography featured in tourism publications and recognized for exceptional quality and professional service.</p>
                    </div>
                    <div class="feature-box animate-slideInRight" style="animation-delay: 0.2s;">
                        <div class="feature-icon">💼</div>
                        <h3>Corporate Solutions</h3>
                        <p>Customized aerial photography packages for corporate clients, real estate developers, and commercial enterprises.</p>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- ==================== SERVICES SECTION ==================== -->
    <div id="services" class="section">
        <section style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); padding: 80px 20px;">
            <div class="max-w-7xl px-20">
                <h2 class="section-title animate-slideInDown">Our Services</h2>

                <div class="grid-container">
                    <div class="card animate-slideInLeft">
                        <div style="background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color: white; padding: 50px 30px; text-align: center;">
                            <div style="font-size: 4rem; margin-bottom: 20px;">🚁</div>
                            <h3 style="font-size: 1.8rem; font-weight: 900; margin-bottom: 30px; text-transform: uppercase; letter-spacing: 0.5px;">Drone Photography</h3>
                            <ul style="text-align: left; list-style: none; space: 20px;">
                                <li style="padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; gap: 10px;"><span style="color: #fb923c; font-size: 1.3rem;">✓</span> Aerial Landscape Photography</li>
                                <li style="padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; gap: 10px;"><span style="color: #fb923c; font-size: 1.3rem;">✓</span> Real Estate Documentation</li>
                                <li style="padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; gap: 10px;"><span style="color: #fb923c; font-size: 1.3rem;">✓</span> Event Coverage & Videography</li>
                                <li style="padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; gap: 10px;"><span style="color: #fb923c; font-size: 1.3rem;">✓</span> 4K Professional Raw Video</li>
                                <li style="padding: 12px 0; display: flex; align-items: center; gap: 10px;"><span style="color: #fb923c; font-size: 1.3rem;">✓</span> Custom Angle & Perspective Shots</li>
                            </ul>
                        </div>
                    </div>

                    <div class="card animate-slideInUp">
                        <div style="background: linear-gradient(135deg, #fb923c 0%, #f97316 100%); color: white; padding: 50px 30px; text-align: center;">
                            <div style="font-size: 4rem; margin-bottom: 20px;">🎫</div>
                            <h3 style="font-size: 1.8rem; font-weight: 900; margin-bottom: 30px; text-transform: uppercase; letter-spacing: 0.5px;">Guided Tours</h3>
                            <ul style="text-align: left; list-style: none; space: 20px;">
                                <li style="padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; gap: 10px;"><span style="color: white; font-size: 1.3rem;">✓</span> Expert Local Guides</li>
                                <li style="padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; gap: 10px;"><span style="color: white; font-size: 1.3rem;">✓</span> Customized Itineraries</li>
                                <li style="padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; gap: 10px;"><span style="color: white; font-size: 1.3rem;">✓</span> All Major Attractions</li>
                                <li style="padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; gap: 10px;"><span style="color: white; font-size: 1.3rem;">✓</span> Photography Stop Included</li>
                                <li style="padding: 12px 0; display: flex; align-items: center; gap: 10px;"><span style="color: white; font-size: 1.3rem;">✓</span> Flexible Scheduling Options</li>
                            </ul>
                        </div>
                    </div>

                    <div class="card animate-slideInRight">
                        <div style="background: linear-gradient(135deg, #0f7938 0%, #166534 100%); color: white; padding: 50px 30px; text-align: center;">
                            <div style="font-size: 4rem; margin-bottom: 20px;">🏨</div>
                            <h3 style="font-size: 1.8rem; font-weight: 900; margin-bottom: 30px; text-transform: uppercase; letter-spacing: 0.5px;">Room Booking</h3>
                            <ul style="text-align: left; list-style: none; space: 20px;">
                                <li style="padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; gap: 10px;"><span style="color: #fbbf24; font-size: 1.3rem;">✓</span> Budget to Luxury Options</li>
                                <li style="padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; gap: 10px;"><span style="color: #fbbf24; font-size: 1.3rem;">✓</span> Prime Location Hotels</li>
                                <li style="padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; gap: 10px;"><span style="color: #fbbf24; font-size: 1.3rem;">✓</span> Group Discounts Available</li>
                                <li style="padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; gap: 10px;"><span style="color: #fbbf24; font-size: 1.3rem;">✓</span> Advance Booking Facility</li>
                                <li style="padding: 12px 0; display: flex; align-items: center; gap: 10px;"><span style="color: #fbbf24; font-size: 1.3rem;">✓</span> Best Rates Guaranteed</li>
                            </ul>
                        </div>
                    </div>

                    <div class="card animate-slideInLeft" style="animation-delay: 0.2s;">
                        <div style="background: linear-gradient(135deg, #7c2d12 0%, #92400e 100%); color: white; padding: 50px 30px; text-align: center;">
                            <div style="font-size: 4rem; margin-bottom: 20px;">🍽️</div>
                            <h3 style="font-size: 1.8rem; font-weight: 900; margin-bottom: 30px; text-transform: uppercase; letter-spacing: 0.5px;">Tourism Packages</h3>
                            <ul style="text-align: left; list-style: none; space: 20px;">
                                <li style="padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; gap: 10px;"><span style="color: #fb923c; font-size: 1.3rem;">✓</span> Complete Itineraries</li>
                                <li style="padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; gap: 10px;"><span style="color: #fb923c; font-size: 1.3rem;">✓</span> Meal Arrangements</li>
                                <li style="padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; gap: 10px;"><span style="color: #fb923c; font-size: 1.3rem;">✓</span> Transportation Included</li>
                                <li style="padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; gap: 10px;"><span style="color: #fb923c; font-size: 1.3rem;">✓</span> All-in-One Solutions</li>
                                <li style="padding: 12px 0; display: flex; align-items: center; gap: 10px;"><span style="color: #fb923c; font-size: 1.3rem;">✓</span> Family-Friendly Options</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- ==================== CONTACT SECTION ==================== -->
    <div id="contact" class="section">
        <section style="background: white; padding: 80px 20px;">
            <div class="max-w-7xl px-20">
                <h2 class="section-title animate-slideInDown">Get In Touch</h2>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 60px;">
                    <div class="animate-slideInLeft">
                        <h3 style="font-size: 2rem; font-weight: 900; margin-bottom: 40px; color: #0f172a;">Contact Information</h3>

                        <div class="contact-item">
                            <div class="contact-icon">📱</div>
                            <h3>Primary Contact</h3>
                            <p><strong style="font-size: 1.2rem; color: #fb923c;">+91 9496183897</strong></p>
                            <p style="font-size: 0.9rem; color: #64748b; margin-top: 8px;">WhatsApp available for instant bookings and inquiries</p>
                        </div>

                        <div class="contact-item">
                            <div class="contact-icon">💬</div>
                            <h3>WhatsApp Direct</h3>
                            <p><a href="https://wa.me/919496183897?text=Hello%20Get%20Idukki!%20I%20am%20interested%20in%20your%20drone%20photography%20services." target="_blank" style="color: #fb923c; text-decoration: none; font-weight: 700; font-size: 1.1rem;">Chat with us on WhatsApp</a></p>
                            <p style="font-size: 0.9rem; color: #64748b; margin-top: 8px;">24/7 Available for bookings and inquiries</p>
                        </div>

                        <div class="contact-item">
                            <div class="contact-icon">📧</div>
                            <h3>Email Address</h3>
                            <p><a href="mailto:jaleeladimaly@gmail.com" style="color: #fb923c; text-decoration: none; font-weight: 700;">jaleeladimaly@gmail.com</a></p>
                            <p style="font-size: 0.9rem; color: #64748b; margin-top: 8px;">Response within 2 hours</p>
                        </div>

                        <div class="contact-item">
                            <div class="contact-icon">📍</div>
                            <h3>Service Location</h3>
                            <p><strong style="color: #0f172a;">Idukki District, Kerala</strong></p>
                            <p style="font-size: 0.9rem; color: #64748b; margin-top: 8px;">Coverage across all major tourist attractions</p>
                        </div>

                        <div style="margin-top: 40px;">
                            <h4 style="font-weight: 800; margin-bottom: 20px; color: #0f172a; text-transform: uppercase; letter-spacing: 0.5px;">Follow Us on Social Media</h4>
                            <div class="social-links">
                                <a href="https://facebook.com/" target="_blank" class="social-link" title="Facebook"><i class="fab fa-facebook-f"></i></a>
                                <a href="https://www.instagram.com/jaleeladimaly" target="_blank" class="social-link" title="Instagram"><i class="fab fa-instagram"></i></a>
                                <a href="https://youtube.com/" target="_blank" class="social-link" title="YouTube"><i class="fab fa-youtube"></i></a>
                                <a href="https://twitter.com/" target="_blank" class="social-link" title="Twitter"><i class="fab fa-x-twitter"></i></a>
                            </div>
                        </div>
                    </div>

                    <div class="animate-slideInRight">
                        <h3 style="font-size: 2rem; font-weight: 900; margin-bottom: 30px; color: #0f172a;">Quick Inquiry Form</h3>
                        <form id="contactForm" class="form-container">
                            <div class="form-group">
                                <label for="contactName">Full Name *</label>
                                <input type="text" id="contactName" required placeholder="Enter your full name">
                            </div>
                            <div class="form-group">
                                <label for="contactPhone">Phone Number *</label>
                                <input type="tel" id="contactPhone" required placeholder="+91 9XXXXXXXXX">
                            </div>
                            <div class="form-group">
                                <label for="contactEmail">Email Address</label>
                                <input type="email" id="contactEmail" placeholder="your.email@example.com">
                            </div>
                            <div class="form-group">
                                <label for="contactMessage">Message *</label>
                                <textarea id="contactMessage" required placeholder="Tell us how we can help you..."></textarea>
                            </div>
                            <button type="submit" class="btn btn-secondary w-full">Send Inquiry</button>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- ==================== BOOKING SECTION ==================== -->
    <div id="booking" class="section">
        <section style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); padding: 80px 20px;">
            <div class="max-w-7xl px-20">
                <h2 class="section-title animate-slideInDown">Book Your Experience</h2>
                <p style="text-align: center; color: #475569; margin-bottom: 30px; font-size: 1.1rem; font-weight: 500; max-width: 700px; margin-left: auto; margin-right: auto;">Complete the form below and our team will contact you within 2 hours via WhatsApp at <strong style="color: #fb923c;">+91 9496183897</strong></p>

                <div class="alert alert-warning">
                    <strong>⚠️ URGENT: LIMITED TIME OFFER!</strong> Our special drone video packages are closing soon. Book now to avail premium discounted rates on professional HD aerial footage!
                </div>

                <form id="bookingForm" class="form-container" style="max-width: 900px; margin: 0 auto;">
                    <!-- Row 1 -->
                    <div class="form-row">
                        <div class="form-group">
                            <label for="bookName">Full Name *</label>
                            <input type="text" id="bookName" required placeholder="Enter your full name">
                        </div>
                        <div class="form-group">
                            <label for="bookEmail">Email Address *</label>
                            <input type="email" id="bookEmail" required placeholder="your.email@example.com">
                        </div>
                    </div>

                    <!-- Row 2 -->
                    <div class="form-row">
                        <div class="form-group">
                            <label for="bookPhone1">Primary Contact Number *</label>
                            <input type="tel" id="bookPhone1" required placeholder="+91 9XXXXXXXXX">
                        </div>
                        <div class="form-group">
                            <label for="bookPhone2">Secondary Contact Number</label>
                            <input type="tel" id="bookPhone2" placeholder="+91 9XXXXXXXXX">
                        </div>
                    </div>

                    <!-- Row 3 -->
                    <div class="form-row">
                        <div class="form-group">
                            <label for="droneShots">Number of Drone Videos Required *</label>
                            <select id="droneShots" required>
                                <option value="">-- Select Package --</option>
                                <option value="1">1 Drone Video - ₹499 (HD Raw, 30-45 Seconds)</option>
                                <option value="2">2 Drone Videos - ₹800 (HD Raw, 30-45 Seconds Each)</option>
                                <option value="3">3 Drone Videos - ₹999 (HD Raw, 30-45 Seconds Each)</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="location">Preferred Location *</label>
                            <select id="location" required>
                                <option value="">-- Select Location --</option>
                                <option value="Anamudi">Anamudi Peak (Highest Mountain)</option>
                                <option value="TopStation">Top Station Munnar (Tea Gardens)</option>
                                <option value="Mahabaleshwar">Munnar Viewpoint</option>
                                <option value="IdukkireDam">Idukki Arch Dam </option>
                                <option value="Thekkady">Thekkady Wildlife Sanctuary</option>
                            </select>
                        </div>
                    </div>

                    <!-- Row 4 -->
                    <div class="form-row">
                        <div class="form-group">
                            <label for="arrivalDate">Date of Arrival *</label>
                            <input type="date" id="arrivalDate" required>
                        </div>
                        <div class="form-group">
                            <label for="arrivalTime">Time of Arrival *</label>
                            <input type="time" id="arrivalTime" required>
                        </div>
                    </div>

                    <!-- Row 5 -->
                    <div class="form-group">
                        <label for="paymentMethod">Mode of Payment *</label>
                        <select id="paymentMethod" required>
                            <option value="">-- Select Payment Method --</option>
                            <option value="googlepay">Google Pay (Instant)</option>
                            <option value="banktransfer">Bank Transfer (24 Hours)</option>
                            <option value="cash">Cash Payment (On Location)</option>
                        </select>
                    </div>

                    <!-- Row 6 -->
                    <div class="form-row">
                        <div class="form-group">
                            <label for="tourGuide">Tour Guide Required? *</label>
                            <select id="tourGuide" required>
                                <option value="">-- Select Option --</option>
                                <option value="yes">Yes, I need an expert tour guide</option>
                                <option value="no">No, I will self-guide</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="roomBooking">Room Booking Required? *</label>
                            <select id="roomBooking" required>
                                <option value="">-- Select Option --</option>
                                <option value="yes">Yes, I need accommodation</option>
                                <option value="no">No, I have my own accommodation</option>
                            </select>
                        </div>
                    </div>

                    <!-- Row 7 -->
                    <div class="form-group">
                        <label for="additionalRequirements">Additional Tour Requirements or Special Notes</label>
                        <textarea id="additionalRequirements" placeholder="Mention any special preferences, dietary restrictions, or additional services needed..."></textarea>
                    </div>

                    <button type="submit" class="btn btn-secondary w-full" style="padding: 16px 32px; font-size: 1.1rem;">
                        Submit Booking Request
                    </button>

                    <p style="text-align: center; color: #64748b; margin-top: 20px; font-weight: 600;">
                        ✓ You will receive booking confirmation via WhatsApp: <span style="color: #fb923c; font-weight: 800;">+91 9496183897</span>
                    </p>
                </form>
            </div>
        </section>
    </div>

    <!-- ==================== SUCCESS MODAL ==================== -->
    <div id="successModal" class="modal">
        <div class="modal-content">
            <div class="checkmark">✓</div>
            <h2>Booking Confirmed!</h2>
            <p id="successMessage">Your booking request has been submitted successfully. Our team will contact you within 2 hours via WhatsApp to confirm details and complete your booking.</p>
            <p style="font-weight: 800; font-size: 1.2rem; color: #0f172a; margin: 20px 0;">WhatsApp: <span style="color: #fb923c;">+91 9496183897</span></p>
            <button class="modal-close-btn" onclick="closeModal()">Close</button>
        </div>
    </div>

    <!-- ==================== FOOTER ==================== -->
    <footer>
        <div class="footer-content">
            <div class="footer-section animate-slideInLeft">
                <h3>📷🌄 Get Idukki</h3>
                <p>Professional drone photography and premium tourism services in Idukki, Kerala. Your trusted partner for capturing breathtaking aerial footage and creating unforgettable travel experiences.</p>
            </div>
            <div class="footer-section animate-slideInUp">
                <h3>Quick Links</h3>
                <ul class="footer-links">
                    <li><a href="#" class="menu-link" data-section="home">Home</a></li>
                    <li><a href="#" class="menu-link" data-section="about">About Us</a></li>
                    <li><a href="#" class="menu-link" data-section="services">Services</a></li>
                    <li><a href="#" class="menu-link" data-section="contact">Contact Us</a></li>
                    <li><a href="#" class="menu-link" data-section="booking">Booking</a></li>
                </ul>
            </div>
            <div class="footer-section animate-slideInRight">
                <h3>Contact Details</h3>
                <p><strong>WhatsApp:</strong> <a href="https://wa.me/919496183897" target="_blank">+91 9496 183 897</a></p>
                <p><strong>Email:</strong> <a href="mailto:jaleeladimaly@gmail.com">jaleeladimaly@gmail.com</a></p>
                <p><strong>Location:</strong> Idukki District, Kerala</p>
                <p><strong>Website:</strong> getidukki.com</p>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2026 Brilliant Web Solutions. All rights reserved. | <a href="#" style="color: #cbd5e1;">Privacy Policy</a> | <a href="#" style="color: #cbd5e1;">Terms & Conditions</a></p>
            <p style="margin-top: 15px;">Professional Drone Photography & Tourism Services | Licensed | Certified | Trusted</p>
        </div>
    </footer>

    <!-- ==================== JAVASCRIPT ==================== -->
    <script>
        // Carousel functionality
        let currentSlide = 0;
        const slides = document.querySelectorAll('.carousel-slide');
        const dots = document.querySelectorAll('.carousel-dot');

        // Auto-rotate carousel every 5 seconds
        setInterval(() => {
            currentSlide = (currentSlide + 1) % slides.length;
            updateCarousel();
        }, 5000);

        function changeSlide(n) {
            currentSlide = n;
            updateCarousel();
        }

        function updateCarousel() {
            slides.forEach(slide => slide.classList.remove('active'));
            dots.forEach(dot => dot.classList.remove('active'));
            slides[currentSlide].classList.add('active');
            dots[currentSlide].classList.add('active');
        }

        // Navigation functionality
        const menuLinks = document.querySelectorAll('.menu-link');
        menuLinks.forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                const sectionId = link.getAttribute('data-section');
                showSection(sectionId);
                closeMobileMenu();
            });
        });

        function showSection(sectionId) {
            const sections = document.querySelectorAll('.section');
            sections.forEach(section => section.classList.remove('active'));
            document.getElementById(sectionId).classList.add('active');
            window.scrollTo(0, 0);
        }

        // Mobile menu toggle
        function toggleMobileMenu() {
            const menu = document.getElementById('mobileMenu');
            menu.classList.toggle('active');
        }

        function closeMobileMenu() {
            document.getElementById('mobileMenu').classList.remove('active');
        }

        // Contact form submission
        document.getElementById('contactForm').addEventListener('submit', (e) => {
            e.preventDefault();
            const name = document.getElementById('contactName').value;
            const phone = document.getElementById('contactPhone').value;
            const email = document.getElementById('contactEmail').value;
            const message = document.getElementById('contactMessage').value;

            const whatsappMessage = `Hello Get Idukki!\n\nI would like to inquire about your drone photography services.\n\nName: ${name}\nPhone: ${phone}\nEmail: ${email}\n\nMessage: ${message}`;
            const encodedMessage = encodeURIComponent(whatsappMessage);
            window.open(`https://wa.me/919496183897?text=${encodedMessage}`, '_blank');

            document.getElementById('contactForm').reset();
            alert('Thank you! Your inquiry has been sent to our WhatsApp. We will respond within 2 hours!');
        });

        // Booking form submission
        document.getElementById('bookingForm').addEventListener('submit', (e) => {
            e.preventDefault();

            const name = document.getElementById('bookName').value;
            const email = document.getElementById('bookEmail').value;
            const phone1 = document.getElementById('bookPhone1').value;
            const phone2 = document.getElementById('bookPhone2').value;
            const droneShots = document.getElementById('droneShots').value;
            const location = document.getElementById('location').value;
            const arrivalDate = document.getElementById('arrivalDate').value;
            const arrivalTime = document.getElementById('arrivalTime').value;
            const paymentMethod = document.getElementById('paymentMethod').value;
            const tourGuide = document.getElementById('tourGuide').value;
            const roomBooking = document.getElementById('roomBooking').value;
            const additionalReq = document.getElementById('additionalRequirements').value;

            if (!name || !email || !phone1 || !droneShots || !location || !arrivalDate || !arrivalTime || !paymentMethod || !tourGuide || !roomBooking) {
                alert('Please fill in all required fields (marked with *)');
                return;
            }

            const whatsappMessage = `*🚁 NEW BOOKING REQUEST - GET IDUKKI 🚁*\n\n` +
                `*PERSONAL DETAILS*\n` +
                `Name: ${name}\n` +
                `Email: ${email}\n` +
                `Primary Phone: ${phone1}\n` +
                `Secondary Phone: ${phone2 || 'Not Provided'}\n\n` +
                `*SERVICE DETAILS*\n` +
                `Number of Drone Videos: ${droneShots}\n` +
                `Preferred Location: ${location}\n` +
                `Arrival Date: ${arrivalDate}\n` +
                `Arrival Time: ${arrivalTime}\n\n` +
                `*PREFERENCES*\n` +
                `Payment Method: ${paymentMethod}\n` +
                `Tour Guide Required: ${tourGuide}\n` +
                `Room Booking Required: ${roomBooking}\n\n` +
                `*ADDITIONAL REQUIREMENTS*\n` +
                `${additionalReq || 'No additional requirements'}\n\n` +
                `Please confirm availability and provide booking confirmation details.`;

            const encodedMessage = encodeURIComponent(whatsappMessage);
            
            document.getElementById('bookingForm').reset();
            
            const modal = document.getElementById('successModal');
            document.getElementById('successMessage').textContent = 
                `Your booking request has been submitted successfully!\n\nOur team will contact you at ${phone1} via WhatsApp within 2 hours to confirm your booking and discuss payment options.`;
            modal.classList.add('active');

            setTimeout(() => {
                window.open(`https://wa.me/919496183897?text=${encodedMessage}`, '_blank');
            }, 1000);
        });

        function closeModal() {
            document.getElementById('successModal').classList.remove('active');
        }

        window.addEventListener('click', (e) => {
            const modal = document.getElementById('successModal');
            if (e.target === modal) {
                closeModal();
            }
        });

        // Initialize carousel
        updateCarousel();
    </script>
    
    <!-- Placeholder Content -->
    <div class="content">
        
    </div>

    <!-- THE TOAST NOTIFICATION CONTAINER -->
    <div id="toast">
        <div class="toast-header">Brilliant Web Solution Team</div>
        <div class="toast-body">
            Restricted this feature.<br>
            For more enquiry and website solutions.
        </div>
        <div class="toast-footer">
            India | Dubai | UAE <br>
            <span style="margin-top:5px; display:inline-block;">📞 +91 7510366669</span>
        </div>
    </div>

    <script>
        // JavaScript Logic
        document.addEventListener('contextmenu', function(event) {
            // 1. Prevent the default browser context menu
            event.preventDefault();

            // 2. Select the toast element
            var toast = document.getElementById("toast");

            // 3. Add the 'show' class to trigger CSS animation
            toast.className = "show";

            // 4. Remove the 'show' class automatically after 4 seconds (Smooth Fade Out)
            setTimeout(function(){ 
                toast.className = toast.className.replace("show", ""); 
            }, 4000);
        });
    </script>

    
</body>
</html>