@import url('https://fonts.googleapis.com/css2?family=Poppins');
@import url('https://fonts.googleapis.com/css2?family=Inter');
@import url('https://fonts.googleapis.com/css2?family=Montserrat');


@media only screen and (max-device-width : 780px){
    *{  
        margin: 0;
        padding: 0;
        border: none;
        box-sizing: border-box;
    }
    :root{
        --blue:#2196F3;
        --lightgray:#BDBDBD;
        --darkgray:#424242;
        --white:#ffffff;        
        --orange: #FFCC80; 
        --green: #66BB6A;
        --lightred:#EF9A9A;
        --red:#EF5350;
        --smaller:.8vw;
        --small: 1vw;
        --medium: 2vw;
        --large: 4vw;
        --larger: 5vw;
    }
    html {
        scroll-behavior: smooth;  
    }
    section{
        height: 100vh;
        max-width: 100vw;
    }
    body{
        position: absolute;
        font-family: 'Poppins', Arial, Helvetica, sans-serif;    
        background: rgb(175,221,255);
        background: linear-gradient(231deg, rgba(175,221,255,1) 0%, rgba(255,255,255,1) 40%);
        background-repeat: no-repeat;
        background-attachment: fixed;
        transition: all ease .3s;
        max-width: 100vw;
        overflow-x: hidden;
    }
    body::-webkit-scrollbar{
        display: none;
    }
    .spinner div{
        margin-bottom: 2.2vw;
    }
    .header {
        width: 100vw;
        position: absolute;
        position: fixed;
        top: 0;
        left: 0;
        justify-content: space-between;
    }
    #home{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .spinner span img{
        width: 12vh;
    }
    .cookieHolder{
        width: 100vw;
        padding: 0 1vw;
    }
    .cookieHolder span{
        padding: 0 1vw 0 0;
        font-size: var(--medium);
    }
    .cookieHolder button{
        font-size: var(--medium);
        border-radius: .5vw;
    }
    #text1{
        font-size: 4vh;
    }
    #text2{
        font-size: 5vh;
    }
    #text3{
        width: 70%;
        font-size: 2vh;
    }
    .choice{
        width: 50%;
    }
    #services,#aboutUs{
        padding-top: 15vh;
    }
    #register, #bookButton,#registerResponsive{
        height: 4vh;
        font-size: 1.7vh;
        border-radius: .5vw;
    }
    .totalContainer{
        width: 80%;
    }
    .totalAndIcon i{
        width: 3vw;
        height: 3vw;
        font-size: 1.5vh;
    }
    .totalAndIcon span{
        font-size: 3vh;
    }
    .totalHolderLabel{
        font-size: 1.6vh;
    }
    #clinicTitle span{
        font-size: var(--large);
    }
    .searchBar input{
        width: 25vw;
        height: 3vh;
    }
    .searchBar i {
        font-size: var(--medium);
    }
    .searchBar button{
        width: 90%;
        height: 80%;
        height: 3vh;
        padding: 0 2vw;
        font-size: var(--medium);
        border-radius: .3vw;
        margin-right: 1.5vw;
    }
    .clinicHolder{
        width: calc(100%/3);
        height: fit-content;
    }
    .imageHolderClinic{
        width: 100%;
        height: 10vh;
        margin-bottom: .5vh;
    }
    .imageHolderClinic img{
        width: 100%;
        flex-shrink: 1;
    }
    .clinicName{
        height: fit-content;
        font-size: var(--medium);
        padding-left: .5vh;
        margin-bottom: .1vh;
    }
    .locationHolder{
        min-height: 2vh;
        max-height: fit-content;
        padding-left: .5vh;
    }
    .locationHolder i{
        margin-right: .5vh;
        font-size: var(--medium);
    }
    .locationHolder #location {
        font-size: 1vh;
    }
    .no-data-found img{
        width: 70vw;
    }
    .weDo #t3{
        margin-bottom: 5vh;
    }
    .servicesContainer{
        width: 100%;
        height: 80%;
        overflow: scroll;
        padding: 0 1vw;
    }
    .servicesInitial{
        width: calc(100%/3);
        height: 20vh;
        margin: 1vw ;
    }
    .servicesEach i{
        font-size:4vh;
        padding: 3vh 0 0;
    }
    .servicesEach:hover .servicesTitleandDescription{
        z-index: 20;
        bottom: 0;
    }
    .servicesEach:hover i {
        display: none;
    }
    .servicesTitleandDescription{
        bottom: -7vh;
    }
    .servicesTitleandDescriptionBG{
        width: 100%;
        height: 10vh;
        margin: 0;
    }
    .servicesTitle{
        border: none;
        font-size: 1.8vh;
    }
    .servicesDescription{
        height: 7vh;
    }
    .personnel{
        width: 100%;
        padding: 2vw;
    }
    .personContainer{
        width: calc(100%/3);
        height: 20vh;
        padding: .5vw;
    }
    .personnelContainer{
        padding: 1vh;
    }
    .imgContainer{
        width: 8vh;
        height: 8vh;
        border-radius: 50%;
    }
    .personnelRole{
        font-size: 1.2vh;
    }
    .personnelRole,.personnelName{
        width: 100%;
        height: 3vh;
    }
    .contactContainer{
        background: none;
    }
    .get{
        margin-bottom: 3vh;
        font-size: 3vh;
    }
    .contactForm{
        width: 80vw;
        height: 53vh;
        margin-left: 15vw;
    }
    .contactForm form{
        padding: 1vw 1vw 0 7vw;
    }
    .contactDetails{
        left: 3vw;
        top: 30vh;
        width: 25vw;
        height: fit-content;
    }
    .contacts{
        width: 23vw;
        height: 20vw;
        margin-bottom: .5vh;
    }
    .contacts span{
        font-size: var(--medium);
    }
    .contacts i {
        margin-bottom: 1vw;
    }
    .contactForm #contactFormTitle{
        font-size: 2.5vh;
    }
    .input{
        height: 5vh;
    }
    .input input{
        height: 70%;
        font-size: 1vh;
    }
    .input label{
        font-size: 1vh;
        width: 12vw;
        color: var(--lightgray);
    }
    .input input:valid ~ label, .input input:hover ~ label, .input input:focus ~ label{
        width: 12vw;
        transform: translateY(-1.3vh);
        font-size: 1vh;
    }
    .input textarea{
        font-size: 1vh;
    }
    .input textarea::placeholder{
        text-indent: .6vw;
        font-size: 1vh;
        color: var(--darkgray);
    }
    .contactForm button{
        height: 4vh;
        border-radius: .3vh;
        font-size: 1.1vh;
    }
    .form-container{
        border-radius: 1vw;
        position: absolute;
        width: 80%;
        height: 90%;
        box-shadow: 0px 0px 1px rgba(3, 7, 18, 0.08),
        0px 0px 4px rgba(3, 7, 18, 0.06),
        0px 1px 9px rgba(3, 7, 18, 0.05),
        0px 2px 15px rgba(3, 7, 18, 0.03),
        0px 3px 24px rgba(3, 7, 18, 0.02);
        padding: 1vh;
    }
    .overlay-container{
        display: none;
    }
    .container.active, .containerAdmin.active,.containerOTP.active{
        left: 0;
        width: 100vw;
        height: 60vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: none;
        backdrop-filter: none   ;
        box-shadow: none;
    }
    .sign-in-container{
        left: unset;
        z-index: 2;
    }
    .sign-up-container{
        left: unset;
        opacity: 0;
        z-index: 1;
        padding-bottom: 5vh;
    }
    .container.right-panel-active .sign-in-container{
        transform: translateX(0%);
        opacity: 0;
    }
    .container.right-panel-active .sign-up-container{
        transform: translateX(0%);
        opacity: 1;
        z-index: 5;
    }
    .containerOTP.right-panel-active .sign-up-container{
        transform: translateX(0%);
        opacity: 1;
        z-index: 5;
    }
    .containerAdmin .logo,.container .logo,.containerOTP .logo{
        top: 3vh;
        width: 20vw;
    }
    .overlay-left span{
        z-index: 90;
        right: 8vw;
    }
    .overlay-right span{
        z-index: 90;
        right: 8vw;
    }
    .overlay-panel {
        display: none;
    }
    .container h1,.containerAdmin h1{
        margin: 0;
        font-size: 3vh; 
    }
    .responsiveButtons{
        display: block;
        bottom: 3vh;
        font-size: 1.5vh;
    }
    .inputContent{
        position: relative;
        height: 8vh;
    }
    .inputContent .fa-circle-check {
        font-size: 1.5vh;
        margin-top: 3.2vh ;
        right: 4vh ;
    }
    .inputContent .fa-exclamation-circle{
        font-size: 1.5vh;
        margin-top: 3.2vh ;
        right: 2.9vh ;
    }
    .inputContent label{
        width: 90%;
        height: fit-content;
        font-size: 1.2vh;
        padding: 0;
    }
    .inputContent .input{
        height: 4vh;
        border-radius: .3vh;
        letter-spacing: .05vh;
        font-size: 1.3vh;
    }
    .errorMessage{
        font-size: 1.1vh;
    }
    .forgot{
        width: 87%;
        margin-top: 1vh;
    }
    .forgot a{
        font-size: 1.3vh;
    }
    .container1{
        width: fit-content;
        font-size: 1.3vh;
    }
    .container1 span{
        margin-left: 1vw;
        width: fit-content;
    }
    .buttonContainer{
        height: 9vh;
        bottom: 6vh;
    }
    .container .btn, .containerAdmin .btn{
        height: 4vh;
        font-size: 1.5vh;
        border-radius: .3vh;
    }
    .googleBtn{
        height: 4vh;
        font-size: 1.1vh;
        border-radius: .3vh;
    }
    .terms{
        font-size: 1.3vh;
    }
    .container .btnMain{
        height: 4vh;
        font-size: 1vh;
        border-radius: .3vh;
    }
    .optionsGrp{
        bottom: 4vh;
    }
    .optionsGrp i{
        font-size: 3vh;
    }
    .optionsGrp span{
        font-size: 1.5vh;
    }
    .optionsGrp img{
        width: 3.8vh;
        border-radius: 50%;
    }
    .navBarCheck{
        display: block;
        font-size: 4vh;
        z-index: 99;
    }
    .ul{
        right: -1.2vh;
        top: -1vh;
        display: none;
    }
    .ul.responsive{
        display: flex;
        flex-direction: column;
        justify-content: unset;
        background-color: var(--blue);
        width: 70vw;
        position: absolute;
        position: fixed;
        top: 0;
        right: -1.2vh;
        height: 100vh;
        z-index: 97;
        padding-top: 10vh;
    }
    .ul.responsive li{
        width: 100%;
        height: 10vh;
        transition: all ease .3s;
    }
    .ul.responsive a {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2vh; 
        color: var(--white);
    }
    .activeSection,.ul.responsive li:hover{
        width: 100%;
        height: 10vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(173, 216, 230, 0.527);
        font-weight: 100;
    }
    #login{
        width: 15vw;
        font-size: 1.5vh;
        right: 6vh;
        z-index: 90;
    }
    #register{
        display: none;
    }
    #registerResponsive{
        display: block;
    }
    .termsHolder-show{
        padding: 1vh;
        top: 17%;
        width: 70%;
        height: 50vh;
        right: 15vw;
    }
    .termsHolder-show span{
        font-size: 2vh;
    }
    .termsHolder-show span i{
        font-size: 1vh;
    }
    .termsConditions{
        font-size: 1vh;
    }
    #termsAndConditions1{
        margin-left: 2vw;
        font-size: 1vh;
        transition: ease 0.3s;
        cursor: pointer;
    }
    .otpHold{
        font-size: 1.2vh;

    }
    #otpText{
        font-size: 2vh;
    }
    .containerOTP .inputContent .input{
        height: 5vh;
        font-size: 2vh;
        letter-spacing: .8vw;
        font-weight: bolder;
        text-align: center;
    }
    .resendOTP{
        color: var(--darkgray);
        font-size: 1.2vh;
    }
    .containerOTP #verifyEmail{
        position: absolute;
        bottom: 10vh;
        width: 60%;
        height: 5vh;
        border: solid .1vw var(--blue);
        border-radius: .4vw;
        font-size: 1vh;
        letter-spacing: .05vw;
        background: rgb(0,123,213);
        background: linear-gradient(94deg, rgba(0,123,213,1) 0%, rgba(13,153,255,1) 83%);
        color: var(--white);
        transition: all ease .3s;
    }
    .containerOTP #editEmail{
        position: absolute;
        bottom: 4vh;
        width: 60%;
        height: 5vh;
        border: solid .1vw var(--blue);
        border-radius: .4vw;
        font-size: 1vh;
        letter-spacing: .05vw;
        background: rgb(0,123,213);
        background: linear-gradient(94deg, rgba(0,123,213,1) 0%, rgba(13,153,255,1) 83%);
        color: var(--white);
        transition: all ease .3s;
    }
    footer{
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 20vh;
        background-color: var(--white);
        padding-top: 1vh;
    }
    .footerSection{
        width: 50%;
    }
    .footerSection img{
        width: 30vw;
    }
    .textHolderFooter a{
        font-size: 1.4vh;
    }
}
@media screen and (max-width:961px) {
    *{  
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    :root{
        --blue:#2196F3;
        --lightgray:#BDBDBD;
        --darkgray:#424242;
        --white:#ffffff;        
        --orange: #FFCC80; 
        --green: #66BB6A;
        --lightred:#EF9A9A;
        --red:#EF5350;
        --smaller:.8vw;
        --small: 1vw;
        --medium: 2vw;
        --large: 4vw;
        --larger: 5vw;
    }
    html {
        scroll-behavior: smooth;
    }
    section{
        width: 100vw;
        height: 100vh;
    }
    body{
        font-family: 'Poppins', Arial, Helvetica, sans-serif;    
        background: rgb(175,221,255);
        background: linear-gradient(231deg, rgba(175,221,255,1) 0%, rgba(255,255,255,1) 40%);
        background-repeat: no-repeat;
        background-attachment: fixed;
        transition: all ease .3s;
    }
    
  }