.header-contianer {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-contianer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.header-contianer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(181, 131, 211, 0.8), rgba(74, 37, 115, 0.8));
    z-index: 1;
}

 

 
        .hero {
            height: 100vh;
            display: flex;
             position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
    color: white;
            align-items: center;
            justify-content: center;
            text-align: center;
            flex-direction: column;
        }

        .hero h1 {
            font-size: 3rem;
            margin-bottom: 10px;
        }
        .hero p {
            font-size: 1.2rem;
            max-width: 600px;
            margin-bottom: 30px;
        }
        .search-box {
            display: flex;
            background: white;
            border-radius: 50px;
            padding: 10px;
            width: 50%;
            max-width: 600px;
        }
        .search-box input[type="text"] {
            border: none;
            outline: none;
            flex: 1;
            padding: 10px;
            font-size: 1rem;
            border-radius: 50px 0 0 50px;
        }
        .search-box button {
            background: #6A2F8D;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 1rem;
            border-radius: 0 50px 50px 0;
            cursor: pointer;
            transition: 0.3s;
        }
        .search-box button:hover {
            background: #B583D3;
        }