<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Kadamba Export | Global Trade Excellence</title>
    
    <link rel="icon" type="image/png" href="icon.png">
    
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <style>
        /* --- 1. RESET & CORE --- */
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
        html, body { 
            width: 100%; 
            overflow-x: hidden; 
            background: #fdfdfd; 
            color: #333; 
            -webkit-text-size-adjust: 100%;
        }

        /* --- 2. NAVIGATION --- */
        nav {
            position: fixed; width: 100%; top: 0; left: 0;
            padding: 15px 5%; display: flex; justify-content: space-between;
            align-items: center; z-index: 2000; transition: 0.4s;
            background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        nav.scrolled {
            background: rgba(255, 255, 255, 0.95);
            padding: 10px 5%;
            box-shadow: 0 2px 20px rgba(0,0,0,0.1);
            border-bottom: 1px solid rgba(27, 143, 77, 0.2);
        }
        .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
        .logo img { height: 30px; width: auto; }
        .logo span { font-size: 20px; font-weight: 700; color: #1b8f4d; letter-spacing: 1px; }
        
        nav ul { display: flex; list-style: none; gap: 20px; }
        nav ul li a { text-decoration: none; color: #333; font-weight: 500; font-size: 14px; transition: 0.3s; }
        nav ul li a:hover { color: #1b8f4d; }

        /* --- 3. SEARCH BAR --- */
        #searchWrapper {
            position: absolute; top: 110px; left: 50%;
            transform: translateX(-50%); z-index: 2500;
            width: 90%; max-width: 450px;
        }
        .search-box {
            display: flex; background: white; padding: 4px; 
            border-radius: 50px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border: 1px solid #eee; transition: 0.4s ease;
        }
        .search-box:focus-within { border-color: #1b8f4d; transform: scale(1.02); }
        .search-box input { border: none; outline: none; flex: 1; padding: 10px 15px; font-size: 14px; background: transparent; width: 100%; }
        .search-box button { 
            background: #1b8f4d; color: white; border: none; 
            padding: 10px 22px; border-radius: 50px; cursor: pointer; font-weight: 600;
        }

        /* --- 4. HERO SLIDER --- */
        .hero-container { width: 100%; height: 70vh; position: relative; overflow: hidden; background: #000; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
        .hero-container img {
            position: absolute; width: 100%; height: 100%; object-fit: cover;
            opacity: 0; animation: fade 12s infinite;
        }
        .hero-container img:nth-child(1) { animation-delay: 0s; }
        .hero-container img:nth-child(2) { animation-delay: 4s; }
        .hero-container img:nth-child(3) { animation-delay: 8s; }

        @keyframes fade { 0%, 100% { opacity: 0; } 10%, 40% { opacity: 1; } 50% { opacity: 0; } }

        /* --- 5. TYPING SECTION --- */
        .typing-section { padding: 80px 20px; text-align: center; background: white; }
        .typing-section h1 { font-size: clamp(26px, 6vw, 46px); color: #2c3e50; font-weight: 700; }
        .typing { color: #1b8f4d; border-right: 3px solid #1b8f4d; padding-right: 5px; }

        /* --- 6. UNIVERSAL RESPONSIVENESS (PORTRAIT) --- */
        @media (max-width: 768px) {
            nav { padding: 10px 5%; }
            nav ul { display: none; } /* Clean look for mobile */
            .hero-container { height: 50vh; }
            #searchWrapper { top: 90px; }
            .logo span { font-size: 18px; }
        }

        /* --- 7. LANDSCAPE MODE FIXES (HORIZONTAL) --- */
        @media (max-height: 500px) and (orientation: landscape) {
            .hero-container { height: 80vh; } /* Give more room in landscape */
            #searchWrapper { top: 70px; }
            .typing-section { padding: 40px 20px; }
            .typing-section h1 { font-size: 24px; }
            nav { padding: 5px 5%; }
        }
    </style>
</head>
<body>

    <nav id="navbar">
        <a href="#" class="logo">
            <img src="logo.png" alt=""> <span>KADAMBA</span>
        </a>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

    <div id="searchWrapper">
        <div class="search-box">
            <input type="text" placeholder="Track shipment ID...">
            <button>Search</button>
        </div>
    </div>

    <div class="hero-container">
        <img src="img1.jpg" alt="Slide 1">
        <img src="img2.jpg" alt="Slide 2">
        <img src="img3.jpg" alt="Slide 3">
    </div>

    <section class="typing-section">
        <h1>We Export <span class="typing"></span></h1>
    </section>

    <script>
        // Navbar scroll logic
        window.onscroll = function() {
            var nav = document.getElementById('navbar');
            if (window.pageYOffset > 50) {
                nav.classList.add("scrolled");
            } else {
                nav.classList.remove("scrolled");
            }
        };

        // Typing Effect logic
        const textElement = document.querySelector(".typing");
        const words = ["Quality", "Trust", "Excellence", "Worldwide"];
        let wordIndex = 0;
        let charIndex = 0;
        let isDeleting = false;

        function typeEffect() {
            const currentWord = words[wordIndex];
            
            if (isDeleting) {
                textElement.textContent = currentWord.substring(0, charIndex - 1);
                charIndex--;
            } else {
                textElement.textContent = currentWord.substring(0, charIndex + 1);
                charIndex++;
            }

            let typeSpeed = isDeleting ? 100 : 200;

            if (!isDeleting && charIndex === currentWord.length) {
                typeSpeed = 2000; // Pause at end of word
                isDeleting = true;
            } else if (isDeleting && charIndex === 0) {
                isDeleting = false;
                wordIndex = (wordIndex + 1) % words.length;
                typeSpeed = 500;
            }

            setTimeout(typeEffect, typeSpeed);
        }

        // Start effect on load
        document.addEventListener("DOMContentLoaded", typeEffect);
    </script>
</body>
</html>