<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ICPC BUBT - Home -  ICPC Asia Dhaka Regional Contest
        2025</title>

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: "#6366f1",
                        secondary: "#8b5cf6",
                        accent: "#06b6d4",
                        success: "#10b981",
                        warning: "#f59e0b",
                        danger: "#ee4a34",
                        dark: "#0f172a",
                        light: "#f8fafc",
                    },
                    animation: {
                        float: "float 6s ease-in-out infinite",
                        "pulse-slow": "pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite",
                        "bounce-slow": "bounce 3s infinite",
                    },
                    keyframes: {
                        float: {
                            "0%, 100%": {
                                transform: "translateY(0px)"
                            },
                            "50%": {
                                transform: "translateY(-20px)"
                            },
                        },
                    },
                },
            },
        };
    </script>

    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
        rel="stylesheet">

    <!-- Custom Styles -->
    <style>
        body {
            font-family: "Inter", sans-serif;
        }

        .gradient-text {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .glass-effect {
            backdrop-filter: blur(16px);
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .card-hover {
            transition: all 0.3s ease;
        }

        .card-hover:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }

        .nav-link {
            position: relative;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            transition: width 0.3s ease;
        }

        .nav-link:hover::after,
        .nav-link.active::after {
            width: 100%;
        }

        /* Partner Logo Styles */
        .partner-logo {
            transition: all 0.3s ease;
            filter: grayscale(20%);
        }

        .partner-logo:hover {
            filter: grayscale(0%);
            transform: scale(1.05);
        }

        /* Mobile Partner Logos */
        .mobile-partner-logos {
            display: none !important;
        }

        .mobile-partner-logos img {
            transition: opacity 0.3s ease;
        }

        .mobile-partner-logos img:hover {
            opacity: 1 !important;
        }

        /* Top Header Styles */
        .top-header {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            border-bottom: 1px solid #e2e8f0;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 60;
            width: 100%;
        }

        .top-header-logo {
            transition: all 0.3s ease;
            filter: grayscale(30%);
        }

        .top-header-logo:hover {
            filter: grayscale(0%);
            transform: translateY(-2px);
        }

        /* Main Navigation Styles */
        .main-nav {
            position: fixed;
            top: 46px;
            left: 0;
            right: 0;
            z-index: 50;
            width: 100%;
        }

        /* Adjust body padding for fixed navigation with top header */
        body {
            padding-top: 106px;
            /* 46px top header + 60px nav height */
        }

        @media (max-width: 768px) {
            body {
                padding-top: 70px;
                /* Slightly more padding for mobile nav */
            }

            .top-header {
                display: none;
                /* Hide top header on mobile to save space */
            }

            .main-nav {
                top: 0 !important;
                /* Reset nav position on mobile */
                height: 70px;
                /* Increase height for better mobile UX */
            }

            .main-nav .h-20 {
                height: 70px;
                /* Override height class */
            }

            /* Mobile logo adjustments */
            .main-nav img {
                height: 35px !important;
                /* Smaller logos for mobile */
            }

            /* Mobile hamburger button */
            #mobile-menu-btn {
                padding: 8px;
                border-radius: 6px;
                background: rgba(99, 102, 241, 0.1);
            }

            #mobile-menu-btn:hover {
                background: rgba(99, 102, 241, 0.2);
            }

            /* Mobile menu improvements */
            #mobile-menu {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            }

            .mobile-dropdown-content {
                background: rgba(249, 250, 251, 0.8);
                border-radius: 8px;
                margin-top: 8px;
                padding: 8px;
            }

            /* Better mobile text sizing */
            .mobile-dropdown-btn {
                font-size: 16px;
                padding: 12px 0;
            }

            .mobile-partner-logos {
                background: rgba(99, 102, 241, 0.05);
                border-radius: 12px;
                margin: 0 -8px;
            }
        }

        /* Additional mobile-specific styles */
        @media (max-width: 480px) {
            .main-nav img {
                height: 30px !important;
                /* Even smaller for very small screens */
            }

            .main-nav .mr-2 {
                margin-right: 8px !important;
            }
        }
    </style>



    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=AW-983949330"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());

        gtag('config', 'AW-983949330');
    </script>

    <!-- Google Tag Manager -->
    <script>
        (function(w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start': new Date().getTime(),
                event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0],
                j = d.createElement(s),
                dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src =
                'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-KXJ9KFB');
    </script>
    <!-- End Google Tag Manager -->

    <!-- Meta Pixel Code -->
    <script>
        ! function(f, b, e, v, n, t, s) {
            if (f.fbq) return;
            n = f.fbq = function() {
                n.callMethod ?
                    n.callMethod.apply(n, arguments) : n.queue.push(arguments)
            };
            if (!f._fbq) f._fbq = n;
            n.push = n;
            n.loaded = !0;
            n.version = '2.0';
            n.queue = [];
            t = b.createElement(e);
            t.async = !0;
            t.src = v;
            s = b.getElementsByTagName(e)[0];
            s.parentNode.insertBefore(t, s)
        }(window, document, 'script',
            'https://connect.facebook.net/en_US/fbevents.js');
        fbq('init', '206904778335402');
        fbq('track', 'PageView');
    </script>
    <noscript><img height="1" width="1" style="display:none"
            src="https://www.facebook.com/tr?id=206904778335402&ev=PageView&noscript=1" /></noscript>
    <!-- End Meta Pixel Code -->


</head>

<body class="bg-gray-50 overflow-x-hidden">
    <!-- Top Header with Partner Logos -->
    <div class="top-header py-3">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between">
                <!-- Left Side - Support Text -->
                <div class="hidden md:flex items-center space-x-2">
                    <i class="fas fa-handshake text-gray-600 text-sm"></i>
                    <span class="text-gray-600 text-sm font-medium">Supported by</span>
                </div>

                <!-- Center - Partner Logos -->
                <div class="flex items-center justify-center space-x-6 md:space-x-8 flex-1 md:flex-initial">
                    <!-- Bangladesh Computer Council -->
                    <div class="flex items-center">
                        <img src="assets/img/bcc_logo.png" alt="Bangladesh Computer Council"
                            class="object-contain top-header-logo" style="height: 28px"
                            onerror="this.style.display='none'" />
                    </div>

                    <!-- ICT Division -->
                    <div class="flex items-center">
                        <img src="assets/img/ICT_Division.png" alt="ICT Division Bangladesh"
                            class="object-contain top-header-logo" style="height: 28px"
                            onerror="this.style.display='none'" />
                    </div>

                    <!-- Therap -->
                    <div class="flex items-center">
                        <img src="assets/img/sponsors/therap.png" alt="Therap" class="object-contain top-header-logo"
                            style="height: 24px" />
                    </div>

                    <!-- DSI -->
                    <div class="flex items-center">
                        <img src="assets/img/sponsors/dsi.png" alt="DSI" class="object-contain top-header-logo"
                            style="height: 24px" />
                    </div>

                    <!-- AIBL -->
                    <div class="flex items-center">
                        <img src="https://ibanking.aibl.com.bd/Content/images/aibl/aibl-logo-new.png" alt="AIBL"
                            class="object-contain top-header-logo" style="height: 24px" />
                    </div>

                    <!-- Afreen-Enterprise -->
                    <div class="flex items-center">
                        <img src="assets/img/sponsors/AFREEN-ENTERPRISE-Main-Logo.png" alt="Afreen-Enterprise"
                            class="object-contain top-header-logo" style="height: 24px" />
                    </div>

                    <!-- Aroma Tex -->
                    <div class="flex items-center">
                        <img src="assets/img/sponsors/Aroma Tex logo.jpg" alt="Aroma Tex"
                            class="object-contain top-header-logo" style="height: 24px" />
                    </div>

                    <!-- JoulesLab -->
                    <div class="flex items-center">
                        <img src="assets/img/sponsors/JoulesLab.png" alt="JoulesLab"
                            class="object-contain top-header-logo" style="height: 24px" />
                    </div>



                    <!-- JetBrains -->
                    <div class="flex items-center">
                        <img src="assets/img/jetbrains-logo.png" alt="JetBrains" class="object-contain top-header-logo"
                            style="height: 24px"
                            onerror="this.src='https://resources.jetbrains.com/storage/products/company/brand/logos/jetbrains.png'; this.onerror=null;" />
                    </div>

                    <!-- Huawei -->
                    <div class="flex items-center">
                        <img src="assets/img/huawei-logo.png" alt="Huawei" class="object-contain top-header-logo"
                            style="height: 24px"
                            onerror="this.src='https://www.huawei.com/-/media/hcomponent-header/1.0.1.20250912174936/component/img/huawei_logo.png'; this.onerror=null;" />
                    </div>
                </div>

                <!-- Right Side - Contest Info -->
                <div class="hidden md:flex items-center space-x-2">
                    <i class="fas fa-calendar-alt text-primary text-sm"></i>
                    <span class="text-gray-600 text-sm font-medium">ICPC 2025</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Navigation -->
    <nav class="main-nav glass-effect bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-20 md:h-20">
                <div class="flex items-center space-x-3 md:space-x-6">
                    <!-- Main Logos -->
                    <div class="flex items-center justify-center">
                        <a href="https://icpc.bubt.edu.bd" class="flex items-center justify-center">
                            <img src="https://icpc.bubt.edu.bd/logo.png" alt="BUBT Logo"
                                class="object-fit-cover mr-2 md:mr-4" style="height: 35px;" />
                            <img src="https://icpc.bubt.edu.bd/icpc_logo.png" alt="ICPC Logo" class="object-fit-cover"
                                style="height: 35px;" />
                        </a>
                    </div>
                </div>

                <div class="hidden md:flex items-center space-x-2">
                    <a href="https://icpc.bubt.edu.bd"
                        class="active:text-white font-medium rounded px-4 py-2 hover:text-primary transition-colors active text-primary">
                        Home
                    </a>

                    <!-- About Dropdown -->
                    <div class="relative group">
                        <button
                            class="flex items-center text-gray-700 hover:text-primary font-medium transition-colors rounded px-4 py-2">
                            About
                            <i class="fas fa-chevron-down ml-1 text-xs"></i>
                        </button>
                        <div
                            class="  absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50">
                            <a href="about.php"
                                class="block px-4 py-3 text-gray-700 hover:bg-primary hover:text-white transition-colors rounded-t-lg">About
                                ICPC</a>
                            <a href="host-university.php"
                                class="block px-4 py-3 text-gray-700 hover:bg-primary hover:text-white transition-colors">Host
                                University</a>
                            <a href="gallery.php"
                                class="block hidden px-4 py-3 text-gray-700 hover:bg-primary hover:text-white transition-colors">Previous
                                Events</a>
                            <a href="sponsors.php"
                                class="block px-4 py-3 text-gray-700 hover:bg-primary hover:text-white transition-colors">
                                Sponsors
                            </a>
                        <a href="director-report.php"
                                class="block px-4 py-3 text-gray-700 hover:bg-primary hover:text-white transition-colors  rounded-b-lg">
                            Director's Report
                        </a>
                        </div>
                    </div>

                    <!-- Contest Dropdown -->
                    <div class="relative group">
                        <button
                            class="flex items-center text-gray-700 hover:text-primary font-medium transition-colors rounded px-4 py-2">
                            Contest
                            <i class="fas fa-chevron-down ml-1 text-xs"></i>
                        </button>
                        <div
                            class="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50">
                            <a href="rules.php"
                                class="block px-4 py-3 text-gray-700 hover:bg-primary hover:text-white transition-colors rounded-t-lg">Contest
                                Rules</a>
                            <a href="schedule.php"
                                class=" hidden block px-4 py-3 text-gray-700 hover:bg-primary hover:text-white transition-colors">Schedule</a>
                            <a href="environment.php"
                                class=" block px-4 py-3 text-gray-700 hover:bg-primary hover:text-white transition-colors">Environment</a>
                            <a href="slot-distribution.php"
                                class=" block px-4 py-3 text-gray-700 hover:bg-primary hover:text-white transition-colors">Slot
                                Distribution Rules</a>

                            <a href="quota.php"
                                class=" block px-4 py-3 text-gray-700 hover:bg-primary hover:text-white transition-colors">
                                Quota Allocation
                            </a>

                            <a href="standing.php"
                                class=" block px-4 py-3 text-gray-700 hover:bg-primary hover:text-white transition-colors">
                                Preliminary Standings
                            </a>

                            <a href="onsite-teams.php"
                                class=" block px-4 py-3 text-gray-700 hover:bg-primary hover:text-white transition-colors">
                                Onsite Selected Teams
                            </a>


                            <a href="schedule.php"
                                class=" block px-4 py-3 text-gray-700 hover:bg-primary hover:text-white transition-colors">Event Schedule</a>
                                
                            <a href="problem-set.php"
                                class=" block px-4 py-3 text-gray-700 hover:bg-primary hover:text-white transition-colors rounded-b-lg">
                                Problem Set 
                            </a>
                        </div>
                    </div>

                    <!-- Registration Dropdown -->
                    <div class="relative group">
                        <button
                            class="flex items-center text-gray-700 hover:text-primary font-medium transition-colors rounded px-4 py-2">
                            Registration
                            <i class="fas fa-chevron-down ml-1 text-xs"></i>
                        </button>
                        <div
                            class=" absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50">
                            <!--<a href="registration.php"
                                class="block px-4 py-3 text-gray-700 hover:bg-primary hover:text-white transition-colors rounded-t-lg">Local
                                Registration</a>
                            <a href="registration.php#international"
                                class="block px-4 py-3 text-gray-700 hover:bg-primary hover:text-white transition-colors">International</a>-->
                            <a href="https://icpc.bubt.edu.bd/payment.php"
                                class="block px-4 py-3 text-gray-700 hover:bg-primary hover:text-white transition-colors  rounded-t-lg">Payment
                                Forms</a>
                            <a href="teams.php"
                                class="block px-4 py-3 text-gray-700 hover:bg-primary hover:text-white transition-colors ">Preliminary
                                Teams</a>
                            <a href="onsite_paid_teams.php"
                                class="block px-4 py-3 text-gray-700 hover:bg-primary hover:text-white transition-colors">
                                Onsite Teams
                            </a>
                            <a href="travel-grant-application.php"
                                class="block px-4 py-3 text-gray-700 hover:bg-primary hover:text-white transition-colors">
                                Travel Grant Download
                            </a>
                            <a href="travel-grant-list.php"
                                class="block px-4 py-3 text-gray-700 hover:bg-primary hover:text-white transition-colors">
                                Travel Grant List
                            </a>
                            <a href="confirmation-letter.php"
                                class="block px-4 py-3 text-gray-700 hover:bg-primary hover:text-white transition-colors  rounded-b-lg">
                                Confirmation Letter
                            </a>


                        </div>
                    </div>

                    <a href="resources.php"
                        class="text-gray-700 hover:text-primary font-medium transition-colors rounded px-4 py-2">
                        Resources
                    </a>

                    <!-- Vote Dropdown -->
                    <div class="relative group">
                        <button
                            class="flex items-center text-gray-700 hover:text-primary font-medium transition-colors rounded px-4 py-2">

                            Vote
                            <i class="fas fa-chevron-down ml-1 text-xs"></i>
                        </button>
                        <div
                            class="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50">
                            <a href="vote-team.php"
                                class="block px-4 py-3 text-gray-700 hover:bg-primary hover:text-white transition-colors rounded-t-lg">
                                Team Vote
                            </a>
                            <a href="leaderboard.php"
                                class="block px-4 py-3 text-gray-700 hover:bg-primary hover:text-white transition-colors rounded-b-lg">
                                Leaderboard
                            </a>
                        </div>
                    </div>

                    <a href="contact.php"
                        class="text-gray-700 hover:text-primary font-medium transition-colors rounded px-4 py-2">
                        Contact
                    </a>

                    <a href="https://icpc.bubt.edu.bd/confirmation-letter.php"
                        class="bg-gradient-to-r from-primary to-danger text-white px-6 py-2 rounded-full font-medium hover:shadow-lg transition-all">
                        Confirmation Letter
                    </a>

                </div>

                <button id="mobile-menu-btn"
                    class="md:hidden text-primary hover:text-primary-600 p-2 rounded-lg bg-primary/10 hover:bg-primary/20 transition-all">
                    <i class="fas fa-bars text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Mobile Menu -->
        <div id="mobile-menu" class="md:hidden hidden bg-white/95 backdrop-blur-lg border-t">
            <div class="px-4 py-6 space-y-4">
                <!-- Mobile Partner Logos -->
                <div
                    class="mobile-partner-logos flex items-center justify-center space-x-3 py-3 border-b border-gray-200 mb-4">
                    <img src="assets/img/bcc_logo.png" alt="Bangladesh Computer Council"
                        class="object-contain opacity-70" style="height: 22px" onerror="this.style.display='none'" />
                    <img src="assets/img/ICT_Division.png" alt="ICT Division" class="object-contain opacity-70"
                        style="height: 22px" onerror="this.style.display='none'" />
                    <img src="assets/img/jetbrains-logo.png" alt="JetBrains" class="object-contain opacity-70"
                        style="height: 18px"
                        onerror="this.src='https://resources.jetbrains.com/storage/products/company/brand/logos/jetbrains.png'; this.onerror=null;" />
                    <img src="assets/img/huawei-logo.png" alt="Huawei" class="object-contain opacity-70"
                        style="height: 18px"
                        onerror="this.src='https://www.huawei.com/-/media/hcomponent-header/1.0.1.20250912174936/component/img/huawei_logo.png'; this.onerror=null;" />
                </div>

                <a href="index.php" class="block text-primary font-medium">Home</a>

                <!-- About Mobile Dropdown -->
                <div class="mobile-dropdown">
                    <button
                        class="mobile-dropdown-btn flex items-center justify-between w-full text-gray-700 hover:text-primary font-medium">
                        About
                        <i class="fas fa-chevron-down transition-transform"></i>
                    </button>
                    <div class="  mobile-dropdown-content hidden pl-4 space-y-2 mt-2">
                        <a href="about.php" class="block hidden text-gray-600 hover:text-primary">About ICPC</a>
                        <a href="host-university.php" class="block text-gray-600 hover:text-primary">Host
                            University</a>
                        <a href="gallery.php" class="block hidden text-gray-600 hover:text-primary">Previous Events</a>
                        
                        <a href="director-report-2025.php"
                            class="block text-gray-600 hover:text-primary">
                            Director's Report
                        </a>
                    </div>
                </div>

                <!-- Contest Mobile Dropdown -->
                <div class="mobile-dropdown">
                    <button
                        class="mobile-dropdown-btn flex items-center justify-between w-full text-gray-700 hover:text-primary font-medium">
                        Contest
                        <i class="fas fa-chevron-down transition-transform"></i>
                    </button>
                    <div class=" hidden mobile-dropdown-content hidden pl-4 space-y-2 mt-2">
                        <a href="rules.php"
                            class="block text-gray-600 hover:text-primary">Contest
                            Rules</a>
                        <a href="environment.php"
                            class="block text-gray-600 hover:text-primary">Environment</a>
                        <a href="slot-distribution.php"
                            class="block text-gray-600 hover:text-primary">Slot
                            Distribution Rules</a>

                        <a href="quota.php"
                            class="block text-gray-600 hover:text-primary">Quota Allocation
                        </a>

                        <a href="standing.php"
                            class="block text-gray-600 hover:text-primary">Preliminary Standings
                        </a>

                        <a href="onsite-teams.php"
                            class="block text-gray-600 hover:text-primary">Onsite Selected Teams
                        </a>
                        
                        <a href="problem-set.php"
                            class="block text-gray-600 hover:text-primary">
                            Problem Set 
                        </a>
                    </div>
                </div>

                <!-- Registration Mobile Dropdown -->
                <div class="mobile-dropdown">
                    <button
                        class="mobile-dropdown-btn flex items-center justify-between w-full text-gray-700 hover:text-primary font-medium">
                        Registration
                        <i class="fas fa-chevron-down transition-transform"></i>
                    </button>
                    <div class="mobile-dropdown-content hidden pl-4 space-y-2 mt-2">

                        <a href="https://icpc.bubt.edu.bd/payment.php"
                            class="block text-gray-600 hover:text-primary">Payment
                            Forms</a>
                        <a href="teams.php"
                            class="block text-gray-600 hover:text-primary">Preliminary
                            Teams</a>
                        <a href="onsite_paid_teams.php"
                            class="block text-gray-600 hover:text-primary">Onsite Teams
                        </a>
                        <a href="travel-grant-application.php"
                            class="block text-gray-600 hover:text-primary">Travel Grant Application
                        </a>
                        <a href="travel-grant-list.php"
                            class="block text-gray-600 hover:text-primary">Travel Grant List
                        </a>
                        <a href="confirmation-letter.php"
                            class="block text-gray-600 hover:text-primary">Confirmation Letter
                        </a>
                    </div>
                </div>

                <!-- Resources Mobile Dropdown -->

                <a href="resources.php" class=" block text-gray-700 hover:text-primary font-medium">Resources</a>
                <a href="sponsors.php" class=" block text-gray-700 hover:text-primary font-medium">Sponsors</a>

                <!-- Vote Mobile Dropdown -->
                <div class="mobile-dropdown">
                    <button
                        class="mobile-dropdown-btn flex items-center justify-between w-full text-gray-700 hover:text-primary font-medium">
                        <span>Vote
                        </span>
                        <i class="fas fa-chevron-down transition-transform"></i>
                    </button>
                    <div class="mobile-dropdown-content hidden pl-4 space-y-2 mt-2">
                        <a href="vote-team.php" class="block text-gray-600 hover:text-primary">
                            Team Vote
                        </a>
                        <a href="leaderboard.php" class="block text-gray-600 hover:text-primary">
                            Leaderboard
                        </a>
                    </div>
                </div>

                <a href="contact.php" class="block text-gray-700 hover:text-primary font-medium">Contact</a>


                <a href="https://icpc.bubt.edu.bd/confirmation-letter.php"
                    class="bg-gradient-to-r from-primary to-danger text-white px-6 py-2 rounded-full font-medium hover:shadow-lg transition-all">
                    Confirmation Letter
                </a>
            </div>
        </div>
    </nav>
<!-- Hero Section -->
<section id="home" class="min-h-screen relative overflow-hidden bg-gradient-to-br from-primary via-secondary to-accent">
    <div class="absolute inset-0 bg-black/20"></div>
    <div class="absolute inset-0" style="
          background-image: url('icpc_web_banner_4k_bg2.jpg');
          background-size: cover;
          background-position: bottom;
          opacity: 0.6;
      "></div>

    <!-- Floating Elements -->
    <div class="absolute top-20 left-10 w-20 h-20 bg-white/10 rounded-full animate-float"></div>
    <div class="absolute top-40 right-20 w-16 h-16 bg-white/10 rounded-lg animate-bounce-slow"></div>
    <div class="absolute bottom-40 left-20 w-12 h-12 bg-white/10 rounded-full animate-pulse-slow"></div>

    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-32 pb-20">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div class="text-white">
                <div class="inline-flex items-center bg-white/20 backdrop-blur-sm rounded-full px-4 py-2 mb-6">
                    <i class="fas fa-trophy text-warning mr-2"></i>
                    <span class="text-sm font-medium">International Programming Contest</span>
                </div>
                <h1 class="text-3xl md:text-5xl font-bold mb-6 leading-tight">
                    ICPC ASIA DHAKA REGIONAL CONTEST
                    <span class="block text-4xl md:text-6xl text-danger">2025</span>
                </h1>
                <p class="text-xl md:text-2xl mb-8 text-white/90 leading-relaxed">
                    Where brilliant minds compete, innovate, and shape the future of technology through algorithmic
                    excellence.
                </p>
                <div class="flex flex-col sm:flex-row gap-4">
                    <a href="https://icpc.global/regionals/finder/Dhaka-Preliminary-2026"
                        class="bg-white text-primary px-8 py-4 rounded-full font-semibold text-lg hover:bg-gray-100 transition-all transform hover:scale-105 shadow-xl inline-block text-center">
                        <i class="fas fa-rocket mr-2"></i>
                        Register Your Team
                    </a>
                    <a href="https://www.facebook.com/reel/1389457516080097" target="_blank"
                        class="border-2 border-white text-white px-8 py-4 rounded-full font-semibold text-lg hover:bg-white hover:text-primary transition-all">
                        <i class="fas fa-credit-card mr-2"></i>
                        Payment Procedures
                    </a>
                </div>
                <div class="flex items-center space-x-8 mt-12">
                    <div class="text-center">
                        <div class="text-3xl font-bold text-danger">
                            0+</div>
                        <div class="text-white/80">Total Registrations</div>
                    </div>
                    <div class="text-center">
                        <div class="text-3xl font-bold text-danger">
                            0+</div>
                        <div class="text-white/80">Accepted Teams</div>
                    </div>
                    <div class="text-center">
                        <div class="text-3xl font-bold text-danger">
                            0+</div>
                        <div class="text-white/80">Universities</div>
                    </div>
                </div>
            </div>
            <div class="relative">
                <div class="relative z-10">
                    <img src="icpc_2025_banner.jpg" alt="ICPC Asia Dhaka Regional Contest 2025"
                        class="rounded-2xl shadow-2xl w-full h-auto" style="max-height: 600px; object-fit: contain">
                </div>
                <div
                    class="absolute -top-12 -left-12 w-72 h-72 bg-gradient-to-r from-warning to-accent rounded-full opacity-20 animate-pulse-slow">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Next Important Date Countdown Section -->
<section class="py-16 bg-gradient-to-r from-red-600 via-pink-600 to-purple-700 relative overflow-hidden">
    <div class="absolute inset-0 bg-black/30"></div>


    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div class="inline-flex items-center bg-white/20 backdrop-blur-sm rounded-full px-6 py-3 mb-6">
            <i class="fas fa-hourglass-half text-white mr-3"></i>
            <span class="text-white font-medium">Next Important Date Approaching</span>
        </div>

        <h2 class="text-4xl md:text-6xl font-bold text-white mb-4">
            Don't Miss Out!
        </h2>
        <p class="text-xl md:text-2xl text-white/90 mb-12 max-w-3xl mx-auto">
            Focus on the upcoming Preliminary Contest on November 15, 2025 starting at 03:00 PM to 07:00 PM.
            <br>
            Preliminary Mock Contest will be held on November 14, 2025 at 04:00 PM. Prepare your team for success!
        </p>

        <!-- Countdown Timer -->
        <div class="bg-white/10 backdrop-blur-lg rounded-3xl p-8 md:p-12 mb-8 border border-white/20">
            <h3 class="text-2xl md:text-3xl font-bold text-white mb-8">Time Remaining Until Preliminary Contest:</h3>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8" id="countdown-timer">
                <div class="bg-white/20 backdrop-blur-sm rounded-2xl p-4 md:p-6">
                    <div class="text-3xl md:text-5xl font-bold text-white mb-2" id="days">00</div>
                    <div class="text-white/80 font-medium">Days</div>
                </div>
                <div class="bg-white/20 backdrop-blur-sm rounded-2xl p-4 md:p-6">
                    <div class="text-3xl md:text-5xl font-bold text-white mb-2" id="hours">00</div>
                    <div class="text-white/80 font-medium">Hours</div>
                </div>
                <div class="bg-white/20 backdrop-blur-sm rounded-2xl p-4 md:p-6">
                    <div class="text-3xl md:text-5xl font-bold text-white mb-2" id="minutes">00</div>
                    <div class="text-white/80 font-medium">Minutes</div>
                </div>
                <div class="bg-white/20 backdrop-blur-sm rounded-2xl p-4 md:p-6">
                    <div class="text-3xl md:text-5xl font-bold text-white mb-2" id="seconds">00</div>
                    <div class="text-white/80 font-medium">Seconds</div>
                </div>
            </div>
        </div>

        <!-- Call to Action -->
        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">

            <a href="rules.php"
                class="border-2 border-white text-white px-8 py-4 rounded-full font-semibold text-lg hover:bg-white hover:text-red-600 transition-all inline-flex items-center">
                <i class="fas fa-book mr-2"></i>
                Read Rules
            </a>

        </div>

    </div>
</section>

<script>
    // Countdown Timer JavaScript
    function updateCountdown() {
        // Set the registration deadline date (October 30, 2025 at 03:00 PM)
        const registrationDeadline = new Date('November 15, 2025 15:00').getTime();

        function updateTimer() {
            const now = new Date().getTime();
            const timeLeft = registrationDeadline - now;

            if (timeLeft > 0) {
                const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
                const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

                document.getElementById('days').textContent = String(days).padStart(2, '0');
                document.getElementById('hours').textContent = String(hours).padStart(2, '0');
                document.getElementById('minutes').textContent = String(minutes).padStart(2, '0');
                document.getElementById('seconds').textContent = String(seconds).padStart(2, '0');
            } else {
                // Registration deadline has passed
                document.getElementById('days').textContent = '00';
                document.getElementById('hours').textContent = '00';
                document.getElementById('minutes').textContent = '00';
                document.getElementById('seconds').textContent = '00';

                // Optional: Show registration closed message
                const timerSection = document.querySelector('#countdown-timer').parentElement;
                if (timerSection) {
                    timerSection.innerHTML = `
                    <div class="text-center py-8">
                        <i class="fas fa-check-circle text-6xl text-success-300 mb-4"></i>
                        <h3 class="text-3xl font-bold text-white mb-4">
                        Contest Started
                        </h3>
                        <p class="text-xl text-white/80">
                        The Preliminary Contest has started. Best of luck to all participating teams!
                        </p>
                    </div>
                `;
                }
            }
        }

        // Update immediately and then every second
        updateTimer();
        setInterval(updateTimer, 1000);
    }

    // Initialize countdown when page loads
    document.addEventListener('DOMContentLoaded', updateCountdown);
</script>

<!-- Registration Countdown Section -->
<section class="py-16 bg-gradient-to-r from-red-600 via-pink-600 to-purple-700 relative overflow-hidden hidden">
    <div class="absolute inset-0 bg-black/30"></div>


    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div class="inline-flex items-center bg-white/20 backdrop-blur-sm rounded-full px-6 py-3 mb-6">
            <i class="fas fa-hourglass-half text-white mr-3"></i>
            <span class="text-white font-medium">Registration Deadline Approaching</span>
        </div>

        <h2 class="text-4xl md:text-6xl font-bold text-white mb-4">
            Don't Miss Out!
        </h2>
        <p class="text-xl md:text-2xl text-white/90 mb-12 max-w-3xl mx-auto">
            Time is running out to register for ICPC Asia Dhaka Regional Contest 2025. Secure your team's spot now!
        </p>

        <!-- Countdown Timer -->
        <div class="bg-white/10 backdrop-blur-lg rounded-3xl p-8 md:p-12 mb-8 border border-white/20">
            <h3 class="text-2xl md:text-3xl font-bold text-white mb-8">Registration Closes In:</h3>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8" id="countdown-timer">
                <div class="bg-white/20 backdrop-blur-sm rounded-2xl p-4 md:p-6">
                    <div class="text-3xl md:text-5xl font-bold text-white mb-2" id="days">00</div>
                    <div class="text-white/80 font-medium">Days</div>
                </div>
                <div class="bg-white/20 backdrop-blur-sm rounded-2xl p-4 md:p-6">
                    <div class="text-3xl md:text-5xl font-bold text-white mb-2" id="hours">00</div>
                    <div class="text-white/80 font-medium">Hours</div>
                </div>
                <div class="bg-white/20 backdrop-blur-sm rounded-2xl p-4 md:p-6">
                    <div class="text-3xl md:text-5xl font-bold text-white mb-2" id="minutes">00</div>
                    <div class="text-white/80 font-medium">Minutes</div>
                </div>
                <div class="bg-white/20 backdrop-blur-sm rounded-2xl p-4 md:p-6">
                    <div class="text-3xl md:text-5xl font-bold text-white mb-2" id="seconds">00</div>
                    <div class="text-white/80 font-medium">Seconds</div>
                </div>
            </div>
        </div>

        <!-- Call to Action -->
        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
            <a href="https://icpc.global/regionals/finder/Dhaka-Preliminary-2026"
                class="bg-white text-red-600 px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all transform hover:scale-105 shadow-xl inline-flex items-center">
                <i class="fas fa-rocket mr-2"></i>
                Register Now
            </a>
            <a href="https://icpc.bubt.edu.bd/payment.php"
                class="bg-secondary text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 hover:text-secondary transition-all transform hover:scale-105 shadow-xl inline-flex items-center">
                <i class="fas fa-credit-card mr-2"></i>
                Payment Now
            </a>
            <a href="rules.php"
                class="border-2 border-white text-white px-8 py-4 rounded-full font-semibold text-lg hover:bg-white hover:text-red-600 transition-all inline-flex items-center">
                <i class="fas fa-book mr-2"></i>
                Read Rules
            </a>
        </div>

    </div>
</section>

<script>
    // Countdown Timer JavaScript
    function updateCountdown2() {
        // Set the registration deadline date (October 30, 2025 at midnight)
        const registrationDeadline = new Date('November 1, 2025 23:59:59').getTime();

        function updateTimer() {
            const now = new Date().getTime();
            const timeLeft = registrationDeadline - now;

            if (timeLeft > 0) {
                const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
                const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

                document.getElementById('days').textContent = String(days).padStart(2, '0');
                document.getElementById('hours').textContent = String(hours).padStart(2, '0');
                document.getElementById('minutes').textContent = String(minutes).padStart(2, '0');
                document.getElementById('seconds').textContent = String(seconds).padStart(2, '0');
            } else {
                // Registration deadline has passed
                document.getElementById('days').textContent = '00';
                document.getElementById('hours').textContent = '00';
                document.getElementById('minutes').textContent = '00';
                document.getElementById('seconds').textContent = '00';

                // Optional: Show registration closed message
                const timerSection = document.querySelector('#countdown-timer').parentElement;
                if (timerSection) {
                    timerSection.innerHTML = `
                    <div class="text-center py-8">
                        <i class="fas fa-times-circle text-6xl text-red-300 mb-4"></i>
                        <h3 class="text-3xl font-bold text-white mb-4">Registration Closed</h3>
                        <p class="text-xl text-white/80">The registration deadline has passed. Stay tuned for future competitions!</p>
                    </div>
                `;
                }
            }
        }

        // Update immediately and then every second
        updateTimer();
        setInterval(updateTimer, 1000);
    }

    // Initialize countdown when page loads
    //document.addEventListener('DOMContentLoaded', updateCountdown2);
</script>

<!-- About Section -->
<section id="about" class="py-20 bg-white hidden">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div class="text-center mb-16">
        <div class="inline-flex items-center bg-primary/10 text-primary rounded-full px-4 py-2 mb-4">
            <i class="fas fa-info-circle mr-2"></i>
            <span class="text-sm font-medium">About the Contest</span>
        </div>
        <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
            What is <span class="gradient-text">ICPC?</span>        </h2>
    </div>

        <p class="text-xl text-gray-600 max-w-3xl mx-auto text-center mb-16">
            The premier global programming competition that brings together the brightest minds from universities
            worldwide.
        </p>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center mb-20">
            <div>
                <img src="https://images.unsplash.com/photo-1515879218367-8466d910aaa4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1469&q=80"
                    alt="Team Collaboration" class="rounded-2xl shadow-xl">
            </div>
            <div>
                <h3 class="text-3xl font-bold text-gray-900 mb-6">Collaborative Excellence</h3>
                <p class="text-lg text-gray-600 mb-8">
                    Teams of three work together to solve complex algorithmic problems under pressure, fostering
                    teamwork, creativity, and innovative problem-solving skills that are essential in today's tech
                    industry.
                </p>
                <div class="grid grid-cols-2 gap-6">
                    <div class="bg-gradient-to-br from-primary/10 to-secondary/10 p-6 rounded-xl">
                        <i class="fas fa-users text-primary text-2xl mb-3"></i>
                        <h4 class="font-semibold text-gray-900 mb-2">Team Based</h4>
                        <p class="text-gray-600 text-sm">3 members per team working collaboratively</p>
                    </div>
                    <div class="bg-gradient-to-br from-accent/10 to-success/10 p-6 rounded-xl">
                        <i class="fas fa-clock text-accent text-2xl mb-3"></i>
                        <h4 class="font-semibold text-gray-900 mb-2">Time Pressure</h4>
                        <p class="text-gray-600 text-sm">5-hour intensive coding marathon</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div
        class="bg-gradient-to-br from-primary/5 to-secondary/5 border-primary/10 p-8 rounded-2xl border border-primary/10 card-hover">
        <div class="w-16 h-16 bg-gradient-to-r from-primary to-secondary rounded-2xl flex items-center justify-center mb-6">
            <i class="fas fa-brain text-white text-2xl"></i>
        </div>
        <h3 class="text-2xl font-bold text-gray-900 mb-4">Problem Solving</h3>
        <p class="text-gray-600 mb-6">Tackle complex algorithmic challenges that test your analytical thinking and coding skills.</p>
            </div>
    <div
        class="bg-gradient-to-br from-accent/5 to-success/5 border-accent/10 p-8 rounded-2xl border border-accent/10 card-hover">
        <div class="w-16 h-16 bg-gradient-to-r from-accent to-success rounded-2xl flex items-center justify-center mb-6">
            <i class="fas fa-trophy text-white text-2xl"></i>
        </div>
        <h3 class="text-2xl font-bold text-gray-900 mb-4">Competition</h3>
        <p class="text-gray-600 mb-6">Compete against the best programming teams from universities across the region.</p>
            </div>
    <div
        class="bg-gradient-to-br from-warning/5 to-orange-500/5 border-warning/10 p-8 rounded-2xl border border-warning/10 card-hover">
        <div class="w-16 h-16 bg-gradient-to-r from-warning to-orange-500 rounded-2xl flex items-center justify-center mb-6">
            <i class="fas fa-rocket text-white text-2xl"></i>
        </div>
        <h3 class="text-2xl font-bold text-gray-900 mb-4">Innovation</h3>
        <p class="text-gray-600 mb-6">Push the boundaries of creative problem-solving and algorithmic innovation.</p>
            </div>
        </div>
    </div>
</section>

<!-- Schedule Section -->
<section id="schedule" class="py-20 bg-gradient-to-br from-gray-50 to-blue-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
        <div class="inline-flex items-center bg-secondary/10 text-secondary rounded-full px-4 py-2 mb-4">
            <i class="fas fa-calendar-alt mr-2"></i>
            <span class="text-sm font-medium">Contest Timeline</span>
        </div>
        <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
            Event <span class="gradient-text">Schedule</span>        </h2>
    </div>

        <p class="text-xl text-gray-600 text-center mb-16">Mark your calendars for these important dates</p>

        <!-- Mobile Timeline -->
        <div class="lg:hidden space-y-6">
                <div class="flex items-start space-x-4">
        <div class="flex-shrink-0">
            <div
                class="w-12 h-12 bg-gradient-to-r from-primary to-secondary rounded-full flex items-center justify-center">
                <i class="fas fa-door-open text-white"></i>
            </div>
        </div>
        <div class="flex-1 bg-white p-4 rounded-xl shadow-lg card-hover">
            <h3 class="text-lg font-bold mb-2 text-gray-900">Registration Opens</h3>
            <p class="text-gray-600 mb-3 text-sm">Team registration and preliminary requirements submission</p>
            <div class="text-primary font-semibold text-sm">October 01, 2025</div>
        </div>
    </div>
    <div class="flex items-start space-x-4">
        <div class="flex-shrink-0">
            <div
                class="w-12 h-12 bg-gradient-to-r from-warning to-orange-500 rounded-full flex items-center justify-center">
                <i class="fas fa-users text-white"></i>
            </div>
        </div>
        <div class="flex-1 bg-white p-4 rounded-xl shadow-lg card-hover">
            <h3 class="text-lg font-bold mb-2 text-gray-900">Team Formation Deadline</h3>
            <p class="text-gray-600 mb-3 text-sm">Final date for team registration and fee payment</p>
            <div class="text-accent font-semibold text-sm">October 30, 2025</div>
        </div>
    </div>
    <div class="flex items-start space-x-4">
        <div class="flex-shrink-0">
            <div
                class="w-12 h-12 bg-gradient-to-r from-warning to-orange-500 rounded-full flex items-center justify-center">
                <i class="fas fa-code text-white"></i>
            </div>
        </div>
        <div class="flex-1 bg-gradient-to-br from-warning to-orange-500 text-white p-4 rounded-xl shadow-lg card-hover">
            <h3 class="text-lg font-bold mb-2 text-white">Preliminary Mock Contest</h3>
            <p class="text-white/90 mb-3 text-sm">Preliminary Mock Contest start at 4:00 PM</p>
            <div class="text-white font-semibold text-sm">November 14, 2025</div>
        </div>
    </div>
    <div class="flex items-start space-x-4">
        <div class="flex-shrink-0">
            <div
                class="w-12 h-12 bg-gradient-to-r from-primary to-secondary rounded-full flex items-center justify-center">
                <i class="fas fa-code text-white"></i>
            </div>
        </div>
        <div class="flex-1 bg-gradient-to-br from-primary to-secondary text-white p-4 rounded-xl shadow-lg card-hover">
            <h3 class="text-lg font-bold mb-2 text-white">Preliminary Contest</h3>
            <p class="text-white/90 mb-3 text-sm">Preliminary Contest start at 3:00 PM - 7:00 PM</p>
            <div class="text-white font-semibold text-sm">November 15, 2025</div>
        </div>
    </div>
    <div class="flex items-start space-x-4">
        <div class="flex-shrink-0">
            <div
                class="w-12 h-12 bg-gradient-to-r from-success to-green-600 rounded-full flex items-center justify-center">
                <i class="fas fa-code text-white"></i>
            </div>
        </div>
        <div class="flex-1 bg-white p-4 rounded-xl shadow-lg card-hover">
            <h3 class="text-lg font-bold mb-2 text-gray-900">Onsite Mock Contest</h3>
            <p class="text-gray-600 mb-3 text-sm">Onsite Mock  contest held on venue</p>
            <div class="text-success font-semibold text-sm">December 19, 2025</div>
        </div>
    </div>
    <div class="flex items-start space-x-4">
        <div class="flex-shrink-0">
            <div
                class="w-12 h-12 bg-gradient-to-r from-success to-green-600 rounded-full flex items-center justify-center">
                <i class="fas fa-trophy text-white"></i>
            </div>
        </div>
        <div class="flex-1 bg-white p-4 rounded-xl shadow-lg card-hover">
            <h3 class="text-lg font-bold mb-2 text-gray-900">Onsite Final Contest</h3>
            <p class="text-gray-600 mb-3 text-sm">Final round of the contest held onsite</p>
            <div class="text-success font-semibold text-sm">December 20, 2025</div>
        </div>
    </div>
        </div>

        <!-- Desktop Timeline -->
        <div class="hidden lg:block relative">
            <div
                class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-primary to-accent rounded-full">
            </div>
            <div class="space-y-12">
                <!-- Timeline items for desktop -->
                <div class="flex items-center justify-between">
                    <div class="w-5/12 text-right pr-8">
                        <div class="bg-white p-6 rounded-2xl shadow-lg card-hover">
                            <h3 class="text-xl font-bold text-gray-900 mb-2">Registration Opens</h3>
                            <p class="text-gray-600 mb-4">Team registration and preliminary requirements submission</p>
                            <div class="text-primary font-semibold">October 01, 2025</div>
                        </div>
                    </div>
                    <div
                        class="w-12 h-12 bg-gradient-to-r from-primary to-secondary rounded-full flex items-center justify-center relative z-10">
                        <i class="fas fa-door-open text-white"></i>
                    </div>
                    <div class="w-5/12"></div>
                </div>

                <div class="flex items-center justify-between">
                    <div class="w-5/12"></div>
                    <div
                        class="w-12 h-12 bg-gradient-to-r from-accent to-success rounded-full flex items-center justify-center relative z-10">
                        <i class="fas fa-users text-white"></i>
                    </div>
                    <div class="w-5/12 pl-8">
                        <div class="bg-white p-6 rounded-2xl shadow-lg card-hover">
                            <h3 class="text-xl font-bold text-gray-900 mb-2">Registration Deadline</h3>
                            <p class="text-gray-600 mb-4">Final date for team registration and fee payment</p>
                            <div class="text-accent font-semibold">October 30, 2025</div>
                        </div>
                    </div>
                </div>

                <div class="flex items-center justify-between">
                    <div class="w-5/12 text-right pr-8">
                        <div class="bg-white p-6 rounded-2xl shadow-lg text-white card-hover">
                            <h3 class="text-xl font-bold text-gray-900 mb-2">Preliminary Mock Contest</h3>
                            <p class="text-gray-600 mb-4">
                                Mock session starts at 4:00 PM
                            </p>
                            <div class="text-success font-semibold">November 14, 2025</div>
                        </div>
                    </div>
                    <div
                        class="w-12 h-12 bg-gradient-to-r from-success to-green-500 rounded-full flex items-center justify-center relative z-10">
                        <i class="fas fa-code text-white"></i>
                    </div>
                    <div class="w-5/12"></div>
                </div>

                <div class="flex items-center justify-between">
                    <div class="w-5/12"></div>
                    <div
                        class="w-12 h-12 bg-gradient-to-r from-warning to-orange-600 rounded-full flex items-center justify-center relative z-10">
                        <i class="fas fa-code text-white"></i>
                    </div>
                    <div class="w-5/12 pl-8">
                        <div class="bg-gradient-to-r from-warning to-orange-600 p-6 rounded-2xl shadow-lg card-hover">
                            <h3 class="text-xl font-bold text-white mb-2">Preliminary Contest</h3>
                            <p class="text-white/90 mb-4">
                                Preliminary Contest starts at 3:00 PM-7:00 PM
                            </p>
                            <div class="text-white font-semibold">November 15, 2025</div>
                        </div>
                    </div>
                </div>

                <div class="flex items-center justify-between">
                    <div class="w-5/12 text-right pr-8">
                        <div class="bg-white p-6 rounded-2xl shadow-lg text-white card-hover">
                            <h3 class="text-xl font-bold text-gray-900 mb-2">Onsite Mock Contest</h3>
                            <p class="text-gray-600 mb-4">
                                Onsite Mock contest will be held on venue
                            </p>
                            <div class="text-primary font-semibold">December 19, 2025</div>
                        </div>
                    </div>
                    <div
                        class="w-12 h-12 bg-gradient-to-r from-primary to-blue-500 rounded-full flex items-center justify-center relative z-10">
                        <i class="fas fa-code text-white"></i>
                    </div>
                    <div class="w-5/12"></div>
                </div>

                <div class="flex items-center justify-between">
                    <div class="w-5/12"></div>
                    <div
                        class="w-12 h-12 bg-gradient-to-r from-success to-green-600 rounded-full flex items-center justify-center relative z-10">
                        <i class="fas fa-trophy text-white"></i>
                    </div>
                    <div class="w-5/12 pl-8">
                        <div class="bg-gradient-to-r from-success to-green-600 p-6 rounded-2xl shadow-lg card-hover">
                            <h3 class="text-xl font-bold text-white mb-2">Onsite Contest</h3>
                            <p class="text-white/90 mb-4">
                                Onsite Final Contest will be held on venue
                            </p>
                            <div class="text-white font-semibold">December 20, 2025</div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
</section>

<!-- Previous ICPC Events Section -->
<section class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
                ICPC at <span class="gradient-text">BUBT</span>
            </h2>
            <p class="text-xl text-gray-600">
                Successful ICPC contests hosted by BUBT
            </p>
        </div>


        <div class="grid grid-cols-1 md:grid-cols-1 gap-8 mb-6 mx-10">
            <div class="rounded-2xl text-white card-hover">
                <img src="https://icpc.bubt.edu.bd/icpc_2025_banner.jpg" alt="ICPC 2025"
                    class="w-full h-85 object-fit rounded-t-xl">
                <div class="bg-gradient-to-br from-primary to-secondary p-8 rounded-b-xl">
                    <h3 class="text-2xl font-bold mb-4">
                        ICPC Asia Dhaka Regional Contest 2025
                    </h3>
                    <p class="text-white/90 mb-6">
                        The Asia Dhaka regional phase of the two-day international collegiate programming contest will
                        be held at Bangladesh University of Business and Technology (BUBT). The event will begin with an
                        inauguration ceremony on Friday afternoon and conclude on Saturday with the final competition,
                        cultural activities, and prize distribution.
                    </p>

                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="rounded-2xl text-white card-hover">
                <img src="https://icpc.bubt.edu.bd/assets/img/BUBT_ICPC_2023.png" alt="ICPC 2023"
                    class="w-full h-80 object-fit rounded-t-xl">
                <div class="bg-gradient-to-br from-primary to-secondary p-8 rounded-b-xl">
                    <h3 class="text-2xl font-bold mb-4">
                        ICPC Asia Dhaka Regional Contest 2023
                    </h3>
                    <p class="text-white/90 mb-6">
                        The Asia Dhaka regional phase of the two-day international collegiate programming contest was
                        held at Bangladesh University of Business and Technology (BUBT). The event began with an
                        inauguration ceremony on Friday afternoon and concluded on Saturday with the final competition,
                        cultural activities, and prize distribution.
                    </p>
                    <div class="bg-white/20 p-4 rounded-xl  ">
                        <h4 class="font-bold mb-2">Top Winners:</h4>
                        <ul class="text-white/90 text-sm space-y-1">
                            <li>🥇 DU_NotStrongEnough (Dhaka University)</li>
                            <li>🥈 BUET Potatoes (BUET)</li>
                            <li>🥉 JU_kzvd4729 (Jahangirnagar University)</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="rounded-2xl text-white card-hover">
                <img src="https://icpc.bubt.edu.bd/assets/img/bubt-icpc-logo.jpg" alt="ICPC 2021"
                    class="w-full h-80 object-fit rounded-t-xl">
                <div class="bg-gradient-to-br from-primary to-secondary p-8 rounded-b-xl">
                    <h3 class="text-2xl font-bold mb-4">
                        ICPC Asia Dhaka Regional Contest 2021
                    </h3>
                    <p class="text-white/90 mb-6">
                        The Asia Dhaka regional phase of the two-day international collegiate programming contest was
                        held
                        at Bangladesh University of Business and Technology (BUBT). The event began with an inauguration
                        ceremony on Friday afternoon and concluded on Saturday with the final competition, cultural
                        activities, and prize distribution.
                    </p>
                    <div class="bg-white/20 p-4 rounded-xl  ">
                        <h4 class="font-bold mb-2">Top Winners:</h4>
                        <ul class="text-white/90 text-sm space-y-1">
                            <li>🥇 DU_NotStrongEnough (Dhaka University)</li>
                            <li>🥈 BUET Potatoes (BUET)</li>
                            <li>🥉 JU_kzvd4729 (Jahangirnagar University)</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="rounded-2xl text-white card-hover">
                <img src="https://icpc.bubt.edu.bd/2014/images/trophy.gif" alt="ICPC 2023"
                    class="w-full h-80 object-fit rounded-t-xl">
                <div class="bg-gradient-to-br from-primary to-secondary p-8 rounded-b-xl">
                    <h3 class="text-2xl font-bold mb-4">
                        ACM-ICPC Asia Regional Dhaka Site Event - 2014
                    </h3>
                    <p class="text-white/90 mb-6">
                        ACM International Collegiate Programming Contest (ACM-ICPC) is an annual multi-tiered
                        competition
                        among the universities of the world. BUBT had the honor of hosting ACM-ICPC Dhaka Site Event in
                        2014. The event was highly successful, receiving praise from everyone.
                    </p>
                    <div class="bg-white/20 p-4 rounded-xl  ">
                        <h4 class="font-bold mb-2">Top Winners:</h4>
                        <ul class="text-white/90 text-sm space-y-1">
                            <li>🥇 SUST_DownToTheWire (Shahjalal University of Science and Technology (SUST))</li>
                            <li>🥈 3e8nm (National Taiwan University)</li>
                            <li>🥉 SUST_Attoprottoyee v2.0 (Shahjalal University of Science and Technology (SUST))</li>
                        </ul>
                    </div>
                </div>
            </div>


        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="py-20 bg-gradient-to-r from-primary to-secondary text-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-4xl md:text-5xl font-bold mb-6">Ready to Compete?</h2>
        <p class="text-xl text-white/90 max-w-3xl mx-auto mb-8">
            Register your team now and be part of the most exciting programming contest of 2025
        </p>
        <a href="https://icpc.global/regionals/finder/Dhaka-Preliminary-2026"
            class="bg-white text-primary px-8 py-4 rounded-full font-semibold text-lg hover:bg-gray-100 transition-all inline-block">
            <i class="fas fa-rocket mr-2"></i>
            Register Your Team
        </a>
    </div>
</section>

<!-- Contact Section -->
<section id="contact" class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
        <div class="inline-flex items-center bg-accent/10 text-accent rounded-full px-4 py-2 mb-4">
            <i class="fas fa-envelope mr-2"></i>
            <span class="text-sm font-medium">Get in Touch</span>
        </div>
        <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
            Contact <span class="gradient-text">Us</span>        </h2>
    </div>

        <p class="text-xl text-gray-600 text-center mb-16">Have questions? Our organizing committee is here to help</p>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <div class="text-center p-8 bg-gradient-to-br from-primary/5 to-secondary/5 rounded-2xl card-hover">
        <div
            class="w-16 h-16 bg-gradient-to-r from-primary to-secondary rounded-2xl flex items-center justify-center mx-auto mb-6">
            <i class="fas fa-map-marker-alt text-white text-2xl"></i>
        </div>
        <h3 class="text-2xl font-bold text-gray-900 mb-4">Visit Us</h3>
        <div class="text-gray-600">Bangladesh University of Business and Technology<br>Mirpur-2, Dhaka-1216<br>Bangladesh</div>
    </div>
    <div class="text-center p-8 bg-gradient-to-br from-accent/5 to-success/5 rounded-2xl card-hover">
        <div
            class="w-16 h-16 bg-gradient-to-r from-accent to-success rounded-2xl flex items-center justify-center mx-auto mb-6">
            <i class="fas fa-envelope text-white text-2xl"></i>
        </div>
        <h3 class="text-2xl font-bold text-gray-900 mb-4">Email Us</h3>
        <div class="text-gray-600">icpc@bubt.edu.bd</div>
    </div>
    <div class="text-center p-8 bg-gradient-to-br from-warning/5 to-orange-500/5 rounded-2xl card-hover">
        <div
            class="w-16 h-16 bg-gradient-to-r from-warning to-orange-500 rounded-2xl flex items-center justify-center mx-auto mb-6">
            <i class="fas fa-phone text-white text-2xl"></i>
        </div>
        <h3 class="text-2xl font-bold text-gray-900 mb-4">Call Us</h3>
        <div class="text-gray-600">01932-087442 <br>Available 9 AM - 6 PM</div>
    </div>
        </div>
    </div>
</section>

    <!-- Footer -->
    <footer class="bg-dark text-white py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
                <div>
                    <div class="flex items-center space-x-3 mb-6">
                        <div
                            class="w-10 h-10 bg-gradient-to-r from-primary to-secondary rounded-lg flex items-center justify-center">
                            <i class="fas fa-code text-white"></i>
                        </div>
                        <span class="text-2xl font-bold gradient-text">ICPC BUBT</span>
                    </div>
                    <p class="text-gray-400 mb-6">
                        Empowering the next generation of programmers through competitive programming excellence and
                        innovation.
                    </p>
                    <div class="flex space-x-4">
                        <a href="#"
                            class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#"
                            class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#"
                            class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                        <a href="#"
                            class="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fab fa-instagram"></i>
                        </a>
                    </div>
                </div>
                <div>
                    <h3 class="text-lg font-bold mb-6">Quick Links</h3>
                    <ul class="space-y-3">
                        <li><a href="index.php" class="text-gray-400 hover:text-primary transition-colors">Home</a></li>
                        <li><a href="about.php" class="text-gray-400 hover:text-primary transition-colors">About</a>
                        </li>
                        <li><a href="contest.php" class="text-gray-400 hover:text-primary transition-colors">Contest</a>
                        </li>
                        <li><a href="resources.php"
                                class="text-gray-400 hover:text-primary transition-colors">Resources</a></li>
                        <li><a href="gallery.php" class="text-gray-400 hover:text-primary transition-colors">Gallery</a>
                        </li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-bold mb-6">Resources</h3>
                    <ul class="space-y-3">
                        <li><a href="contest.php" class="text-gray-400 hover:text-primary transition-colors">Contest
                                Rules</a></li>
                        <li><a href="resources.php" class="text-gray-400 hover:text-primary transition-colors">Practice
                                Problems</a></li>
                        <li><a href="resources.php#faq"
                                class="text-gray-400 hover:text-primary transition-colors">FAQ</a></li>
                        <li><a href="resources.php#tutorials"
                                class="text-gray-400 hover:text-primary transition-colors">Tutorials</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">Discord Community</a>
                        </li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-bold mb-6">Newsletter</h3>
                    <p class="text-gray-400 mb-4">
                        Stay updated with contest announcements and programming tips.
                    </p>
                    <form class="flex" id="newsletter-form">
                        <input type="email" placeholder="Your email" required
                            class="flex-1 px-4 py-2 bg-white/10 border border-white/20 rounded-l-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary">
                        <button type="submit"
                            class="bg-gradient-to-r from-primary to-secondary px-6 py-2 rounded-r-lg hover:shadow-lg transition-all">
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </form>
                </div>
            </div>
            <div class="border-t border-gray-800 pt-8 text-center">
                <p class="text-gray-400">
                    © 2026 ICPC BUBT. All rights reserved. | Organized by Bangladesh University of
                    Business and Technology
                </p>
            </div>
        </div>
    </footer>

    <!-- Common Scripts -->
    <script>
        // Mobile menu toggle
        const mobileMenuBtn = document.getElementById("mobile-menu-btn");
        const mobileMenu = document.getElementById("mobile-menu");

        mobileMenuBtn.addEventListener("click", () => {
            mobileMenu.classList.toggle("hidden");
        });

        // Mobile dropdown functionality
        document.querySelectorAll(".mobile-dropdown-btn").forEach((btn) => {
            btn.addEventListener("click", () => {
                const dropdown = btn.nextElementSibling;
                const icon = btn.querySelector("i");

                // Toggle dropdown
                dropdown.classList.toggle("hidden");

                // Rotate icon
                if (dropdown.classList.contains("hidden")) {
                    icon.style.transform = "rotate(0deg)";
                } else {
                    icon.style.transform = "rotate(180deg)";
                }
            });
        });

        // Smooth scrolling
        document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
            anchor.addEventListener("click", function(e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute("href"));
                if (target) {
                    target.scrollIntoView({
                        behavior: "smooth",
                        block: "start",
                    });
                }
                mobileMenu.classList.add("hidden");
            });
        });

        // Navbar scroll effect
        window.addEventListener("scroll", function() {
            const navbar = document.querySelector("nav");
            if (window.scrollY > 50) {
                navbar.classList.add("bg-white/95");
                navbar.classList.remove("glass-effect");
            } else {
                navbar.classList.remove("bg-white/95");
                navbar.classList.add("glass-effect");
            }
        });

        // Newsletter form submission
        const newsletterForm = document.getElementById('newsletter-form');
        if (newsletterForm) {
            newsletterForm.addEventListener('submit', function(e) {
                e.preventDefault();
                const email = this.querySelector('input[type="email"]').value;

                // Here you can add AJAX call to save email
                alert('Thank you for subscribing to our newsletter!');
                this.reset();
            });
        }

        // Intersection Observer for animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: "0px 0px -50px 0px",
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = "1";
                    entry.target.style.transform = "translateY(0)";
                }
            });
        }, observerOptions);

        // Observe all cards for animation
        document.querySelectorAll(".card-hover").forEach((card) => {
            card.style.opacity = "0";
            card.style.transform = "translateY(20px)";
            card.style.transition = "opacity 0.6s ease, transform 0.6s ease";
            observer.observe(card);
        });
    </script>
    </body>

    </html>