body {
}
.wrapper {
    height: 100vh;
    display: flex;
    align-items: center;
    color: #FFF;
}

.video-wrap {
    position: absolute;
    top: 10vh;
    left: 0;
   height:auto;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    z-index: -1;
}

    .video-wrap video {
      
        display: block;
        min-width: 100%;
        height: auto; /* Keeps aspect ratio */
        max-width: 100%; /* Remove extra whitespace */
    }



.overlay {
    z-index: -1;
    height: auto;
    top: 0;
    left: 0;
    background: #2D3E50;
    position: absolute;
    opacity: .1;
}

.landing-text {
    z-index: -2;
    display: inline-block;
    width: 60%;
    text-align: center;
    vertical-align: central;
    align-content: center;
}

.landingSubscribe {
    z-index: -2;
    display: inline-block;
    border: groove;
    height: 60%;
    width: 40%;
    margin: 5%;
    text-align: center;
    vertical-align: central;
    align-content: center;
    background-color: aliceblue;
    border-color: darkgreen;
    opacity: .1;
}

.multiViewMailList {
}


#divButton {
    display: block;
}


.img1 {
    align-content: center;
    vertical-align:central;
    max-width: 100%; /* ensures the image fits the screen width */
    max-height: 100vh; /* ensures it fits the viewport height */
    height: auto; /* maintains aspect ratio */
    width: auto; /* maintains aspect ratio if height is constrained */
    object-fit: contain; /* scales image within container without cropping */
}

.row {
    z-index: 100;
}

.container-fluid {
    z-index: 100;
}


nav {
    background: linear-gradient(135deg, #c89e7e 5%, #4a6b82 95%); /* Purple horizontal gradient */
    padding: 15px;
}

.col-md-4 {
    background: radial-gradient(circle, #c89e7e 0%, #e4cfbf 49%, #ffffff 100%);
    /*background: radial-gradient(circle, #bdc3c7 0%, #75818c 43%, #75818c 88%, #51606e 95%, #2c3e50 95%);
    /*background: radial-gradient(circle, #bdc3c7 0%, #75818c 14%, #75818c 29%, #51606e 50%, #51606e 70%, #3f4f5f 88%, #2c3e50 100%);
    background: radial-gradient(circle, #667eea 0%, #6e65c6 21%, #7258b4 24%, #7452ab 26%, #754fa7 81%, #764ba2 100%);
    /*background-image: linear-gradient(135deg, #6a11cb 0%, /* violet */ #2575fc 33%, /* blue */ #00d1b2 66%, /* teal */ #ffdd57 100% /* warm yellow */ );
    */
}

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}


@media only screen and (max-width:767px) {


    .wrapper {
        height: 30vh;
        display: flex;
        align-items: center;
        color: #FFF;
    }

    .video-wrap {
        position: absolute;
        top: 20vh;
        left: 0;
        height: auto;
        width: 100%;
        max-width: 100vw;
        overflow: hidden;
        z-index: -1;
    }

        .video-wrap video {
            display: block;
            min-width: 100%;
            height: auto; /* Keeps aspect ratio */
            max-width: 100%; /* Remove extra whitespace */
        }



    .overlay {
        z-index: -1;
        height: 100vh;
        top: 0;
        left: 0;
        background: #2D3E50;
        position: absolute;
        opacity: .1;
    }






}