body {
    /*background-color: white;
    background-image: url('..\\Images\\Background.png');
    background-size: cover;
    background-repeat: no-repeat;
    height:100vh;*/
}
/*
.orb1 {
    background-image: url(..\\Images\\orb1.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: fixed;
    height: 500px;
    width: 500px;
    top: -7%;
    left: 22%;
}

.orb2 {
    background-image: url(..\\Images\\orb2.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: fixed;
    height: 440px;
    width: 440px;
    top: 27%;
    left: 11%;
}
.orb6 {
    background-image: url(..\\Images\\orb6.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: fixed;
    height: 350px;
    width: 350px;
    top: 40%;
    left: 40%;
}
.orb5 {
    background-image: url("..\\Images\\orb5.png");
    background-size: cover;
    background-repeat: no-repeat;
    position: fixed;
    height: 500px;
    width: 500px;
    top: 43%;
    left: 66%;
}
.orb4 {
    background-image: url("..\\Images\\orb4.png");
    background-size: cover;
    background-repeat: no-repeat;
    position: fixed;
    height: 600px;
    width: 600px;
    top: 12%;
    left: 60%;
}
.orb3 {
    background-image: url(..\\Images\\orb3.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: fixed;
    height: 600px;
    width: 600px;
    top: -20%;
    left: 50%;
}*/

.floater {
    animation: float;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-duration: 4s;
}

.floater2 {
    animation: float2;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-duration: 6s;
    animation-delay: 1.2s;
}

.floater3 {
    animation: float;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-duration: 4s;
    animation-delay: 0.5s;
}

.floate4 {
    animation: float2;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-delay:0.5s;
    animation-duration: 3s;
}

@keyframes float {
    0% {
        transform:scale(1)
    }

    50% {
        transform: scale(0.8)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes forefront {
    from {
        box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1);
        opacity:0;
    }
    to {
        box-shadow: 9px 9px 4px rgba(0, 0, 0, 0.1);
        opacity: 1;
    }
}

@keyframes float2 {
    0% {
        transform:scale(1)
    }

    50% {
        transform: scale(1.3)
    }

    100% {
        transform: scale(1)
    }
}

.card-header {
    background-color: transparent;
    /*color: white;*/
    border-bottom:none;
}

.card {
    backdrop-filter: blur(10px);
    background-color: rgba(255,255,255, 0.2);
    border-radius: 5px;
    padding: 20px;
    text-align: left;
    min-height: 45%;
    min-width: 30%;
    /*color: white;*/
    max-width: 576px;
    /*animation: forefront;
    animation-duration: 2s;
    animation-fill-mode: forwards;*/
    margin:0 auto;
}

/*.validation-summary-errors {
    background-image: linear-gradient(91.74deg, #FF0000 17.58%, #FF6E1D 121.29%);*/
    /*color: white !important;*/
    /*border-radius: 5px;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
    padding:10px 0px;
}

    .validation-summary-errors ul {
        margin:0px;
    }

    .field-validation-error {
        background-image: linear-gradient(91.74deg, #FF0000 17.58%, #FF6E1D 121.29%);
        padding: 0px 10px;*/
        /*color: white !important;*/
        /*border-radius: 5px;
        padding: 5px 10px;
        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
    }*/

.input-validation-error {
    border:red solid 1px;
    margin-bottom:10px;
}


.card-position {
    display: flex;
    justify-content: center;
    width: 100%;
    position: absolute;
    top: 10em;
    flex-direction:column;
    align-items:center;
}

@media (max-width: 767px) {
    /* Adjust the styles for smaller screens */
    .orb1 {
        height: 200px;
        width: 200px;
        top: -7%;
        left: 22%;
    }

    .orb2 {
        height: 150px;
        width: 150px;
        top: 27%;
        left: 11%;
    }

    .orb6 {
        height: 120px;
        width: 120px;
        top: 40%;
        left: 40%;
    }

    .orb5 {
        height: 200px;
        width: 200px;
        top: 43%;
        left: 66%;
    }

    .orb4 {
        height: 250px;
        width: 250px;
        top: 12%;
        left: 60%;
    }

    .orb3 {
        height: 250px;
        width: 250px;
        top: -20%;
        left: 50%;
    }

    .card {
        padding: 10px;
        min-height: 40%;
        min-width: 70%;
    }
/*
    .header-logo img { 
        width: 150px;
    }*/
}