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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HA PRECAST</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="shortcut icon" href="img/logo2.png" type="image/x-icon">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Khand:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://kit.fontawesome.com/707a6549dc.js" crossorigin="anonymous"></script>
</head>

<body>

    <header>
        <nav>
            <div class="nav-div" style="width: 20%;">
                <a href="index.php">
                    <img src="img/logo.png" alt="HA PRECAST Logo" class="nav-logo">
                </a>
            </div>

            <!-- Hamburger Menu Button (solo visible en móvil) -->
            <div class="mobile-menu-btn" onclick="toggleSidebar()">
                <i class="bi bi-list"></i>
            </div>

            <!-- Desktop Navigation -->
            <div class="desktop-nav">
                <ul class="nav-ul">
                    <li><a href="#"><i class="bi bi-geo-alt-fill"></i> El Paso, TX</a>
                    <a href="tel:+19152342797"><i class="bi bi-telephone-fill"></i> (915) 234 2797</a></li>
                    <li><a href="#"><i class="bi bi-geo-alt-fill"></i> West Texas and New Mexico</a>
                    <a href="tel:+19158014374"><i class="bi bi-telephone-fill"></i> (915) 801 4374</a></li>
                    <li><a href="#"><i class="bi bi-geo-alt-fill"></i> East Texas</a>
                    <a href="tel:+12108834331"><i class="bi bi-telephone-fill"></i> (210) 883 4331</a></li>
                </ul>
                <div class="nav-div2">
                    <ul class="nav-ul2">
                        <li><a href="index.php">HOME</a></li>
                        <li><a href="index.php#products">PRODUCTS</a></li>
                        <li><a href="index.php#certifications">CERTIFICATIONS</a></li>
                        <li><a href="index.php#facilities">FACILITIES</a></li>
                        <li><a href="index.php#aboutUs">ABOUT US</a></li>
                        <li><a href="index.php#gallery">GALLERY</a></li>
                        <li><a href="index.php#contact">CONTACT</a></li>
                     <!---   <li><a href="">CATALOG <i class="bi bi-download"></i></a></li> --->
                     
                     
                     
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <!-- Mobile Sidebar -->
    <div class="sidebar-overlay" id="sidebarOverlay" onclick="closeSidebar()"></div>
    <div class="mobile-sidebar" id="mobileSidebar">
        <div class="sidebar-header">
            <img src="img/logo.png" alt="HA PRECAST Logo" class="sidebar-logo">
            <button class="sidebar-close" onclick="closeSidebar()">
                <i class="bi bi-x-lg"></i>
            </button>
        </div>

        <div class="sidebar-content">
            <!-- Navigation Links -->
            <div class="sidebar-section">
                <h3>Navigation</h3>
                <ul class="sidebar-nav">
                    <li><a href="index.php#products" onclick="closeSidebar()">PRODUCTS</a></li>
                    <li><a href="index.php#certifications" onclick="closeSidebar()">CERTIFICATIONS</a></li>
                    <li><a href="index.php#facilities" onclick="closeSidebar()">FACILITIES</a></li>
                    <li><a href="index.php#aboutUs" onclick="closeSidebar()">ABOUT US</a></li>
                    <li><a href="index.php#gallery" onclick="closeSidebar()">GALLERY</a></li>
                    <li><a href="index.php#contact" onclick="closeSidebar()">CONTACT</a></li>
                    <li><a href="" onclick="closeSidebar()">CATALOG <i class="bi bi-download"></i></a></li>
                </ul>
            </div>

            <!-- Contact Information -->
            <div class="sidebar-section">
                <h3>Contact Information</h3>
                <div class="sidebar-contact">
                    <div class="contact-item">
                        <i class="bi bi-geo-alt-fill"></i>
                        <div>
                            <strong>El Paso, TX</strong>
                            <p>12301 Rojas Dr. Suite B26<br>El Paso, TX 79928</p>
                        </div>
                    </div>
                    <div class="contact-item">
                        <i class="bi bi-telephone-fill"></i>
                        <div>
                            <a href="tel:+19152342797">(915) 234 2797</a>
                        </div>
                    </div>
                    <div class="contact-item">
                        <i class="bi bi-envelope-fill"></i>
                        <div>
                            <a href="mailto:fhumphrey@haprecast.com">fhumphrey@haprecast.com</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- WhatsApp Floating Button -->
    <div class="whatsapp-btn">
        <a href="https://wa.me/19158014374?text=Hi,%20more%20information." 
           target="_blank" 
           title="Contactar por WhatsApp">
            <i class="fab fa-whatsapp"></i>
        </a>
    </div>