/*your custom css goes here*/ 

/* 1. Ensure the parent list allows items to overflow its boundaries */
    .header-menu-container {
        overflow: visible !important;
    }

    /* 2. Positioning and Hover Logic */
    .hov-dropdown {
        position: relative;
    }

    .hov-dropdown:hover > .dropdown-content {
        display: block !important;
        opacity: 1;
        visibility: visible;
        animation: fadeInMenu 0.3s ease;
    }

    /* 3. Dropdown Styling */
    .dropdown-content {
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #fff;
        box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
        z-index: 9999; /* High z-index to stay on top */
        display: none;
    }

    @keyframes fadeInMenu {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    
    
    .home-hero-video {
    width: 100%;
    overflow: hidden;
}

/* Wrapper controls height */
.hero-video-wrapper {
    position: relative;
    width: 100%;
    height: clamp(260px, 60vh, 460px);
    background: #000;
}

/* Video fills container properly */
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay for contrast */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
}

/* Content container */
.hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 1rem;
    color: #fff;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Typography */
.hero-title {
    font-size: clamp(1.5rem, 4vw, 2.8rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.hero-subtitle {
    font-size: clamp(0.95rem, 2.5vw, 1.15rem);
    max-width: 600px;
    margin-bottom: 1rem;
}

/* Button spacing */
.hero-content .btn {
    padding: 0.6rem 1.4rem;
    font-size: 0.95rem;
}

/* Extra safety for very small devices */
@media (max-width: 375px) {
    .hero-video-wrapper {
        height: 240px;
    }

    .hero-title {
        font-size: 1.4rem;
    }
}