*{margin:0;color:#000;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;-webkit-tap-highlight-color:transparent}.gradient-highlight{background:linear-gradient(to right,#3a47d5,#00d2ff);-webkit-background-clip:text;background-clip:text;color:transparent}#scrollArrow{position:fixed;z-index:3;right:20px;bottom:20px;background:transparent;border:none;cursor:pointer}#scrollArrow>img{width:40px;transition:transform .3s}#scrollArrow>img:hover{transform:scale(1.2)}.btn-1{text-decoration:none;background:linear-gradient(to right,#6d76db,#00d2ff);color:#fff;padding:10px 20px 14px;display:inline-block;margin-top:10px;border-radius:10px;text-align:center;transition:all .4s ease-in-out}.btn-1:hover{filter:brightness(1.2)}.btn-2{border:none;cursor:pointer;font-size:16px;font-weight:500}.error-msg{font-weight:500;display:block;color:red;font-size:13px;height:20px}.error-msg-2{text-align:center;padding-top:10px}.no-data{margin-top:30px;text-align:center;color:#789;font-weight:500}.have-question{text-align:center;justify-self:center;margin:40px 20px 0}.have-question>i{font-size:40px;padding:10px}.have-question>p{max-width:600px;padding:20px 0;color:#789}.popup-overlay{position:fixed;inset:0;background-color:#0006;display:flex;justify-content:center;align-items:center;z-index:1000}.popup-alert{background:#fff;padding:30px;border-radius:10px;width:400px;animation:popupSlide .6s ease}@keyframes popupSlide{0%{opacity:0;transform:scale(.5)}50%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.popup-alert.success{border-left:6px solid #22c55e;border-right:6px solid #22c55e}.popup-alert.error{border-left:6px solid #ef4444;border-right:6px solid #ef4444}.popup-icon{width:50px;height:50px;border-radius:50%;display:flex;justify-self:center;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:30px}.popup-alert.success .popup-icon{background:#22c55e}.popup-alert.error .popup-icon{background:#ef4444}.popup-message{justify-self:center;text-align:;padding-top:20px;font-weight:500;color:#789}.nav-section{display:flex;justify-content:space-between;align-items:center;height:9vh;background-color:#fff;padding:0 95px;border-bottom:2px solid #ebebeb;position:fixed;top:0;left:0;right:0;z-index:1000}.logo{display:flex;column-gap:10px;text-decoration:none;font-size:25px;justify-self:center}.logo img{width:40px}.nav-right{display:flex;align-items:center;gap:20px}.nav-top a{text-decoration:none;font-size:20px;margin-left:40px;display:inline-block;transition:color .6s ease,transform .4s ease}.nav-top a:hover{color:#0d6efd;transform:scale(1.1)}.menu{display:none;flex-direction:column;width:35px;gap:6px;cursor:pointer;transition:transform .3s ease}.menu div{height:4px;background:linear-gradient(to right,#3a47d5,#00d2ff);border-radius:6px;transition:transform .3s ease}.menu:hover,.menu div:hover{transform:rotate(360deg)}.navbar-login-btn{background:linear-gradient(to right,#6d76db,#00d2ff);padding:6px 12px 12px;color:#fff;border-radius:10px;text-decoration:none}.navbar-login-btn:hover{color:#fff!important}.profile-menu{position:relative}.profile-btn{background:none;border:none;cursor:pointer;padding:8px;border-radius:50px;transition:background-color .3s ease}.profile-btn:hover{background-color:#f5f5f5}.user-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#3a47d5,#00d2ff);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px;transition:transform .3s ease}.profile-btn:hover .user-avatar{transform:scale(1.05)}.dropdown{position:absolute;top:62px;right:0;background:#fff;border:1px solid #ebebeb;border-radius:8px;display:flex;flex-direction:column;min-width:150px;z-index:999}.dropdown a{padding:7px 10px;text-decoration:none;transition:color .6s ease}.logout-btn{background:none;border:none;padding:7px 10px;text-align:left;cursor:pointer;font-size:16px;transition:color .6s ease}.dropdown a:hover,.logout-btn:hover{color:#0d6efd}@media screen and (max-width:900px){.nav-section{padding:0 40px}.nav-top a{margin-left:20px}}@media screen and (max-width:690px){.menu{display:flex}.nav-top{display:none;flex-direction:column;background-color:#fff;border-top:2px solid lightgray;position:absolute;top:62px;right:0;width:100%}.nav-top.show{display:flex}.nav-top a{text-align:center;padding:10px;margin:0;border-bottom:1px solid lightgray}.nav-top a:last-child{border-bottom:none}}@media screen and (max-width:400px){.nav-section{padding:0 18px}.logo{font-size:18px}.logo img{width:35px}}.footer-section{margin-top:60px;padding:50px 20px;display:flex;justify-content:space-evenly;gap:20px;background-color:#202942}.footer-intro{max-width:400px}.footer-intro p{margin-top:10px;color:#789}.nav-bottom a{color:#789;display:block;text-decoration:none;margin:13px 0;width:fit-content;transition:color .4s ease-in-out}.footer-contact-item{display:flex;gap:8px;margin:13px 0;color:#789;align-items:center}.footer-contact-item i{font-size:18px;color:#789}.footer-contact-item a{text-decoration:none;color:#789;transition:color .4s ease-in-out}.social-media-icons a i{color:#789;font-size:25px;margin-top:10px;margin-left:16px;text-align:start;transition:color .4s ease-in-out}.nav-bottom a:hover,.footer-contact-item a:hover,.social-media-icons a i:hover{color:#fff}.footer-copyright{background-color:#202942}.footer-copyright hr{width:90%;justify-self:center;border:1px solid lightslategray}.footer-copyright p{padding:25px 5px;color:#789;text-align:center;font-size:12px}@media screen and (max-width:540px){.footer-section{display:block;justify-items:center;text-align:center;padding:50px 10px}.footer-intro{max-width:500px}.footer-company{margin-top:30px}.nav-bottom{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}.footer-contact-info{text-align:start}.footer-copyright hr{width:80%}}.home{position:relative;justify-items:center}.home-background-img{background:linear-gradient(#3c4858b3),url(/Healthcare-Appointment-Management-System-React/assets/home-intro-image-qxPpfzyV.jpg) no-repeat top center/cover;height:70vh;width:100%}.intro{position:absolute;top:200px;text-align:center;margin:0 20px}.intro p{max-width:600px;padding:20px 0 30px;color:#fff}.benefits{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}.specialties-showcase{padding:50px 30px 0;text-align:center}.specialties-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-bottom:30px}.specialty-card:hover .hover-btn{transform:translateY(-5px)}.hover-btn{transition:all .4s ease}.steps-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}.steps-card{max-width:500px;justify-self:center;padding:30px;background:#fff;border-radius:10px;box-shadow:0 5px 20px #00000014;transition:transform .3s ease,box-shadow .3s ease}.steps-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px #00000026}.how-we-works,.benefits-section{margin-top:50px;padding:50px 30px;background-color:#f8f9fa;text-align:center}.how-we-works>p,.specialties-showcase>p{color:#789;padding:10px 0 30px}.specialty-card,.benefit-card{padding:20px;border:1px solid #ebebeb;border-radius:10px;transition:all .5s ease}.specialty-card:hover,.benefit-card:hover{transform:translateY(-10px);border-color:#00d2ff;background-color:#00d0ff20}.steps-card i,.specialty-card i,.benefit-card i{font-size:40px;padding:10px}.steps-card h3,.specialty-card h3,.benefit-card h3{font-weight:600}.steps-card p,.specialty-card p,.benefit-card p{color:#789;padding:10px}@media screen and (max-width:370px){.intro{top:130px}.intro h1{font-size:24px}.how-we-works,.benefits-section{padding:50px 10px}.specialties-showcase{padding:50px 10px 0}.steps-container,.specialties-grid,.benefits{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.steps-card,.specialty-card,.benefit-card{padding:10px 0}.steps-card p,.specialty-card p,.benefit-card p{font-size:14px}}.doctor-card{padding:12px;border-radius:20px;border:1px solid #ebebeb;max-width:300px;width:90%;margin:0 auto;transition:all .5s ease}.doctor-card:hover{transform:translateY(-10px);border-color:#00d2ff;background-color:#00d0ff20}.doctor-image{width:100%;height:200px;object-fit:cover;display:block;justify-self:center;border-radius:20px 20px 0 0;transition:all .5s ease}.doctor-card:hover .doctor-image{transform:scale(.97)}.doctor-info{padding:10px}.doctor-info>h3,.doctor-info>p{font-weight:500;padding-bottom:5px}.doctor-qualifications span{padding-left:10px;color:#789}.btn-doctor-card{display:block;transition:all .5s ease}.doctor-card:hover .btn-doctor-card{transform:translateY(-5px)}.about-us{position:relative;justify-items:center}.about-background-img{background:linear-gradient(#3c4858b3),url(/Healthcare-Appointment-Management-System-React/assets/about-intro-image-DWDataQi.png) no-repeat center center/cover;height:50vh;width:100%}.about-intro{position:absolute;top:200px}.about-section{display:grid;grid-template-columns:auto auto;gap:30px;padding:50px 20px 0}.about-image{max-width:450px;min-width:300px;justify-self:center}.about-image>img{width:100%}.about-content{max-width:600px;min-width:300px;align-content:center}.about-content>h2{margin-bottom:30px}.about-content>p{margin-bottom:20px;color:#789}.company-values{display:flex;max-width:100%;justify-content:space-evenly;gap:20px;padding:50px 20px;margin-top:50px;background-color:#f8f9fa}.value-box{max-width:300px}.value-box h3{padding-bottom:10px}.value-box p{color:#789}.doctors-section{padding:50px 100px 0}.doctors-section>h1{text-align:center}.doctors-grid{margin:20px 0 40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.doctors-section>a{display:block;justify-self:center}@media screen and (max-width:1010px){.doctors-section{padding:50px 50px 0}}@media screen and (max-width:670px){.about-section{display:block;text-align:center}.about-content{margin-top:20px}.about-content>h2{margin-bottom:20px}.about-content>p{margin-bottom:10px}}@media screen and (max-width:500px){.about-image,.about-content{min-width:230px}.company-values{display:block;text-align:center;justify-items:center;padding-bottom:30px}.value-box{padding-bottom:20px}.doctors-section{padding:50px 10px 0}}.our-doctors{position:relative;justify-items:center}.doctors-background-img{background:linear-gradient(#3c4858b3),url(/Healthcare-Appointment-Management-System-React/assets/doctors-intro-image-BTiVXzFu.jpg) no-repeat top center/cover;height:50vh;width:100%}.doctors-intro{position:absolute;top:200px}.filter-container{padding:50px 20px 0;justify-self:center;position:relative;width:100%;max-width:400px;margin:0 auto;box-sizing:border-box}.dropdown-selected{padding:20px 40px;width:100%;border-radius:12px;font-size:18px;font-weight:500;cursor:pointer;background-color:#00d0ff20;border:2px solid #00d0ff20;display:flex;justify-content:space-between;align-items:center;box-sizing:border-box}.dropdown-selected>i{transition:transform .6s ease}.dropdown-selected.open i{transform:rotate(180deg)}.dropdown-list{list-style-type:none;padding-left:0;margin-top:8px;border:1px solid #ebebeb;border-radius:10px;overflow:hidden;box-shadow:0 4px 12px #00000014;position:absolute;background-color:#fff;left:10px;right:10px;width:auto;z-index:10}.dropdown-item{padding:15px 20px;cursor:pointer;border-bottom:1px solid #ebebeb}.dropdown-item:last-child{border-bottom:none}.dropdown-item.selected{background-color:#00d0ff20;color:#00a1ff;font-weight:500}.dropdown-item:hover{background-color:#00d0ff20}.our-doctors-grid{padding:20px 100px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.load-more-btn{font-size:16px;cursor:pointer;border:none;display:block;justify-self:center;margin-top:30px}@media screen and (max-width:1010px){.our-doctors-grid{padding:20px 50px 0}}@media screen and (max-width:500px){.our-doctors-grid{padding:20px 10px 0}}.slot-selection{margin-top:20px}.slot-selection>p{font-weight:500;padding-bottom:10px}.slot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:10px}.slot-btn{border:2px solid #ebebeb;background-color:#fff;color:#789;border-radius:8px;cursor:pointer;font-size:15px;padding:10px}.slot-btn.selected{background-color:#00d0ff20;border-color:#00d0ff20;color:#00a1ff;font-weight:500}.doctor-profile-section{padding-top:100px;width:85%;justify-self:center}.doctor-header{justify-self:center;padding:30px;box-shadow:0 0 20px #ebebeb;border-radius:15px;display:flex;gap:50px}.doctor-header>img{width:200px;height:180px;object-fit:cover;border-radius:15px;border:5px solid #00d0ff20}.doctor-basic-info{display:flex;flex-direction:column;row-gap:15px;justify-content:center}.doctor-basic-info>h1{font-weight:500}.doctor-basic-info>p{color:#789}.profile-content{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:30px}.left-column{display:flex;flex-direction:column;gap:30px}.quick-info-section{padding-top:20px}.appointment-fee-section>p{font-size:32px;justify-self:center;padding-top:10px}.booking-error{padding-top:4px}.book-appointment-btn{display:block;justify-self:center;margin-top:15px}.booking-note{background-color:#00d0ff20;padding:12px;border-radius:20px;text-align:center;margin-top:15px}.doctor-experience>span,.info-item>span,.booking-note>span{padding-left:10px;color:#789;font-size:14px}.doctor-about-section,.appointment-fee-section,.booking-section{box-shadow:0 0 20px #ebebeb;border-radius:15px;padding:20px 30px 30px}.doctor-about-section>h2,.booking-section>h2,.appointment-fee-section>h2{font-weight:500;border-bottom:2px solid #ebebeb;padding-bottom:5px}.doctor-about-section>p,.booking-section>p{color:#789;padding-top:10px}@media screen and (max-width:730px){.doctor-profile-section{width:90%}.doctor-header{justify-self:auto;padding:20px;gap:20px}.doctor-basic-info>h1{font-size:26px}.profile-content{gap:20px}.doctor-about-section,.appointment-fee-section,.booking-section{padding:20px 20px 30px}}@media screen and (max-width:570px){.doctor-profile-section{width:93%}.doctor-header{justify-self:center;text-align:center;flex-direction:column;align-items:center}.doctor-basic-info>h1{font-size:24px}.profile-content{grid-template-columns:1fr}}.form-section{max-width:600px;margin:0 auto;text-align:center;padding:50px 30px 0}.contact-form{box-shadow:0 0 8px #ebebeb;border-radius:15px;padding:20px 20px 30px}.contact-form>h1{font-weight:500;padding-bottom:20px}.input-group{width:90%;justify-self:center}.input-group>textarea{box-sizing:border-box;width:100%;padding:15px;border-radius:15px;font-size:16px;border:2px solid #ebebeb;outline:none;resize:none}.input-group>textarea:focus{border-bottom:2px solid #00d2ff}@media screen and (max-width:400px){.form-section{padding:50px 10px 0}.contact-form{padding:10px 0 20px}}.inputField-group{width:90%;justify-self:center}.inputField-label{display:block;text-align:start;margin-bottom:4px;font-size:15px}.inputField-wrapper{position:relative;display:flex;align-items:center}.inputField-eye-btn{position:absolute;right:10px;background:none;border:none;cursor:pointer;display:flex;align-items:center}.inputField-box{box-sizing:border-box;width:100%;padding:10px;border-radius:10px;border:2px solid #ebebeb;outline:none;resize:none}.inputField-box:focus{border-bottom:2px solid #00d2ff}.contact-us{position:relative;justify-items:center}.contact-background-img{background:linear-gradient(#3c4858b3),url(/Healthcare-Appointment-Management-System-React/assets/contact-us-intro-image-DdgHtu4u.jpg) no-repeat center center/cover;height:50vh;width:100%}.contact-intro{position:absolute;top:200px}.contact-details{padding-top:30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px;justify-items:center}.contact-item{max-width:160px}.contact-item>i{font-size:40px;padding:20px}.contact-item>h3{font-weight:500;padding-bottom:10px}.contact-item>p{color:#789;font-size:15px}.contact-item>a{text-decoration:none;font-size:15px;color:#789;transition:color .4s ease}.contact-item>a:hover{color:#0d6efd}.map-container{padding-top:30px}.contact-info-section,.map-section{padding-top:50px;text-align:center}.contact-info-section>p,.map-section>p{color:#789}.contact-info-section>h1,.map-section>h1{font-weight:500}.auth-section{max-width:400px;margin:0 auto;text-align:center;height:90vh;padding:50px 30px 0;align-content:center}.auth-form{border:2px solid #ebebeb;border-radius:15px;padding:20px 20px 30px}.auth-form>h2{font-weight:500}.auth-subtitle{color:#789;padding-bottom:20px;font-size:14px}.auth-btn{width:50%}.auth-redirect{color:#789;font-size:14px}.auth-redirect>a{font-weight:500;color:transparent}@media screen and (max-width:400px){.auth-section{padding:50px 10px 0}.auth-form{padding:10px 0 20px}}.my-appointments{padding-top:100px;width:90%;justify-self:center}.my-appointments>h2{border-bottom:2px solid #ebebeb;padding-bottom:6px;font-weight:500}.no-appointments{margin-top:30px;text-align:center;color:#789;font-weight:500}.appointments-container{display:flex;justify-content:space-between;gap:10px;align-items:center;border-bottom:2px solid #ebebeb;padding:15px 0 20px}.appointment-card{display:flex;gap:20px}.appointment-card>img{width:160px;border-radius:10px}.appointment-details{width:210px;height:fit-content;align-self:center}.appointment-details>h3{font-weight:500;padding-bottom:6px}.appointment-details>p{color:#789;font-size:14px;padding-bottom:4px}.cancel-btn{background:linear-gradient(to right,#fff,#fff);min-width:145px;color:#696969;font-size:14px;border:1px solid #778899}.cancel-btn:hover{filter:brightness(1)}.cancel-btn.cancelled{color:red;border:1px solid #ff0000}.cancel-btn.completed{color:#00b09b;border:1px solid #00b09b}@media screen and (max-width:620px){.my-appointments>h2{text-align:center}.appointment-card{gap:10px;flex-wrap:wrap}}@media screen and (max-width:420px){.appointments-container{gap:0px;flex-wrap:wrap;justify-content:center}.appointment-card{justify-content:center}.appointment-details>h3{text-align:center}}.mp-section{max-width:600px;margin:70px auto;padding:30px}.mp-container{border:2px solid #ebebeb;border-radius:15px;padding:30px 20px}.mp-top{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.mp-avatar-wrap{position:relative;width:100px;height:100px;flex-shrink:0}.mp-avatar{width:100%;height:100%;border-radius:12%;border:2px solid #ebebeb;overflow:hidden}.mp-avatar img{width:100%;height:100%;object-fit:cover}.mp-camera-btn{position:absolute;bottom:0;right:0;width:24px;height:24px;border-radius:50%;border:2px solid white;background:#ebebeb;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .3s}.mp-camera-btn:hover{background:#95bcf6}.mp-identity{flex:1}.mp-identity h2{margin:0 0 5px;font-weight:500;font-size:18px}.mp-badge{font-size:11px;background:#0d6efd15;color:#0d6efd;border-radius:20px;padding:2px 10px;font-weight:500;letter-spacing:.4px}.mp-edit-btn,.mp-save-btn{padding:7px 18px;font-weight:400}.mp-btn-group{margin-left:auto;display:flex;gap:8px}.mp-cancel-btn{background:none;border:2px solid #ebebeb;padding:7px 14px;font-weight:400;color:#789}.mp-cancel-btn:hover{border-color:#aaa}.mp-divider{border-top:2px solid #ebebeb;margin:20px 0 8px}.mp-row{width:90%;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid #f0f0f0;gap:12px}.mp-row:last-child{border-bottom:none}.mp-label{color:#aaa}.mp-field-spacing{height:20px;display:block}