body {
    font-family: "Montserrat", sans-serif;
}


#home {
    position: relative;
    width: 100%;
    height: 100vh; /* Full screen */
    overflow: hidden; /* To ensure no overflow outside the section */
    display: flex;
    justify-content: center; /* Horizontally center the text */
    align-items: center;     /* Vertically center the text */
    text-align: center;      /* Center the text inside the h1 */
}

#background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video covers the whole section */
    transform: translate(-50%, -50%); /* Centers the video */
    z-index: -1; /* Keeps the video in the background */
    background-image: url('../images/video.jpg');
}

#how {
    background-image: url(../images/AppUI2.jpg);
    background-size: auto 426px;
    background-position: left;
    background-repeat: no-repeat;
}

#how img {
    visibility:hidden;
}

#copy {
    background-image: url(../images/LegalCopy.jpg);
    min-height: 480px;
    background-size: cover;
    background-position: center;
    color: #FFF;
    text-shadow: 4px 4px 14px rgba(255,255,255,0.27);
}

#copy .row{
    min-height: 480px;
}

#fallback-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/video.jpg'); /* Replace with your fallback image path */
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.centered-text {
    position: relative;
    z-index: 1; /* Ensures it appears above the video */
    font-size: 2.5rem; /* Adjust font size as needed */
    color: white;    /* Text color */
    padding: 20px;
    border-radius: 10px; /* Optional: Rounded corners */
    max-width: 80%; /* Restrict the width of the text box for better readability */
    text-shadow: 0px 4px 4px rgba(0,0,0,0.5);
    margin: 0 auto;
}

.navbar {
    -webkit-box-shadow: 0px 11px 23px -12px rgba(0,0,0,0.75)!important;
    -moz-box-shadow: 0px 11px 23px -12px rgba(0,0,0,0.75)!important;
    box-shadow: 0px 11px 23px -12px rgba(0,0,0,0.75)!important;
}

.transculetNav {
    background-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.opaqueNav {
    background-color: rgba(76, 92, 181, 0.8) !important;
}

.contactHolder {
    background-color: rgba(76, 92, 181, 1.0) !important;
    color: #FFF;
    padding: 30px;
    margin: 30px;
    border-radius: 20px;
}

.contactHolder .col-md-6 {
    flex-direction: column !important;
}

.contactHolder .col-md-6 p {
    text-align:justify;
}

.pinkbtn {
    background-color: #ff557f !important;
    border: 1px solid #e2466d;
    max-width:80vw;
}

#footer {
    padding:25px;
}

#footer p{
    text-align: center;
    margin: 0px;
    font-size:12px;
}

@media only screen and (max-width: 767px) {
     #how .row {
        flex-wrap: wrap-reverse;
     }
}

@media only screen and (max-width: 900px) {
    section .container .row {
        min-height: 480px !important;
    }

    .paralaxContent {
        margin-top:25px;
        margin-bottom:25px;
    }

    #copy .container{
        background-color: rgb(0 0 0 / 45%);
        width:100% !important;
    }

    #how {
        background-image:none;
    }

    #how img {
        visibility:visible;
    }
}

@media only screen and (min-width: 576px) {
    #copy .container{
        max-width: 100vw !important;
        margin: 0px;
        padding-left: 5vw;
        padding-right: 5vw;
    }
}