#navbarSupportedContent {
    font-size: 1.2rem;
}

#navbarSupportedContent a {
    font-size: 1.2rem;
}


/* header section :start  css*/

@media (max-width: 767px) {
    #background-wrap {
        display: none;
    }
    .wrapper .whaterbubble-div {
        display: none;
    }
}

.headerBgimages {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.bubbleimgStyle2 {
    background-color: rgb(52, 149, 175);
    z-index: -4;
}

.wrapper {
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: -5;
    position: absolute;
}

.wrapper .whaterbubble-div {
    height: 60px;
    width: 60px;
    border: 2px solid #8da9a63d;
    border-radius: 50px;
    position: absolute;
    top: 10%;
    left: 10%;
    animation: 4s linear infinite;
}

.whaterbubble-div .whaterbubble {
    height: 10px;
    width: 10px;
    border-radius: 50px;
    background-color: #8da9a63d;
    position: absolute;
    top: 20%;
    right: 20%;
}

.wrapper .whaterbubble-div:nth-child(1) {
    top: 20%;
    left: 20%;
    animation: animate 8s linear infinite;
}

.wrapper .whaterbubble-div:nth-child(2) {
    top: 60%;
    left: 80%;
    animation: animate 10s linear infinite;
}

.wrapper .whaterbubble-div:nth-child(3) {
    top: 40%;
    left: 40%;
    animation: animate 3s linear infinite;
}

.wrapper .whaterbubble-div:nth-child(4) {
    top: 66%;
    left: 30%;
    animation: animate 7s linear infinite;
}

.wrapper .whaterbubble-div:nth-child(5) {
    top: 90%;
    left: 10%;
    animation: animate 9s linear infinite;
}

.wrapper .whaterbubble-div:nth-child(6) {
    top: 30%;
    left: 60%;
    animation: animate 5s linear infinite;
}

.wrapper .whaterbubble-div:nth-child(7) {
    top: 70%;
    left: 20%;
    animation: animate 8s linear infinite;
}

.wrapper .whaterbubble-div:nth-child(8) {
    top: 75%;
    left: 60%;
    animation: animate 10s linear infinite;
}

.wrapper .whaterbubble-div:nth-child(9) {
    top: 50%;
    left: 50%;
    animation: animate 6s linear infinite;
}

.wrapper .whaterbubble-div:nth-child(10) {
    top: 45%;
    left: 20%;
    animation: animate 10s linear infinite;
}

.wrapper .whaterbubble-div:nth-child(11) {
    top: 10%;
    left: 90%;
    animation: animate 9s linear infinite;
}

.wrapper .whaterbubble-div:nth-child(12) {
    top: 20%;
    left: 70%;
    animation: animate 7s linear infinite;
}

.wrapper .whaterbubble-div:nth-child(13) {
    top: 20%;
    left: 20%;
    animation: animate 8s linear infinite;
}

.wrapper .whaterbubble-div:nth-child(14) {
    top: 60%;
    left: 5%;
    animation: animate 6s linear infinite;
}

.wrapper .whaterbubble-div:nth-child(15) {
    top: 90%;
    left: 80%;
    animation: animate 9s linear infinite;
}

.wrapper .whaterbubble-div:nth-child(16) {
    top: 30%;
    left: 40%;
    animation: animate 5s linear infinite;
}

.wrapper .whaterbubble-div:nth-child(17) {
    top: 70%;
    left: 20%;
    animation: animate 8s linear infinite;
}

.wrapper .whaterbubble-div:nth-child(18) {
    top: 75%;
    left: 60%;
    animation: animate 10s linear infinite;
}

.wrapper .whaterbubble-div:nth-child(19) {
    top: 50%;
    left: 50%;
    animation: animate 6s linear infinite;
}

.wrapper .whaterbubble-div:nth-child(20) {
    top: 45%;
    left: 20%;
    animation: animate 10s linear infinite;
}

.wrapper .whaterbubble-div:nth-child(21) {
    top: 10%;
    left: 90%;
    animation: animate 9s linear infinite;
}

.wrapper .whaterbubble-div:nth-child(22) {
    top: 20%;
    left: 70%;
    animation: animate 7s linear infinite;
}

@keyframes animate {
    0% {
        transform: scale(0) translateY(0) rotate(50deg);
    }
    100% {
        transform: scale(1.3) translateY(-100px) rotate(360deg);
    }
}

.card-1 {
    position: relative;
    width: auto;
    height: auto;
    z-index: 2;
    box-shadow: 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 455, 0.96);
    border-radius: 0.5rem;
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1em;
}

.boderspan {
    position: absolute;
    border-radius: 100vmax;
}

.top {
    top: 0;
    left: 0;
    width: 0;
    height: 5px;
    background: linear-gradient(90deg, transparent 50%, rgba(0, 255, 255, 0.5), rgb(0, 255, 255));
}

.bottom {
    right: 0;
    bottom: 0;
    height: 5px;
    background: linear-gradient(90deg, /* rgb(57, 255, 20), */
    rgb(0, 255, 255), /* rgba(57, 255, 20, 0.5), */
    rgb(0, 255, 255), transparent 50%);
}

.right {
    top: 0;
    right: 0;
    width: 5px;
    height: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(0, 255, 255, 0.5), rgb(0, 255, 255));
}

.left {
    left: 0;
    bottom: 0;
    width: 5px;
    height: 0;
    background: linear-gradient(180deg, rgba(0, 255, 255, 0.5), rgb(0, 255, 255), transparent 70%);
}

.top {
    animation: animateTop 5s ease-in-out infinite;
}

.bottom {
    animation: animateBottom 5s ease-in-out infinite;
}

.right {
    animation: animateRight 5s ease-in-out infinite;
}

.left {
    animation: animateLeft 5s ease-in-out infinite;
}

@keyframes animateTop {
    25% {
        width: 100%;
        opacity: 1;
    }
    30%,
    100% {
        opacity: 0;
    }
}

@keyframes animateBottom {
    0%,
    50% {
        opacity: 0;
        width: 0;
    }
    75% {
        opacity: 1;
        width: 100%;
    }
    76%,
    100% {
        opacity: 0;
    }
}

@keyframes animateRight {
    0%,
    25% {
        opacity: 0;
        height: 0;
    }
    50% {
        opacity: 1;
        height: 100%;
    }
    55%,
    100% {
        height: 100%;
        opacity: 0;
    }
}

@keyframes animateLeft {
    0%,
    75% {
        opacity: 0;
        bottom: 0;
        height: 0;
    }
    100% {
        opacity: 1;
        height: 100%;
    }
}

.thumbnail {
    width: 100px;
    height: 100px;
}

.citation p {
    font-size: 1.2rem;
    font-weight: 500;
}

.citation p:nth-child(2) {
    font-size: 1.5rem;
    font-weight: 700;
}

.citation p:nth-child(3) {
    font-size: 1.2rem;
    font-weight: 500;
}

.citation p:nth-child(4) {
    font-size: 1.2rem;
    font-weight: 500;
}

.citation p:nth-child(5) {
    font-size: 1.2rem;
    font-weight: 500;
}

.absolute {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    position: fixed;
}

#background-wrap {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: -1;
}


/* KEYFRAMES */

@-webkit-keyframes animateBubble {
    0% {
        margin-top: 1000px;
    }
    100% {
        margin-top: -100%;
    }
}

@-moz-keyframes animateBubble {
    0% {
        margin-top: 1000px;
    }
    100% {
        margin-top: -100%;
    }
}

@keyframes animateBubble {
    0% {
        margin-top: 1000px;
    }
    100% {
        margin-top: -100%;
    }
}

@-webkit-keyframes sideWays {
    0% {
        margin-left: 0px;
    }
    100% {
        margin-left: 50px;
    }
}

@-moz-keyframes sideWays {
    0% {
        margin-left: 0px;
    }
    100% {
        margin-left: 50px;
    }
}

@keyframes sideWays {
    0% {
        margin-left: 0px;
    }
    100% {
        margin-left: 50px;
    }
}


/* ANIMATIONS */

.x1 {
    -webkit-animation: animateBubble 50s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: animateBubble 50s linear infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 50s linear infinite, sideWays 2s ease-in-out infinite alternate;
    left: -5%;
    top: 5%;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
}

.x2 {
    -webkit-animation: animateBubble 40s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: animateBubble 40s linear infinite, sideWays 4s ease-in-out infinite alternate;
    animation: animateBubble 40s linear infinite, sideWays 4s ease-in-out infinite alternate;
    left: 5%;
    top: 80%;
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    transform: scale(0.4);
}

.x3 {
    -webkit-animation: animateBubble 50s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: animateBubble 50s linear infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 50s linear infinite, sideWays 2s ease-in-out infinite alternate;
    left: 10%;
    top: 40%;
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    transform: scale(0.7);
}

.x4 {
    -webkit-animation: animateBubble 60s linear infinite, sideWays 3s ease-in-out infinite alternate;
    -moz-animation: animateBubble 60s linear infinite, sideWays 3s ease-in-out infinite alternate;
    animation: animateBubble 60s linear infinite, sideWays 3s ease-in-out infinite alternate;
    left: 20%;
    top: 0;
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    transform: scale(0.3);
}

.x5 {
    -webkit-animation: animateBubble 39s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: animateBubble 39s linear infinite, sideWays 4s ease-in-out infinite alternate;
    animation: animateBubble 39s linear infinite, sideWays 4s ease-in-out infinite alternate;
    left: 30%;
    top: 50%;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5);
}

.x6 {
    -webkit-animation: animateBubble 31s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: animateBubble 31s linear infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 31s linear infinite, sideWays 2s ease-in-out infinite alternate;
    left: 50%;
    top: 0;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
}

.x7 {
    -webkit-animation: animateBubble 30s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: animateBubble 30s linear infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 30s linear infinite, sideWays 2s ease-in-out infinite alternate;
    left: 65%;
    top: 70%;
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    transform: scale(0.4);
}

.x8 {
    -webkit-animation: animateBubble 42s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: animateBubble 42s linear infinite, sideWays 4s ease-in-out infinite alternate;
    animation: animateBubble 42s linear infinite, sideWays 6s ease-in-out infinite alternate;
    left: 80%;
    top: 10%;
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    transform: scale(0.3);
}

.x9 {
    -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
    animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
    left: 90%;
    top: 50%;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
}

.x10 {
    -webkit-animation: animateBubble 26s linear infinite, sideWays 8s ease-in-out infinite alternate;
    -moz-animation: animateBubble 26s linear infinite, sideWays 8s ease-in-out infinite alternate;
    animation: animateBubble 26s linear infinite, sideWays 8s ease-in-out infinite alternate;
    left: 80%;
    top: 80%;
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    transform: scale(0.3);
}

.x11 {
    -webkit-animation: animateBubble 35s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: animateBubble 35s linear infinite, sideWays 4s ease-in-out infinite alternate;
    animation: animateBubble 35s linear infinite, sideWays 4s ease-in-out infinite alternate;
    left: 70%;
    top: 30%;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5);
}

.x12 {
    -webkit-animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 40s linear infinite, sideWays 2s ease-in-out infinite alternate;
    left: 60%;
    top: 60%;
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    transform: scale(0.7);
}

.x13 {
    -webkit-animation: animateBubble 50s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: animateBubble 50s linear infinite, sideWays 4s ease-in-out infinite alternate;
    animation: animateBubble 50s linear infinite, sideWays 4s ease-in-out infinite alternate;
    left: 40%;
    top: 40%;
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    transform: scale(0.4);
}

.x14 {
    -webkit-animation: animateBubble 45s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: animateBubble 45s linear infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 45s linear infinite, sideWays 2s ease-in-out infinite alternate;
    left: 30%;
    top: 70%;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
}

.x15 {
    -webkit-animation: animateBubble 30s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: animateBubble 30s linear infinite, sideWays 4s ease-in-out infinite alternate;
    animation: animateBubble 30s linear infinite, sideWays 4s ease-in-out infinite alternate;
    left: 20%;
    top: 20%;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
}

.x16 {
    -webkit-animation: animateBubble 35s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: animateBubble 35s linear infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 35s linear infinite, sideWays 2s ease-in-out infinite alternate;
    left: 10%;
    top: 50%;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5);
}

.x17 {
    -webkit-animation: animateBubble 40s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: animateBubble 40s linear infinite, sideWays 4s ease-in-out infinite alternate;
    animation: animateBubble 40s linear infinite, sideWays 4s ease-in-out infinite alternate;
    left: 20%;
    top: 80%;
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    transform: scale(0.3);
}

.x18 {
    -webkit-animation: animateBubble 45s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: animateBubble 45s linear infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 45s linear infinite, sideWays 2s ease-in-out infinite alternate;
    left: 30%;
    top: 30%;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5);
}

.x19 {
    -webkit-animation: animateBubble 50s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: animateBubble 50s linear infinite, sideWays 4s ease-in-out infinite alternate;
    animation: animateBubble 50s linear infinite, sideWays 4s ease-in-out infinite alternate;
    left: 40%;
    top: 60%;
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    transform: scale(0.7);
}

.x20 {
    -webkit-animation: animateBubble 55s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: animateBubble 55s linear infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 55s linear infinite, sideWays 2s ease-in-out infinite alternate;
    left: 50%;
    top: 10%;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
}

.x21 {
    -webkit-animation: animateBubble 60s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: animateBubble 60s linear infinite, sideWays 4s ease-in-out infinite alternate;
    animation: animateBubble 60s linear infinite, sideWays 4s ease-in-out infinite alternate;
    left: 60%;
    top: 40%;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
}

.x22 {
    -webkit-animation: animateBubble 65s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: animateBubble 65s linear infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 65s linear infinite, sideWays 2s ease-in-out infinite alternate;
    left: 70%;
    top: 70%;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
}

.x23 {
    -webkit-animation: animateBubble 70s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: animateBubble 70s linear infinite, sideWays 4s ease-in-out infinite alternate;
    animation: animateBubble 70s linear infinite, sideWays 4s ease-in-out infinite alternate;
    left: 80%;
    top: 20%;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5);
}

.x24 {
    -webkit-animation: animateBubble 75s linear infinite, sideWays 2s ease-in-out infinite alternate;
    -moz-animation: animateBubble 75s linear infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 75s linear infinite, sideWays 2s ease-in-out infinite alternate;
    left: 90%;
    top: 50%;
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    transform: scale(0.7);
}

.x25 {
    -webkit-animation: animateBubble 80s linear infinite, sideWays 4s ease-in-out infinite alternate;
    -moz-animation: animateBubble 80s linear infinite, sideWays 4s ease-in-out infinite alternate;
    animation: animateBubble 80s linear infinite, sideWays 4s ease-in-out infinite alternate;
    left: 100%;
    top: 80%;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
}

.header-1 {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 1rem;
    margin-top: 1rem;
}


/* can you give me zoom in after 5 seconds */

.zoom-in {
    animation: zoom-in 5s infinite;
}

@keyframes zoom-in {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}


/* buttom screen 20% up display hover 5 seconds in  mouse hover floating working start know */

.shadow-hover-images {
    animation: shadow-hover 5s infinite;
}

@keyframes shadow-hover {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
    }
    100% {
        box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
    }
}


/* muse hover right 5 seconds  images ritate left 50deg if mouse hover left imagrs rotate right */

.flip-card:hover .flip-card-inner,
.flip-card:focus .flip-card-inner {
    transform: rotateY(50deg);
    transform: rotatex(20deg);
    transform: rotatez(10deg);
    animation-delay: 5s infinite;
    transition-delay: 5s infinite;
}


/* OBJECTS */

.bubble {
    background-color: #8da9a63d;
    /* -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
    -moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1); */
    height: 200px;
    position: absolute;
    width: 200px;
}

.bubble:after {
    background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
    /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255, 255, 255, 0.5)), color-stop(70%, rgba(255, 255, 255, 0)));
    /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
    /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
    /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
    /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
    /* W3C */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff', endColorstr='#00ffffff', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
    -moz-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
    content: "";
    height: 180px;
    left: 10px;
    position: absolute;
    width: 180px;
}


/* header button style css start hare */

.btn-animate {
    text-align: center;
    color: white;
    background: linear-gradient(to left, #0E9E9C 50%, lightblue 50%) right;
    background-size: 200%;
    transition: .5s ease-out;
}

.btn-animate:hover {
    background-position: left;
}


/* box style start hare  */

.small-card {
    height: 300px;
}
.i_logo {
    /* color:#ffffff; */
     height:80px;
     width: 80px !important;
     margin: auto;
     padding: 10px;
    border-radius: 50%;
    /* background: linear-gradient(to right, rgba(0, 0, 0, 0.98) 50%,  rgba(0, 0, 0, 0.2) 50%) right; */
    background-size: 200%;
}

.bubbleimgStyle2 {
    background-color: rgb(52, 149, 175);
    z-index: -4;
}

.card-1 {
    position: relative;
    width: auto;
    height: auto;
    z-index: 2;
    box-shadow: 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 455, 0.96);
    border-radius: 0.5rem;
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1em;
}

.boderspan {
    position: absolute;
    border-radius: 100vmax;
}

.top {
    top: 0;
    left: 0;
    width: 0;
    height: 5px;
    background: linear-gradient(90deg, transparent 50%, rgba(0, 255, 255, 0.5), rgb(0, 255, 255));
}

.bottom {
    right: 0;
    bottom: 0;
    height: 5px;
    background: linear-gradient(90deg, /* rgb(57, 255, 20), */
    rgb(0, 255, 255), /* rgba(57, 255, 20, 0.5), */
    rgb(0, 255, 255), transparent 50%);
}

.right {
    top: 0;
    right: 0;
    width: 5px;
    height: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(0, 255, 255, 0.5), rgb(0, 255, 255));
}

.left {
    left: 0;
    bottom: 0;
    width: 5px;
    height: 0;
    background: linear-gradient(180deg, rgba(0, 255, 255, 0.5), rgb(0, 255, 255), transparent 70%);
}

.top {
    animation: animateTop 5s ease-in-out infinite;
}

.bottom {
    animation: animateBottom 5s ease-in-out infinite;
}

.right {
    animation: animateRight 5s ease-in-out infinite;
}

.left {
    animation: animateLeft 5s ease-in-out infinite;
}

@keyframes animateTop {
    25% {
        width: 100%;
        opacity: 1;
    }
    30%,
    100% {
        opacity: 0;
    }
}

@keyframes animateBottom {
    0%,
    50% {
        opacity: 0;
        width: 0;
    }
    75% {
        opacity: 1;
        width: 100%;
    }
    76%,
    100% {
        opacity: 0;
    }
}

@keyframes animateRight {
    0%,
    25% {
        opacity: 0;
        height: 0;
    }
    50% {
        opacity: 1;
        height: 100%;
    }
    55%,
    100% {
        height: 100%;
        opacity: 0;
    }
}

@keyframes animateLeft {
    0%,
    75% {
        opacity: 0;
        bottom: 0;
        height: 0;
    }
    100% {
        opacity: 1;
        height: 100%;
    }
}


/* box style end hare  */

.cssload-container {
    position: relative;
}

.cssload-whirlpool,
.cssload-whirlpool::before,
.cssload-whirlpool::after {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 3px solid rgba(217, 217, 217, 0.98);
    border-left-color: rgb(0, 108, 162);
    border-radius: 3372px;
    -o-border-radius: 3372px;
    -ms-border-radius: 3372px;
    -webkit-border-radius: 3372px;
    -moz-border-radius: 3372px;
}

.cssload-whirlpool {
    margin: -84px 0 0 -84px;
    height: 169px;
    width: 169px;
    animation: cssload-rotate 1300ms linear infinite;
    -o-animation: cssload-rotate 1300ms linear infinite;
    -ms-animation: cssload-rotate 1300ms linear infinite;
    -webkit-animation: cssload-rotate 1300ms linear infinite;
    -moz-animation: cssload-rotate 1300ms linear infinite;
}

.cssload-whirlpool::before {
    content: "";
    margin: -78px 0 0 -78px;
    height: 149px;
    width: 149px;
    animation: cssload-rotate 1300ms linear infinite;
    -o-animation: cssload-rotate 1300ms linear infinite;
    -ms-animation: cssload-rotate 1300ms linear infinite;
    -webkit-animation: cssload-rotate 1300ms linear infinite;
    -moz-animation: cssload-rotate 1300ms linear infinite;
}

.cssload-whirlpool::after {
    content: "";
    margin: -98px 0 0 -98px;
    height: 189px;
    width: 189px;
    animation: cssload-rotate 2600ms linear infinite;
    -o-animation: cssload-rotate 2600ms linear infinite;
    -ms-animation: cssload-rotate 2600ms linear infinite;
    -webkit-animation: cssload-rotate 2600ms linear infinite;
    -moz-animation: cssload-rotate 2600ms linear infinite;
}

.loading-text {
    width: 90px;
    position: absolute;
    top: calc(50% - 15px);
    left: calc(50% - 45px);
    text-align: center;
    color: #fff;
    font-size: 16px;
}

@keyframes cssload-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@-o-keyframes cssload-rotate {
    100% {
        -o-transform: rotate(360deg);
    }
}

@-ms-keyframes cssload-rotate {
    100% {
        -ms-transform: rotate(360deg);
    }
}

@-webkit-keyframes cssload-rotate {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes cssload-rotate {
    100% {
        -moz-transform: rotate(360deg);
    }
}