body{
    /* width: 90%;
    margin: auto; */
    background-color: rgb(212, 207, 207);

}
nav{
    width: 100%;
    padding: 10px;
    background-color: rgb(177, 214, 238);
    box-shadow: 4px 4px 40px gray;
}
.menu{
    font-size: 20px;
}
.menu:hover{
    color: white;
    cursor: pointer;
}
.menu a:hover{
    color: white;
    cursor: pointer;

}
.menu a{
text-decoration: none;
color: black;
}
li{
    list-style: none;
}
.navLink li{
    margin-right: 25px;
}
.banner_container{
    width: 90%;
    padding: 20px;
    margin: auto;
}
.banner{
    height: 450px;
    display: flex;
    justify-content: space-around;
    margin: auto;
    align-items: center;
    background: linear-gradient(cyan,rgb(134, 125, 125));
    box-shadow: 30px 5px 20px gray;
    border-radius: 10px;
    padding: 70px;
}
.bn-img{
    width: 350px;
    margin-top: -100px;
}
.font{
font-size: 16px;
}
.name{
    color: rgb(166, 52, 182)
}
.primary{
    color: rgb(7, 9, 83);
}

.card-container{
    width: 400px;
    background-color: whitesmoke;
    padding: 13px;
    border-radius: 40px 20px 80px 20px ;
    box-shadow: 5px 5px 10px gray;
}

#search{
    width: 70%;
    padding: 10px;
    border: none;
    border-radius: 20px 0px;
}
.search-btn{
    padding: 10px;
    background-color: rgb(115, 219, 109);
    color: white;
    font-weight: 500;
    border: none;
    border-radius: 20px 0px;
}
.search-btn:hover{
    padding: 10px;
    background-color: rgb(50, 133, 46);
    color: white;
    font-weight: 900;
    border: none;
    border-radius: 20px 0px;
}
#spinner{
    display: none;
}
#nodata{
    display: none;
}


.doctors-container{
    width: 80%;
    margin: auto
}
.doctor-card img{
    width: 100px;
    height: 100px;
    border-radius: 50px;
}
.doctor-card{
    width: 300px;
    background-color: whitesmoke;
    padding: 13px;
    border-radius: 40px 20px 80px 20px ;
    box-shadow: 40px 5px 50px gray;
}
.special-btn{
    background-color: rgb(127, 151, 151);
    border: none;
    padding: 1px 8px;
    border-radius: 10px;
    color: rgb(0, 0, 0);
    box-shadow: 1px 2px 8px goldenrod;

}
.ReviewImg{
    width: 100px;
    height: 100px;
    border-radius: 50px 10px;
    display: block;
}
footer{
    background: linear-gradient(rgb(134, 125, 125),rgb(7, 246, 246));
    
}
.doctorImg img{
    height: 250px;
    width: 250px;
    border-radius: 150px;
    border: 8px solid white;
    box-sizing: border-box;
    box-shadow: 10px 10px 20px gray;
}
.AppointmentBtn{
    padding: 5px 20px;
    border: none;
    color: white;
    font-size: 20px;
    font-weight: 500;
    border-radius: 20px;
    background-color: rgb(44, 144, 144);
}
#DocName{
    color: rgb(7, 130, 130);
}
.doctor-details-container{
    width: 75%;
    margin: auto;
    padding: 20px;
    
}
#Loader{
    height: 300px;
    display: none;
}
.reviewer-container{
    width: 400px;
    background:white;
    margin: 10px;
    padding: 10px;
    align-items: center;
    box-sizing: border-box;
    border-radius: 40px 20px 40px;
}
.bg-modal{
    background-color: rgb(161, 196, 196);
}
.modal-body-bg{
    background-color: azure;
}
#symptom{
    width: 80%;
    padding: 12px;
    border: none;
    background-color: rgb(233, 225, 225);
    border-radius: 50px;
    margin: 5px;
    
}
#CloseBtn{
    border: none;
    border-radius: 5px 20px;

}
.title{
    text-shadow: 4px 6px 8px rgba(0, 0, 0, 0.5);
}
#SubmitBtn{
    border: none;
    border-radius: 20px 5px;

}
.user-details{
    width: 80%;
    margin: auto;
    padding: 40px;
}
.allAppointmentContainer {
    width: 90%;
    margin: auto;
    padding: 30px;
    min-height: 400px;
    display: block;
}

.allAppointmentContainer .table {
    width: 100%;
   
}
.info{
    border:  1px solid gray;
    border-radius: 10px 40px; 
    padding: 40px;
    text-align: start;
    width: 300px;
    height: 400px;
    box-shadow: 4px 10px 10px gray;
}
.infoImg{
    width: 80px;
    height: 80px;
    border-radius: 40px;
}
@media only screen and (max-width: 600px) {
    /* Styles for small devices go here */
    body {
      background-color: lightblue;
    }
    .name{
        color: rgb(166, 52, 182);
        text-align: start;
        
    }
    .card-container{
        width: 100%;
    }
    .bn-img{
        width: 150px;
        margin-top: -100px;
        position: absolute;
        top: 96%; /* Adjust the positioning based on your needs */
        left: 80%; /* Adjust the positioning based on your needs */
        transform: translate(-45%, -50%);
    }
    .banner{
        height: 450px;
        display: block;
        position: relative;
        justify-content: space-around;
        margin: auto;
        align-items: center;
        background: linear-gradient(cyan,rgb(134, 125, 125));
        box-shadow: 10px 10px 0px gray;
        border-radius: 10px;
        padding: 20px;
    }
    .doctor-details-container{
        width: 90%;
        margin: auto;
        padding: 20px;
        
    }
    /* Additional styles for small devices can be added as needed */
  }