*{
    margin: 0;
    padding: 0;
}

/* HTML PART */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 162, 255, 0.473) transparent;
    scroll-behavior: smooth;
    scrollbar-darkshadow-color: #212529;
}

html::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.459);
}

/* Header */

/* Logo */
nav {
    background: linear-gradient(45deg, #0c0220, #0c0220f8, transparent);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.navbar .container-fluid>a>img {
    width: 150px;
    height: 50px;
    margin-left: 30px;
}

.navbar .container-fluid .collapse>ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar .container-fluid .collapse>ul>li>a {
    color: rgb(255, 255, 255);
    text-transform: uppercase;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.01em;
    text-align: center;
    font-weight: 600;
    text-shadow: 2px 2px 3px black;
}

.navbar .container-fluid .collapse>ul>li {
    margin: 0 6px;
    border-radius: 60px;
    transition: all 0.1s linear;
}

.navbar .container-fluid .collapse>ul>li:hover,
.navbar .container-fluid .collapse>ul>li:active {
    width: 130px;
    border: 2px solid rgb(207, 205, 205);
    font-weight: 600;
    background: linear-gradient(45deg, transparent, black);
}

.active1 {
    align-items: center;
    text-align: center;
    width: 130px;
    font-weight: 600;
    background: linear-gradient(45deg, transparent, rgb(76, 233, 186));
    border-radius: 60px;
}

@media only screen and (max-width: 681px){
    nav {
        background-color: #0c0220;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    }
}
/* Main */

/* Background */
.back {
    width: 100%;
    background-color: white;
    background-image: linear-gradient(to left,transparent,rgba(255, 255, 255, 0.966),rgb(255, 255, 255)),url('Images/Back.jpg');
    background-size: cover;
    height: 100vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.back .left {
    width: 40%;
    transform: translateX(-348px);
    opacity: 0;
    animation: slide1 1.2s linear 0.5s 1 forwards;
}

@keyframes slide1 {
    0% {
        opacity: 0.2;
        transform: translateX(-232px);
    }

    50% {
        opacity: 0.6;
        transform: translateX(-116px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

.back .left>img {
    margin: 0 auto;
    margin-top: 50px;
    width: 100%;
    height: 350px;
    border-bottom-left-radius: 100px;
    border-top-right-radius: 100px;
}

/* Right */
.back .right {
    width: 40%;
    text-align: center;
}

#text {
    border-right: 0.15em solid orange;
    animation: blink 0.75s step-end infinite;
    width: max-content;
    color: black;
    font-family: 'Courier New', Courier, monospace;
    font-size: 2.5em;
    font-weight: 800;
}

@media only screen and (max-width: 1091px){
    #text{
        font-size: 3.8vw;
    }
}
@keyframes blink {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: orange;
    }
}

@media only screen and (max-width: 960px){
    .back {
        width: 100%;
        background-color: white;
        background-image: linear-gradient(to left,transparent,rgba(255, 255, 255, 0.966),rgb(255, 255, 255)),url('Images/Back.jpg');
        background-size: cover;
        height: 60vh;
        display: flex;
        justify-content: space-around;
        align-items: center;

    }
}

@media only screen and (max-width: 563px){
    .back {
        margin-top: 60px;
        width: 100%;
        background-color: white;
        background-image: url('Images/left.gif');
        background-size: 100% 60vh;
        background-repeat: no-repeat;
        height: 60vh;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;

    }
    .back .left{
        width: 50%;
    }
    .back .left>img {
        display: none;
    }
    .back .right{
        width: 100%;
    }
    #text {
        margin: 0 auto;
        font-size: 7.08vw;
    }
}

/* Covid */
#covid{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

#covid .heading{
    width: 50%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#covid .heading h1{
    color: rgb(0, 125, 197);
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: 600;
    text-shadow: 1px 1px 2px darkblue;
}

#covid .heading p{
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: 500;
    color:blueviolet;
    font-size: 1.2em;
    padding-left: 52px;
    padding-top: 10px;
}

#covid .heading .btn{
    text-align: center;
    align-self: center;
    background-color: rgba(255, 0, 0, 0.938);
    border-radius: 15px;
    margin: 20px 0;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 1.3em;
    font-weight: 600;
    box-shadow: rgba(66, 54, 0, 0.514) 0px 2px 5px -1px, rgba(24, 22, 0, 0.644) 0px 1px 3px -1px;
}

#covid .heading .btn:hover{
    background-color: rgb(255, 166, 0);
    border: 1.5px solid red;
}

#covid .heading .btn a{
    color: white;
}

#covid img{
    width: 30%;
    margin: 20px;
}

@media only screen and (max-width: 680px){
    #covid{
        flex-direction: column;
    }
    #covid .heading{
        width: 100%;
    }
    #covid img{
        width: 50%;
    }
}
/* USE */

#use{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#use h1{
    color: rgb(0, 122, 126);
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: 600;
    text-shadow: 1px 2px 3px rgb(0, 67, 94);
    padding-top: 30px;
    text-transform: uppercase;
}

#use .container1{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    margin-top: 50px;
}

#use .container1 .card{
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
    margin-bottom: 50px;
    transform: scale(1);
    transition: transform 1s;
}

#use .container1 .card:hover{
    cursor: pointer;
    transform: scale(1.08);
    box-shadow: rgba(174, 0, 255, 0.63) 0px 13px 27px -5px, rgba(255, 0, 0, 0.3) 0px 8px 16px -8px;
}

#use .card-body{
    background-color: #212529;
}

#use .container1 .card .card-body>h4{
    /* padding-top: 10px; */
    margin: 0 auto;
    text-align: center;
    font-size: 1.8em;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgb(255, 0, 170);
    font-weight: 600;
    text-shadow: 1px 1px 2px rgb(167, 0, 117);
}

#use .container1 .card img{
    width: 280px;
    height: 220px;
}

#use .container1 .card .op{
    position: absolute;
    opacity: 0;
    transition: 1s linear;
}


#use .container1 .card:hover .op{
    opacity: 1;
}

@media only screen and (max-width: 912px){
    #use{
        background-color: whitesmoke;
    }

    #use .container1{
        flex-direction: column;
    }
}

/* Symptoms */

#symptom{
    width: 100%;
    background-color: #c0e7f8;
    box-shadow: 0px 0 10px rgba(0, 0, 0, 0.8);
    padding-bottom: 15px;
}

#symptom .up{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 30px;
}

#symptom .up img{
    width: 500px;
    animation: opacity 2s forwards 1s infinite ease-in-out;
}

@keyframes opacity {
    0%{
        transform: scale(1.02);
        opacity: 0.4;
    }
    50%{
        opacity: 0.8;
        transform: scale(1.03);;
    }
    100%{
        opacity: 1;
        transform: scale(1.04);
    }
}

#symptom h1{
    color: rgb(0, 12, 12);
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: 600;
    text-shadow: 1px 2px 3px rgb(0, 13, 56);
    padding-top: 30px;
    text-transform: uppercase;
    text-align: center;
}

#symptom ul{
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: 500;
    color:blueviolet;
    font-size: 1.5em;
    padding-top: 10px;
    width: 25%;
    text-transform: uppercase;
}

#symptom ul li{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-transform: capitalize;
    padding-left: 15px;
    color: #24032e;
    font-size: 0.9em;
}

#symptom .down{
    display: flex;
    justify-content: center;
    align-items: center;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: 500;
    color:rgb(1, 39, 1);
    font-size: 1.4em;
    padding: 15px 10px;
    width: 50%;
    text-transform: capitalize;
    margin: 0 auto;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius: 10px;
    background: linear-gradient(to top,lightblue,transparent);
}

@media only screen and (max-width: 884px){
    #symptom .up{
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    #symptom ul{
        width: 100%;
    }
    #symptom .up ul li{
        width: 100%;
        padding-left: 0px;
    }
    #symptom .up img{
        width: 90vw;
    }
}

/* Preventions */
#prevent{
    width: 100%;
    background-color: rgb(255, 196, 0);
}

#prevent .carousel{
    width: 100%;
    padding: 20px;
}

#prevent .carousel-indicators button{
    background-color: #131376;
}

#prevent .carousel-inner img{
    width: 30vw;
    height: 25vw;
    border-radius: 50px;
    margin: 0 auto;
    margin-bottom: 15vw;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

#prevent .carousel-inner .carousel-caption h3{
    text-align: center;
    font-size: 1.8rem;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgb(255, 0, 170);
    font-weight: 600;
    text-shadow: 1px 1px 2px rgb(167, 0, 117);
    text-transform: uppercase;
}

#prevent .carousel-inner .carousel-caption p{
    padding-top: 20px;
    text-align: center;
    font-size: 1.5rem;
    font-family:'Times New Roman', Times, serif;
    color: rgb(37, 36, 37);
    font-weight: 600;
    text-shadow: 1px 1px 1px rgb(37, 37, 37);
    text-transform: capitalize;
}

#prevent .carousel-control-prev-icon,#prevent .carousel-control-next-icon{
    background-color: #271500;
    border-radius: 50%;
}

@media only screen and (max-width: 1268px)  {
    #prevent .carousel-inner img{
        margin-bottom: 250px;
    }
}

@media only screen and (max-width: 660px)  {
    #prevent .carousel-inner img{
        width: 50vw;
        height: 40vw;
    }

    #prevent .carousel-inner .carousel-caption h3{
        font-size: 1.6rem;
    }

    #prevent .carousel-inner .carousel-caption p{
        font-size: 1.2rem;
    }
}

@media only screen and (max-width: 405px){
    #prevent .carousel-inner img{
        width: 60vw;
        height: 50vw;
        margin-bottom: 40vh;
    }
}

@media only screen and (max-width: 388px){
    #prevent .carousel-inner img{
        margin-bottom: 55vh;
    }
}

/* Footer */
.footer {
    width: 100%;
    background-color: #131376;
    color: white;
    padding: 20px;
}

.footer .ft{
    display: flex;
    justify-content: space-around;
}

.footer .ab{
    width: 50%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color:rgb(237, 237, 237);
    font-size: 15px;
}

.footer .ab a{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color:rgb(154, 149, 149);
    font-size: 20px;
    text-decoration: none;
}

.footer .con{
    width: 20%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color:rgb(237, 237, 237);
    font-size: 15px;
}

.footer .con a{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color:rgb(154, 149, 149);
    font-size: 20px;
    text-decoration: none;
}

.footer .con .mail{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color:rgb(240, 240, 240);
    font-size: 15px;
}

.footer .con .mail:hover{
    color: #FC0;
}

.footer p{
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    color: beige;
    padding-top: 10px;
}
.footer .img{
    display: flex;
    justify-content: space-between;
    width: 50px;
    padding: 20px;
}

.footer .img img{
    width: 48px;
    padding: 5px 10px;
    cursor: pointer;
}

.footer .download{
    display: flex;
    align-items: center;
    flex-direction: column;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color:rgb(240, 240, 240);
    font-size: 1.2em;
}

.footer .download>button>a>img{
    width: 45px;
    border-radius: 10px;
}

.footer .download>button>a{
    text-decoration: none;
    background-color: #ffffff;
    color: #24032e;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-transform: uppercase;
    font-size: 1.2em;
    font-weight: 600;
}

.footer .download>button{
    background-color: #ffffff;
    margin-top: 5px;
    width: fit-content;
    border-radius: 10px;
    border-style: none;
    padding: 5px;
}

.footer .download>button:hover{
    box-shadow: rgba(255, 255, 255, 0.35) 0px 5px 15px;
}

@media only screen and (max-width: 793px){
    .footer .ft{
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .con{
        margin-top: 20px;
        border-bottom: 4px solid black;
        width: 100%;
    }
    .con .img{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
}