/*global-css-start*/
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

body {
   font-size: 16px;
   font-weight: 500;
   color: #000;
   background-color: #fff;
   scroll-behavior: smooth;
   font-family: "Plus Jakarta Sans", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
   color: #2F2E2E;
   font-weight: 700;
}

strong {
   font-weight: 800;
   color: #000;
}

a {
   text-decoration: none !important;
   -webkit-transition: all 0.2s;
   transition: all 0.2s;
   color: #000;
   font-weight: 400;
}

a:hover, a:focus {
   text-decoration: none;
   outline: none;
   cursor: pointer;
   color: auto;
}

.btn.focus, .btn:focus {
   outline: 0;
   box-shadow: none;
}

button {
   color: inherit;
   border: none;
   background-color: transparent;
}

p {
   margin-bottom: 0.5rem;
   font-size: 16px;
   font-weight: 400;
   color: #6B7280;
   line-height: 30px;
}

ul, li {
   margin: 0;
   padding: 0;
   list-style-type: none !important;
}

ul {
   padding-left: 0 !important;
}

hr {
   background-color: #D0D0D0 !important;
   opacity: 1;
   border-color: #D0D0D0 !important;
}

.form-select:focus, .form-control:focus {
   box-shadow: none !important;
   border-color: #ccc;
}

.dropdown-item:focus, .dropdown-item:hover {
   background-color: inherit;
   color: inherit;
}

label {
   margin-bottom: 5px;
}

textarea {
   resize: none;
}

input:focus, button:focus, textarea:focus {
   outline: none;
   box-shadow: none;
}

img {
   max-width: 100%;
   height: auto;
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

input[type=number] {
   -moz-appearance: textfield;
}

.img-40 {
   width: 40px;
   height: 40px;
}

.img-80 {
   width: 80px;
   height: 80px;
   background-color: #ccc;
}

.fz-14 {
   font-size: 14px !important;
}

.fz-16 {
   font-size: 16px !important;
}

.fz-18 {
   font-size: 18px !important;
}

.fz-20 {
   font-size: 20px !important;
}

.fz-22 {
   font-size: 22px !important;
}

.fz-24 {
   font-size: 24px !important;
}

.fz-26 {
   font-size: 26px !important;
}

.fz-28 {
   font-size: 28px !important;
}

.fz-30 {
   font-size: 30px !important;
}

.fw-300 {
   font-weight: 300 !important;
}

.fw-400 {
   font-weight: 400 !important;
}

.fw-500 {
   font-weight: 500 !important;
}

.fw-600 {
   font-weight: 600 !important;
}

.fw-700 {
   font-weight: 700 !important;
}

.fw-800 {
   font-weight: 800 !important;
}

.decoration {
   text-decoration: underline !important;
}

.tp-space {
   padding-top: 40px;
   padding-bottom: 40px;
}

.btn-close {
   background-image: none;
   padding: 0 !important;
   box-shadow: none !important;
   opacity: 1 !important;
}

.cards {
   background: #fff;
   border: 1px solid #C0D4FB;
   border-radius: 10px;
   margin-bottom: 15px;
}

.cards-header {
   padding: 10px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid #C0D4FB;
   margin-bottom: 10px;
}

.cards-body {
   padding: 15px;
}

.form-check {
   vertical-align: middle;
   margin-bottom: 10px;
}

.form-check .form-check-label {
   margin-bottom: 0;
   cursor: pointer;
}

.custom-frm-bx {
   margin-bottom: 20px;
   position: relative;
}

.custom-frm-bx label {
   font-size: 16px;
   font-weight: 500;
   color: #33384B;
   margin-bottom: 8px;
}

.custom-frm-bx .form-control, .custom-frm-bx .form-select {
   height: 55px;
   border-radius: 10px;
   border-color: #C0D4FB;
   color: #8CA0B8;
   background-color: #FAFAFC;
   font-weight: 500;
}

.custom-frm-bx textarea.form-control {
   height: 100px;
}

.custom-frm-bx .form-control::placeholder {
   color: #8CA0B8;
   opacity: 1;
}

.custom-frm-bx .form-control::-ms-input-placeholder {
   color: #8CA0B8;
}

.custom-frm-bx .icons {
   color: #B2BCC9;
   position: absolute;
   right: 15px;
   top: 50px;
   font-size: 20px;
}

.eye-icon {
   cursor: pointer;
}

.thm-btn {
   padding: 12px 40px;
   background-color: #4285F4;
   color: #fff;
   font-size: 16px;
   font-weight: 600;
   border-radius: 15px;
   text-align: center;
   display: inline-block;
   transition: 0.2s;
}

.thm-btn:hover {
   background-color: #1C2A3A;
   color: #fff;
}

.thm-btn.dark {
   background-color: #1C2A3A;
   color: #fff;
}

.thm-btn.dark:hover {
   background-color: #4285F4;
}

.thm-btn.danger {
   background-color: #EA4335;
   color: #fff;
}

.clr {
   color: #4285F4 !important;
}

.title {
   font-size: 40px;
   font-weight: 700;
   color: #262D27;
   margin-bottom: 10px;
}

.rating {
   font-size: 14px;
   font-weight: 600;
   color: #6B7280;
   margin-bottom: 0;
   line-height: 24px;
}

.rating i.fas {
   color: #FEB052;
}

.rating i.far {
   color: #6B7280;
}

.rating span {
   font-weight: 500;
}

.price {
   font-size: 18px;
   font-weight: 700;
   color: #34A853;
   margin-bottom: 0;
}

.fav-btn {
   display: inline-block;
   height: 25px;
   width: 25px;
   background-color: #1F2A3733;
   color: #fff;
   text-align: center;
   line-height: 25px;
   font-size: 12px;
   border-radius: 25px;
}

.fav-btn.select {
   background-color: #e90023;
}

.subtitle {
   font-size: 20px;
   font-weight: 700;
   color: #1C2A3A;
   margin-bottom: 15px;
}

.badges {
   display: inline-block;
   padding: 6px 13px;
   background-color: #eee;
   color: #6B7280;
   font-size: 16px;
   font-weight: 400;
   border-radius: 25px;
   margin-right: 5px;
   margin-bottom: 5px;
}

/*global-css-end*/

/*user-registration-start*/
.register-sec {
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #F0F5FF;
}

.register-innr {
   background-color: #fff;
}

.register-lft {
   height: 100%;
   position: relative;
   z-index: 999;
}

.register-lft::after {
   position: absolute;
   content: '';
   left: 0;
   right: 0;
   top: 0;
   height: 80%;
   width: 100%;
   background-image: radial-gradient(rgba(255, 255, 255, 0.15) 2px, transparent 2px);
   background-size: 32px 32px;
   background-color: #4285f4;
   border-radius: 0 0 74px 74px;
   z-index: -9;
}

.register-img {
   text-align: center;
   margin-top: 70px;
}

.signup-img.register-img {
   position: absolute;
   bottom: 0;
   left: 60px;
}

.register-frm {
   padding: 20px 50px 20px 50px;
}

.register-frm h3 {
   font-size: 30px;
   font-weight: 700;
   color: #262D27;
   margin-bottom: 0;
}

.register-frm form {
   margin-top: 20px;
}

.frgt-btn {
   display: block;
   text-align: right;
   margin-top: 8px;
   color: #4285F4;
}

.frgt-btn, .register-frm a {
   font-size: 16px;
   font-weight: 600;
}

.frgt-btn:hover {
   text-decoration: underline !important;
}

.or-txt {
   position: relative;
   font-size: 14px;
   color: #6B7280;
   text-align: center;
   z-index: 9;
}

.or-txt::after {
   position: absolute;
   content: '';
   left: 0;
   top: 20px;
   height: 1px;
   width: 100%;
   background-color: #F4F4F6;
   z-index: -9;
}

.or-txt span {
   display: inline-block;
   height: 40px;
   width: 40px;
   line-height: 40px;
   text-align: center;
   background-color: #fff;
   border-radius: 25px;
}

.form-media {
   text-align: center;
}

.form-media a {
   display: inline-block;
   height: 56px;
   width: 56px;
   background-color: #C0D4FB1A;
   line-height: 56px;
   text-align: center;
   border-radius: 50px;
   margin-left: 8px;
   margin-right: 8px;
   transition: 0.3s;
}

.form-media a:hover {
   background-color: #4285F4;
}

.form-media a:hover img {
   filter: brightness(0) invert(1);
}

.otp-bx {
   display: flex;
   column-gap: 8px;
   justify-content: center;
   margin: 40px 0 20px 0;
}

.otp-bx input {
   width: 70px;
   height: 55px;
   border-radius: 20px;
   outline: none;
   background-color: #FAFAFC;
   border: 1px solid #C0D4FB;
   text-align: center;
   font-size: 30px;
   font-weight: 700;
   color: #8CA0B8;
}

.otp-bx input::placeholder {
   color: #8CA0B880;
   opacity: 1;
}

.otp-bx input::-ms-input-placeholder {
   color: #8CA0B880;
}

/*user-registration-end*/

/*=====================================================================
@Template Name: Divanex 
@Developed By: Shawaj Khan
@Number : 9782703084
=====================================================================*/

/*header-css-start*/
.tp-bar {
   background-color: #4285F4;
   padding: 8px 0;
}

.header-media a {
   display: inline-block;
   height: 30px;
   width: 30px;
   text-align: center;
   line-height: 30px;
   background-color: #FFFFFF42;
   color: #fff;
   border-radius: 25px;
   margin-right: 8px;
   position: relative;
   z-index: 9;
}

.header-media a::after {
   position: absolute;
   content: '';
   left: 0;
   bottom: 0;
   height: 0%;
   width: 0%;
   background-color: #013ea5;
   border-radius: 25px;
   z-index: -9;
   transition: 0.3s;
   overflow: hidden;
}

.header-media a:hover::after {
   height: 100%;
   width: 100%;
}

.header-link a {
   display: inline-block;
   color: #fff;
   font-size: 15px;
   font-weight: 500;
}

.theme-header .custom-navbar {
   border-bottom: 1px solid #8CA0B8;
   padding: 0;
}

.theme-header .custom-navbar .navbar-brand img {
   width: 120px;
}

.theme-header .custom-navbar .location-bx p {
   font-size: 14px;
   font-weight: 500;
   color: #6B7280;
   margin-bottom: 0;
}

.theme-header .custom-navbar .location-bx a {
   display: inline-block;
   position: relative;
   font-size: 15px;
   font-weight: 600;
   color: #1C2A3A;
}

.theme-header .custom-navbar .location-bx a::after {
   position: absolute;
   content: '\f078';
   right: -20px;
   top: 2px;
   font-family: "Font Awesome 5 Pro";
   font-size: 14px;
   color: #292D32;
}

.theme-header .custom-navbar .location-bx a i {
   color: #4285F4;
}

.theme-header .custom-navbar .nav-item {
   margin-left: 20px;
   margin-right: 20px;
}

.theme-header .custom-navbar .nav-item .nav-link {
   font-size: 15px;
   font-weight: 600;
   color: #262D27;
   position: relative;
   padding: 0;
}

.theme-header .custom-navbar .nav-item .nav-link::after {
   position: absolute;
   content: '';
   left: 0;
   bottom: -28px;
   height: 2px;
   width: 0%;
   background-color: #4285F4;
   transition: 0.3s;
}

.theme-header .custom-navbar .nav-item .nav-link:hover::after, .theme-header .custom-navbar .nav-item .nav-link.active::after {
   width: 100%;
}

.theme-header .custom-navbar .nav-item .nav-link:hover, .theme-header .custom-navbar .nav-item .nav-link.active {
   color: #4285F4;
}

.theme-header .nav-btn {
   display: flex;
   align-items: center;
   column-gap: 8px;
   margin-left: 20px;
}

.theme-header .nav-btn .search-btn {
   color: #262D27;
   height: 25px;
   width: 25px;
   text-align: center;
   line-height: 25px;
}


.theme-header .nav-btn .dropdown .dropdown-menu {
    border-radius: 0;
    border: 0;
    box-shadow: 0 0.5rem 1rem rgb(204 204 204 / 40%);
    z-index: 9999;
}
.theme-header .nav-btn .dropdown .dropdown-menu .dropdown-item {
    padding: 8px 5px;
    width: 100%;
    color: #262D27;
    font-size: 15px;
    font-weight: 600;
}
.theme-header .nav-btn .dropdown .dropdown-menu .dropdown-item:hover {
    background-color: #4285F4;
    color: #fff;
}

/*header-css-end*/

/*home-page-css-start*/
.hero-sec {
   margin-top: 30px;
}
.hero-sec .owl-nav{
   margin-top: -20px;
}

.hero-sec .hero-item {
   height: 564px;
   position: relative;
   border-radius: 20px;
}

.hero-sec .hero-item img {
   width: 100%;
   height: 100%;
   border-radius: 20px;
}

.hero-item-content {
   position: absolute;
   top: 50%;
   left: 50px;
   transform: translateY(-50%);
   width: 600px;
}

.hero-item-content h2 {
   font-size: 60px;
   font-weight: 600;
   color: #fff;
   margin-bottom: 15px;
}

.hero-item-content p {
   color: #fff;
   font-size: 18px;
}

.hero-slider .owl-prev .arrows, .hero-slider .owl-next .arrows, .testimonial-slider .owl-prev .arrows, .testimonial-slider .owl-next .arrows {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   height: 40px;
   width: 40px;
   text-align: center;
   line-height: 40px;
   border-radius: 50px;
   background-color: #fff;
   box-shadow: 0px 0px 12px 0px #0000001A;
   color: #000;
}

.hero-slider .owl-prev .arrows:hover, .hero-slider .owl-next .arrows:hover, .testimonial-slider .owl-prev .arrows:hover, .testimonial-slider .owl-next .arrows:hover {
   background-color: #4285F4;
   color: #fff;
}

.hero-slider .owl-prev .arrows, .testimonial-slider .owl-prev .arrows {
   left: -20px;
}

.hero-slider .owl-next .arrows, .testimonial-slider .owl-next .arrows {
   right: -20px;
}

.category-list {
   display: flex;
   gap: 46px;
   align-items: center;
   flex-wrap: wrap;
}

.category-list li a {
   display: block;
   text-align: center;
}

.category-list li a h6 {
   font-size: 14px;
   font-weight: 600;
   color: #262D27;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   margin-top: 8px;
}

.category-list li a span {
   display: inline-block;
   height: 100px;
   width: 100px;
   background-color: #4285F4;
   border-radius: 8px;
   overflow: hidden;
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: 0.3s;
}

.category-list li:hover span {
   transform: translateY(-10px);
   background-color: #013ea5;
}

.category-list li a span::after {
   position: absolute;
   content: '';
   left: -20px;
   top: -15px;
   height: 50px;
   width: 50px;
   background-color: #FFFFFF33;
   border-radius: 50px;
}

.service-card {
   padding: 0 20px 20px 20px;
   background-color: #1C2A3A;
   margin-top: 60px;
   border-radius: 10px;
}

.service-card span {
   display: inline-block;
   height: 80px;
   width: 80px;
   text-align: center;
   line-height: 80px;
   background-color: #fff;
   box-shadow: 0px 0px 20px 0px #0000001A;
   border-radius: 10px;
   margin-top: -40px;
   margin-bottom: 20px;
}

.service-card span img {
   height: 58px;
   width: 58px;
   object-fit: contain;
}

.service-card h4 {
   font-size: 20px;
   font-weight: 700;
   color: #C0D4FB;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.service-card p {
   font-size: 16px;
   font-weight: 400;
   color: #C0D4FB;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.doctor-sec {
   background-color: #4285F40D;
}

.doctor-card {
   padding: 10px;
   border: 1px solid #C0D4FB;
   background-color: #FAFAFC;
   border-radius: 10px;
   position: relative;
   margin-bottom: 20px;
}

.doctor-profile {
   display: flex;
   gap: 12px;
   align-items: center;
}

.doctor-img {
   height: 100px;
   width: 100px;
   border-radius: 50%;
}

.doctor-img img {
   height: 100%;
   width: 100%;
   border-radius: 50%;
   object-fit: cover;
}

.doctor-content h4 {
   font-size: 18px;
   font-weight: 700;
   color: #262D27;
   margin-bottom: 0;
}

.doctor-content .doc-cat {
   font-size: 14px;
   font-weight: 400;
   color: #4285F4;
}

.doctor-card .fav-btn {
   position: absolute;
   right: 10px;
   top: 10px;
}

.doctor-card .thm-btn {
   padding: 10px 25px;
}

.hospital-card {
   padding: 10px;
   background: linear-gradient(180deg, rgba(192, 212, 251, 0.26) 0%, #FAFAFC 100%);
   border: 1px solid #C0D4FB;
   border-radius: 10px;
   margin-bottom: 20px;
}

.hospital-img {
   overflow: hidden;
   position: relative;
   border-radius: 10px 10px 0 0;
   margin-bottom: 15px;
}

.hospital-img img {
   border-radius: 10px 10px 0 0;
   width: 100%;
   aspect-ratio: 2/1.3;
   transition: 0.3s all;
}

.hospital-img .fav-btn {
   position: absolute;
   top: 10px;
   right: 10px;
}

.hospital-card:hover img {
   transform: scale(1.1);
}

.hospital-card h5 a {
   font-size: 18px;
   font-weight: 700;
   color: #262D27;
   display: inline-block;
}

.hospital-card h5 {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.hospital-card h5 a:hover {
   color: #4285F4;
}

.hospital-card p {
   font-size: 15px;
   font-weight: 400;
}

.hospital-card .rating {
   font-weight: 500;
   margin: 10px 0;
}

.find-doc-sec {
   background-image: url(../images/find-doctor-bg.png);
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   z-index: 99;
}

.find-doc-sec::after {
   position: absolute;
   content: '';
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
   background-color: #000000AD;
   z-index: -9;
}

.work-list {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.work-list li {
   position: relative;
   text-align: center;
   flex: 0 0 auto;
   width: 33.33333333%;
}

.work-list li:nth-last-child(1)::after {
   display: none;
}

.work-list li::after {
   position: absolute;
   content: '';
   left: 54%;
   top: 0;
   background-image: url(../images/work-line-01.svg);
   background-repeat: no-repeat;
   height: 60px;
   width: 363px;
   z-index: -9;
}

.work-list li:nth-child(2)::after {
   background-image: url(../images/work-line-02.svg);
   top: 30px;
}

.work-list li span {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 80px;
   width: 80px;
   background-color: #fff;
   box-shadow: 0px 0px 20px 0px #0000001A;
   border-radius: 8px;
   position: relative;
   margin: 0 auto;
}

.work-list li span em {
   position: absolute;
   top: 0;
   right: 0;
   display: inline-block;
   height: 20px;
   width: 20px;
   background-color: #C0D4FB;
   color: #000;
   line-height: 20px;
   text-align: center;
   font-style: normal;
   font-size: 12px;
   border-radius: 25px;
}

.work-list li h4 {
   font-size: 20px;
   font-weight: 700;
   color: #262D27;
   margin: 15px 0;
}

.blog-card {
   background: linear-gradient(180deg, rgba(192, 212, 251, 0.26) 0%, #FAFAFC 100%);
   border: 1px solid #C0D4FB;
   padding: 10px;
   border-radius: 10px;
   margin-bottom: 20px;
}

.blog-img {
   overflow: hidden;
   position: relative;
   border-radius: 10px 10px 0 0;
   margin-bottom: 10px;
}

.blog-img img {
   border-radius: 10px 10px 0 0;
   width: 100%;
   aspect-ratio: 2 / 1.4;
   transition: 0.3s all;
}

.blog-card:hover img {
   transform: scale(1.2);
}

.blog-card .blog-admin {
   font-size: 14px;
   font-weight: 400;
   color: #8CA0B8;
}

.blog-card .blog-admin span {
   display: inline-block;
   margin-right: 8px;
}

.blog-card h5 {
   font-size: 18px;
   color: #262D27;
   font-weight: 700;
   margin-bottom: 8px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.blog-card .blog-desc {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   line-height: 25px;
}

.download-bar-main {
   margin-top: 120px;
   margin-bottom: -100px;
   position: relative;
}

.download-bar {
   padding: 20px 20px 0 20px;
   background-color: #4285F4;
   border-radius: 12px;
}

.download-bar-lft a img {
   width: 180px;
}

.app-download-img {
   margin-top: -170px;
}

.testimonial-sec {
   background-color: #4285F40D;
}

.testimonial-card {
   border: 1px solid #C0D4FB;
   border-radius: 10px;
   background-color: #fff;
   margin-bottom: 20px;
}

.testimonial-innr {
   padding: 15px;
}

.testimonial-innr .desc {
   font-size: 16px;
   color: #262D27;
   line-height: 28px;
}

.testimonial-bttm {
   background-color: #4285F4;
   padding: 0px 10px 10px 10px;
   margin-top: 30px;
   border-radius: 0 0 10px 10px;
   position: relative;
}

.testimonial-bttm h5 {
   font-size: 18px;
   font-weight: 700;
   color: #fff;
   padding-top: 15px;
}

.testimonial-bttm p {
   font-size: 16px;
   font-weight: 400;
   color: #fff;
}

.testimonial-bttm span {
   display: inline-block;
   height: 90px;
   width: 90px;
   border-radius: 10px;
   position: absolute;
   bottom: 40px;
   right: 15px;
}

.testimonial-bttm span img {
   width: 100%;
   height: 100%;
   border-radius: 10px;
}

.thm-footer {
   padding-top: 100px;
   background-color: #1C2A3A;
}

.ftr-logo img {
   width: 170px;
}

.ftr-abt p {
   font-size: 15px;
   font-weight: 400;
   line-height: 26px;
   margin-bottom: 10px;
}

.ftr-abt .header-media a {
   height: 40px;
   width: 40px;
   line-height: 40px;
}

.ftr-title {
   font-size: 20px;
   font-weight: 700;
   color: #fff;
   margin-bottom: 20px;
   text-transform: capitalize;
}

.ftr-link li a {
   display: inline-block;
   margin-bottom: 15px;
   color: #fff;
   font-size: 16px;
   font-weight: 400;
   position: relative;
   padding-left: 10px;
}

.ftr-link li a::after {
   position: absolute;
   content: '';
   left: 0;
   top: 10px;
   height: 5px;
   width: 5px;
   background-color: #fff;
   border-radius: 25px;
}

.ftr-link li a:hover {
   color: #4285F4;
}

.ftr-link li a:hover::after {
   background-color: #4285F4;
}

.ftr-contact li {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 25px;
}

.ftr-contact li:hover span {
   background-color: #4285F4;
}

.ftr-contact li span {
   display: inline-block;
   height: 40px;
   width: 40px;
   background-color: #FFFFFF26;
   color: #fff;
   text-align: center;
   line-height: 40px;
   border-radius: 25px;
   transition: 0.2s all;
}

.ftr-contact li h6 {
   font-size: 14px;
   font-weight: 700;
   color: #C0D4FB;
   margin-bottom: 4px;
}

.ftr-contact li a {
   display: inline-block;
   font-size: 16px;
   font-weight: 500;
   color: #fff;
}

.ftr-contact li a:hover {
   color: #4285F4;
}

/*home-page-css-end*/
.innr-page-banner {
   background-image: url(../images/innr-banner.png);
   background-repeat: no-repeat;
   background-size: cover;
   padding-top: 90px;
   padding-bottom: 70px;
   position: relative;
   z-index: 99;
}

.innr-page-banner::after {
   position: absolute;
   content: '';
   left: 0;
   top: 0;
   background-color: #4285F4B0;
   height: 100%;
   width: 100%;
   z-index: -9;
}

.innr-page-content h1 {
   font-size: 40px;
   font-weight: 700;
   color: #fff;
   margin-bottom: 20px;
}

.custom-bredcump {
   justify-content: center;
   margin-bottom: 0;
}

.custom-bredcump .breadcrumb-item, .custom-bredcump .breadcrumb-item a {
   font-size: 16px;
   font-weight: 500;
   color: #fff;
}

.custom-bredcump .breadcrumb-item {
   position: relative;
   padding-right: 20px;
}

.custom-bredcump .breadcrumb-item.active {
   color: #C0D4FB;
   overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-bredcump .breadcrumb-item+.breadcrumb-item::before {
   content: '';
   height: 8px;
   width: 8px;
   background-color: #fff;
   border-radius: 25px;
   padding: 0;
   position: absolute;
   left: -10px;
   top: 8px;
}

.doctor-filter.sticky-top {
   top: 10px;
}

.doctor-filter .cards-header h5 {
   font-size: 18px;
   font-weight: 700;
   color: #000;
   margin-bottom: 0;
}

.doctor-filter .cards-header a {
   display: inline-block;
   font-size: 16px;
   font-weight: 400;
   color: #EA4335;
}

.doctor-filter .cards-body .accordion-item {
   margin-bottom: 15px;
   border: 0;
   border-bottom: 1px solid #C0D4FB;
   border-radius: 0;
   background-color: transparent;
}

.doctor-filter .cards-body .accordion-item .accordion-header .accordion-button {
   background-color: transparent;
   box-shadow: none;
   font-size: 16px;
   font-weight: 700;
   color: #262D27;
   padding: 5px;
}

.doctor-filter .cards-body .accordion-item .accordion-body {
   padding: 5px;
   background-color: transparent;
}

.doctor-filter .cards-body .accordion-item .accordion-body .form-check {
   margin-bottom: 15px;
}

.doctor-filter .cards-body .accordion-item .accordion-body .form-check .form-check-input {
   box-shadow: none;
   height: 18px;
   width: 18px;
   border-radius: 2px;
   border-color: #B2BCC9;
}

.doctor-filter .cards-body .accordion-item .accordion-body .form-check .form-check-input:checked {
   background-color: #4285F4;
   border-color: #4285F4;
}

.doctor-filter .cards-body .accordion-item .accordion-body .form-check .form-check-label {
   font-size: 14px;
   font-weight: 500;
   color: #6B7280;
   cursor: pointer;
   text-transform: capitalize;
}

.doctor-page .cards {
   background: linear-gradient(180deg, rgba(192, 212, 251, 0.26) 0%, #FAFAFC 100%);
}

.doctor-page .doctor-card {
   text-align: center;
}

.doctor-page .doctor-profile {
   display: block;
}

.doctor-page .doctor-profile .doctor-img {
   margin: 0 auto;
}

.doctor-page .doctor-content h4 {
   margin: 10px 0;
}

.doctor-page .doctor-card .thm-btn {
   border-radius: 25px;
   margin-top: 5px;
}

.page-filter {
   padding-bottom: 10px;
   border-bottom: 1px solid #C0D4FB;
   margin-bottom: 20px;
}

.page-filter .title {
   font-size: 25px;
   margin-bottom: 0;
}

.page-filter .custom-frm-bx .form-control {
   padding-left: 35px;
}

.page-filter .custom-frm-bx span {
   position: absolute;
   left: 10px;
   top: 20px;
   color: #1C2A3A;
   font-size: 18px;
}

.contact-innr {
   background-color: #F4F4F6;
}

.contact-info {
   padding: 50px 20px 0 20px;
   background-color: #4285F4;
   height: 100%;
}

.contact-info h4 {
   font-size: 25px;
   font-weight: 700;
   color: #fff;
   margin-bottom: 30px;
}

.contact--info-dtl li {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 45px;
}

.contact--info-dtl li span {
   display: inline-block;
   height: 60px;
   width: 60px;
   background-color: #FFFFFF26;
   color: #fff;
   text-align: center;
   line-height: 60px;
   border-radius: 50px;
   transition: 0.2s all;
   font-size: 20px;
}

.contact--info-dtl li h6 {
   font-size: 16px;
   font-weight: 700;
   color: #C0D4FB;
   margin-bottom: 8px;
}

.contact--info-dtl li a {
   display: inline-block;
   font-size: 16px;
   font-weight: 500;
   color: #fff;
}

.contact-info img {
   margin-top: 40px;
}

.contact-form {
   padding: 40px 30px 30px 20px;
}

.contact-form h3 {
   font-size: 25px;
   font-weight: 700;
   color: #000000;
   margin-bottom: 30px;
}

.doctor-dtl .cards {
   background: #fff;
}

.doctor-dtl-prfl {
   display: flex;
   gap: 10px;
   align-items: center;
   position: relative;
}

.doctor-dtl-prfl .doctor-dtl-prfl-img {
   height: 136px;
   width: 136px;
   border: 1px solid #F4F4F6;
   border-radius: 10px;
}

.doctor-dtl-prfl .doctor-dtl-prfl-img img {
   height: 100%;
   width: 100%;
   border-radius: 10px;
}

.doctor-dtl-prfl-content h4 {
   font-size: 30px;
   font-weight: 700;
   color: #262D27;
}

.doctor-dtl-prfl-content h6 {
   font-size: 18px;
   font-weight: 700;
   color: #4285F4;
}

.doctor-dtl-prfl-content p {
   font-size: 16px;
   font-weight: 400;
   color: #8CA0B8;
}

.doctor-dtl-prfl .fav-btn {
   position: absolute;
   top: 0;
   right: 0;
}

.hospital-address {
   padding: 15px;
   border: 1px solid #C0D4FB;
   border-radius: 20px;
   margin: 20px 0;
}

.hospital-address h5 {
   font-size: 18px;
   font-weight: 700;
   color: #1C2A3A;
}

.hospital-address p {
   margin-bottom: 0;
}

.hospital-badge {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 20px 0;
}

.hospital-badge a {
   display: block;
   text-align: center;
}

.hospital-badge a span {
   display: inline-block;
   height: 80px;
   width: 80px;
   line-height: 80px;
   background-color: #DFEBFF;
   color: #4285F4;
   border-radius: 50px;
   font-size: 30px;
   margin-bottom: 10px;
}

.hospital-badge a h6 {
   font-size: 18px;
   font-weight: 700;
   color: #1C2A3A;
   margin-bottom: 5px;
}

.doc-desc {
   background-color: #eee;
   padding: 15px;
   border-radius: 10px;
   margin: 15px 0;
}

.doc-desc p {
   position: relative;
   padding-left: 10px;
}

.doc-desc p::after {
   position: absolute;
   content: '';
   left: 0;
   top: 12px;
   height: 5px;
   width: 5px;
   background-color: #6B7280;
   border-radius: 25px;
}

.review-link {
   display: inline-block;
   font-size: 18px;
   font-weight: 700;
   color: #4285F4;
   text-decoration: underline !important;
}

.review-list li {
   margin-bottom: 25px;
}

.review-user {
   display: flex;
   gap: 10px;
   align-items: center;
}

.review-user span {
   display: inline-block;
   height: 60px;
   width: 60px;
   border-radius: 50px;
}

.review-user span img {
   height: 100%;
   width: 100%;
   border-radius: 50px;
}

.review-user .rating {
   margin-top: 0;
}

.review-user h6 {
   font-size: 18px;
   font-weight: 700;
   margin-bottom: 5px;
   color: #262D27;
}

.review-list li p {
   font-size: 16px;
   line-height: 26px;
   margin-top: 10px;
}

.doctor-appoinment.sticky-top {
   top: 10px;
}

.doctor-appoinment .cards-header h6 {
   font-size: 20px;
   font-weight: 700;
   color: #1C2A3A;
   margin-bottom: 0;
}

.doctor-appoinment .cards-header .price {
   color: #4285F4;
   line-height: 24px;
}

.doctor-appoinment .cards-header .price span {
   color: #6B7280;
   font-size: 13px;
   font-weight: 400;
}

.calendar-bx {
   margin: 15px 0;
}

.schedule-time {
   display: flex;
   align-items: center;
   gap: 15px;
   flex-wrap: wrap;
   justify-content: space-between;
   max-height: 200px;
   overflow-y: auto;
}

.schedule-time li label {
   padding: 10px 18px;
   border: 1px solid #8CA0B8;
   background-color: #fff;
   color: #6B7280;
   border-radius: 8px;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
}

.schedule-time li input[type="radio"]:checked+label {
   background-color: #4285F4;
   border-color: #4285F4;
   color: #fff;
}

.doctor-prfl {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px;
   background-color: #FAFAFC;
   border: 1px solid #C0D4FB;
   border-radius: 10px;
   margin-bottom: 15px;
}

.doctor-prfl span {
   display: inline-block;
   height: 60px;
   width: 60px;
   border-radius: 50px;
}

.doctor-prfl span img {
   height: 100%;
   width: 100%;
   border-radius: 50%;
}

.doctor-prfl .doctor-content p {
   line-height: normal;
}

.schedule-bx {
   display: grid;
   grid-template-columns: auto auto;
   gap: 10px;
}

.schedule-card {
   padding: 10px;
   background-color: #FAFAFC;
   border: 1px solid #F4F4F6;
   text-align: center;
   border-radius: 10px;
}

.schedule-card h5 {
   font-size: 16px;
   font-weight: 700;
   color: #1C2A3A;
}

.payment-list li {
   padding: 8px 10px;
   background-color: #FAFAFC;
   border: 1px solid #F4F4F6;
   border-radius: 8px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 10px;
}

.payment-list li .form-check {
   margin-bottom: 0;
}

.payment-list li .form-check .form-check-input {
   background-color: #FAFAFC;
   border-color: #8CA0B8;
   box-shadow: none;
}

.payment-list li .form-check .form-check-input:checked {
   background-color: #4285F4;
   border-color: #4285F4;
}

.appoinment-book .modal-content {
   border: 0;
   border-radius: 0;
}

.appoinment-book .modal-body {
   text-align: center;
}

.appoinment-book .modal-body img {
   width: 200px;
}

.appoinment-book .modal-body h5 {
   color: #6B7280;
}

.appoinment-book .modal-body h5 span {
   color: #1C2A3A;
   font-size: 20px;
   font-weight: 700;
}

.blog-dtl-img {
   height: 450px;
   width: 100%;
   margin-bottom: 10px;
}

.blog-dtl-img img {
   height: 100%;
   width: 100%;
   border-radius: 15px;
}

.blog-dtl-sec .blog-admin span {
   color: #4285F4;
   margin-right: 8px;
}

.blog-dtl-sec h4 {
   font-size: 30px;
   font-weight: 700;
   color: #262D27;
   margin-bottom: 15px;
}

.faq-sec .accordion-item {
   margin-bottom: 15px;
   border: 0;
}

.faq-sec .accordion-item .accordion-button {
   background-color: #C0D4FB;
   box-shadow: none;
   border-radius: 0 !important;
   color: #000;
   font-size: 16px;
   font-weight: 700;
   padding: 10px;
}

.faq-sec .accordion-item .accordion-body {
   background-color: #C0D4FB1A;
   padding: 10px;
}

.faq-sec .accordion-item .accordion-body p {
   color: #000;
}

.faq-sec .accordion-item .accordion-button::after {
   background-image: none;
   content: '\f078';
   height: 30px;
   width: 30px;
   background-color: #fff;
   line-height: 30px;
   text-align: center;
   border-radius: 25px;
   font-family: "Font Awesome 5 Pro";
   color: #000;
}

.faq-sec .accordion-item .accordion-button:not(.collapsed)::after {
   background-image: none;
}

.hospital-dtl-card .hospital-address h5 {
   font-size: 30px;
   font-weight: 700;
   color: #262D27;
}

.hospital-dtl-card .hospital-img {
   height: 400px;
}

.hospital-dtl-card .hospital-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.location-modal .modal-header h5 {
   font-size: 22px;
   font-weight: 600;
   color: #262D27;
}

.location-modal .modal-header .btn-close {
   background-image: none;
   padding: 0 !important;
   box-shadow: none !important;
   opacity: 1 !important;
   height: 30px;
   width: 30px;
   text-align: center;
   line-height: 30px;
   background-color: #262D27;
   color: #fff;
   border-radius: 50px;
}

.location-list {
   max-height: 300px;
   overflow-y: auto;
}

.location-list li {
   padding: 5px 0;
   border-bottom: 1px solid #e8e8e8;
}

.location-list li h6 {
   font-size: 16px;
   font-weight: 500;
   color: #10375C;
   margin-bottom: 0;
}

.location-list li .current-address {
   display: flex;
}

.location-list li .current-address .loc-icon {
   display: inline-block;
   font-size: 20px;
   color: #4285F4;
}

.location-list li .current-address .current-address-contnt {
   margin-left: 5px;
}

.location-list li .current-address .current-address-contnt h5 {
   font-size: 16px;
   margin-bottom: 0;
   font-weight: 500;
   color: #4285F4;
}

.location-list li .current-address .current-address-contnt p {
   margin-bottom: 0;
   font-size: 14px;
}

.location-modal .modal-footer {
   padding: 5px;
}

.user-sidebar {
   padding: 20px;
   background-color: #4285F4;
   border-radius: 15px;
   height: 100%;
}

.sidebar-prfl .sidebar-prfl-img {
   height: 98px;
   width: 98px;
   border-radius: 50%;
   margin: 0 auto;
}

.sidebar-prfl .sidebar-prfl-img img {
   height: 100%;
   width: 100%;
   border-radius: 50%;
}

.sidebar-prfl h5 {
   font-size: 18px;
   font-weight: 700;
   color: #fff;
   text-align: center;
   margin-top: 15px;
   margin-bottom: 20px;
}

.sidebar-menu {
   margin-top: 40px;
}

.sidebar-menu .sidebar-menu-item {
   margin-bottom: 15px;
}

.sidebar-menu .sidebar-menu-item .sidebar-menu-link {
   display: block;
   padding: 13px 15px;
   background-color: #FFFFFF30;
   color: #fff;
   border-radius: 10px;
   font-size: 16px;
   font-weight: 500;
}

.sidebar-menu .sidebar-menu-item .sidebar-menu-link:hover, .sidebar-menu .sidebar-menu-item .sidebar-menu-link.active {
   background-color: #000;
}

.user-panel-prfl-img {
   margin-bottom: 30px;
}

.user-panel-prfl-img .user-panel-prfl-img-innr {
   height: 120px;
   width: 120px;
   border-radius: 50%;
   position: relative;
}

.user-panel-prfl-img .user-panel-prfl-img-innr img {
   height: 100%;
   width: 100%;
   border-radius: 50%;
}

.user-panel-prfl-img label {
   height: 34px;
   width: 34px;
   line-height: 34px;
   background-color: #4285F4;
   text-align: center;
   color: #fff;
   border-radius: 10px;
   position: absolute;
   right: 0;
   bottom: 0;
   font-size: 16px;
   cursor: pointer;
}

.user-panel-prfl .custom-frm-bx .icon {
   position: absolute;
   right: 1px;
   top: 33px;
   height: 53px;
   width: 45px;
   line-height: 55px;
   text-align: center;
   background-color: #FAFAFC;
   border-radius: 0 10px 10px 0;
   color: #B2BCC9;
   font-size: 18px;
}

.user-panel-prfl .custom-frm-bx input[type="date"]::-webkit-calendar-picker-indicator {
   filter: sepia(1) hue-rotate(180deg) saturate(5);
   color: #B2BCC9;
}

.user-panel-prfl .custom-frm-bx input[type="date"]::-webkit-calendar-picker-indicator {
   filter: invert(0.5);
   color: #B2BCC9;
   background-color: transparent;
}

.user-panel-prfl .custom-frm-bx .form-control, .user-panel-prfl .custom-frm-bx .form-select {
   color: #000;
}

.appoinment-tabs {
   justify-content: space-between;
}

.appoinment-tabs .tab-link {
   font-size: 18px;
   font-weight: 700;
   color: #6B7280;
   position: relative;
}

.appoinment-tabs .tab-link::after {
   position: absolute;
   content: '';
   left: 0;
   bottom: -12px;
   height: 3px;
   width: 100%;
   background-color: #4285F4;
   opacity: 0;
}

.appoinment-tabs .tab-link.active, .appoinment-tabs .tab-link:hover {
   color: #4285F4;
}

.appoinment-tabs .tab-link.active::after {
   opacity: 1;
}

.appoinment-cards {
   padding: 10px;
   background-color: #FAFAFC;
   border-radius: 10px;
   margin-bottom: 15px;
}

.appoinment-cards-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.appoinment-cards-header a {
   display: inline-block;
   margin-right: 5px;
}

.appoinment-cards-header img {
   width: 30px;
}

.appoinment-cards-header p {
   color: #4D9B91;
   margin-bottom: 0;
   font-weight: 600;
}

.appoinment-cards-body {
   padding: 10px 0;
   margin: 10px 0;
   border-top: 1px solid #c0d4fb59;
   border-bottom: 1px solid #c0d4fb59;
}

.appoinment-user {
   display: flex;
   align-items: center;
   column-gap: 10px;
}

.appoinment-user-img {
   height: 80px;
   width: 80px;
}

.appoinment-user-img img {
   height: 100%;
   width: 100%;
   border-radius: 50%;
}

.appoinment-user-content h4 {
   font-size: 18px;
   font-weight: 700;
   color: #262D27;
   margin-bottom: 0;
}

.appoinment-user-content p {
   margin-bottom: 0;
}

.appoinment-user-content p span {
   color: #4285F4;
}

.appoinment-modal .modal-content {
   border: 0;
}

.appoinment-modal .modal-body h5 {
   font-size: 22px;
   font-weight: 700;
   color: #262D27;
}

.appoinment-modal .btn-close {
   height: 30px;
   width: 30px;
   background-color: #EA4335;
   color: #fff;
   line-height: 30px;
   text-align: center;
   border-radius: 25px;
   margin-left: auto;
   margin-top: 10px;
   margin-right: 10px;
}

.review-doc-img {
   height: 100px;
   width: 100px;
   margin: 20px auto 0 auto;
}

.review-doc-img img {
   height: 100%;
   width: 100%;
   border-radius: 50%;
}

.review-star {
   display: flex;
   justify-content: center;
   gap: 10px;
   margin: 15px 0;
}

.review-star .star {
   cursor: pointer;
   color: #33384B;
   font-size: 24px;
   transition: color 0.2s;
}

.review-star .star.selected {
   color: #FEB052;
}

.appoinment-dtl-sec .doctor-card {
   background: linear-gradient(180deg, rgba(192, 212, 251, 0.26) 0%, #FAFAFC 100%);
}

.appoinment-dtl-sec .doctor-profile {
   align-items: flex-start;
}

.appoinment-dtl-sec .doctor-img {
   height: 80px;
   width: 80px;
}

.appointment-payment li {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px 0;
   border-bottom: 1px solid #8CA0B8;
   color: #6B7280;
}

.appointment-payment li span:nth-last-child(1) {
   color: #1C2A3A;
}

.appointment-payment li span.text-success {
   color: #34A853 !important;
}

.appointment-date {
   display: flex;
   align-items: center;
   gap: 20px;
}

.appointment-date span {
   display: inline-block;
   height: 95px;
   width: 95px;
   line-height: 95px;
   text-align: center;
   background-color: #D9D9D9;
   border-radius: 50px;
}

.appointment-date p {
   margin-bottom: 0;
}

.appointment-date h6 {
   font-size: 18px;
   font-weight: 700;
   color: #4D9B91;
}

.appoinment-dtl-bttm {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.chat-list li {
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid #C0D4FB;
   padding: 10px 0;
   margin-bottom: 10px;
}
.chat-list li:nth-last-child(1){
   border: 0;
}

.chat-list-user {
   display: flex;
   gap: 10px;
   align-items: center;
}

.chat-list-user .chat-list-img {
   height: 70px;
   width: 70px;
}

.chat-list-user .chat-list-img img {
   height: 100%;
   width: 100%;
   border-radius: 50%;
}

.chat-list-user .chat-list-content h5 {
   font-size: 18px;
   font-weight: 700;
   color: #262D27;
   margin-bottom: 0;
}

.chat-list-user .chat-list-content p {
   margin-bottom: 0;
}

.notifications-list li {
   display: flex;
   gap: 10px;
   align-items: center;
   position: relative;
   padding: 10px 0;
   border-bottom: 1px solid #C0D4FB;
   margin-bottom: 10px;
}
.notifications-list li:nth-last-child(1){
   border: 0;
}

.notifications-list li span {
   height: 60px;
   width: 60px;
   background-color: #DEF7E5;
   color: #014737;
   text-align: center;
   line-height: 60px;
   border-radius: 50px;
   font-size: 22px;
}

.notifications-list h6 {
   font-size: 18px;
   font-weight: 700;
   color: #262D27;
   margin-bottom: 0;
}

.notifications-list p {
   margin-bottom: 0;
}

.notifications-list li em {
   font-style: normal;
   position: absolute;
   right: 0px;
   top: 30px;
   color: #8CA0B8;
   font-size: 18px;
   font-weight: 700;
}

.favorite-list .appoinment-tabs .tab-item {
   width: 50%;
}

.favorite-list .appoinment-tabs .tab-item .tab-link {
   width: 100%;
}

.chat-container {
   border-radius: 15px;
   overflow: hidden;
   border: 1px solid #C0D4FB;
   background-color: #fff;
}

.chat-header {
   padding: 15px;
   display: flex;
   align-items: center;
   border-bottom: 5px solid #C0D4FB;
   position: relative;
}

.chat-header .back-btn {
   color: #000;
   font-size: 20px;
}

.chat-header img.chat-user {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   margin-right: 10px;
}

.chat-header .chat-call {
   margin-left: auto;
}

.chat-header .status-dot {
   height: 8px;
   width: 8px;
   background-color: #28a745;
   border-radius: 50px;
}

.chat-header h4 {
   font-size: 18px;
   font-weight: 700;
   color: #262D27;
   margin-bottom: 0;
}

.chat-body {
   padding: 20px;
   max-height: 450px;
   overflow-y: auto;
}

.message {
   margin-bottom: 15px;
   max-width: 50%;
}

.message.sent p {
   color: #fff;
   margin-bottom: 0;
   line-height: normal;
   font-size: 15px;
}

.message.received p {
   color: #333;
   margin-bottom: 0;
   line-height: normal;
   font-size: 15px;
}

.message.sent {
   margin-left: auto;
   background-color: #4a90e2;
   color: #fff;
   border-radius: 15px 15px 0 15px;
   padding: 10px 15px;
}

.message.sent.image, .message.received.image {
   padding: 0;
   background-color: transparent;
   border-radius: 0;
}

.message.image img {
   width: 100%;
}

.message.sent.image .message-time {
   color: #ccc;
}

.message.received {
   background-color: #eef3f9;
   border-radius: 15px 15px 15px 0;
   padding: 10px 15px;
}

.message-time {
   font-size: 0.75rem;
   color: #ccc;
   margin-top: 4px;
   text-align: right;
}

.message.sent .message-time {
   color: #ccc;
}

.chat-footer {
   padding: 10px 15px;
   border-top: 5px solid #C0D4FB;
   display: flex;
   align-items: center;
   gap: 10px;
}

.chat-footer-innr {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex: 1;
   height: 55px;
   background-color: #FAFAFC;
   border: 1px solid #C0D4FB;
   border-radius: 10px;
   padding: 0 10px;
}

.chat-footer-innr .form-control {
   border: 0;
   border-radius: 0;
   background-color: transparent;
   padding: 0;
}

.chat-footer-innr button {
   font-size: 20px;
   color: #4285F4;
}

.chat-upload label {
   height: 45px;
   width: 45px;
   text-align: center;
   line-height: 45px;
   background-color: rgb(52 168 83 / 20%);
   color: #34A853;
   margin-bottom: 0;
   font-size: 18px;
   border-radius: 50px;
   cursor: pointer;
}


/* Calling */
.audio-sec {

   min-height: 100vh;

   background-color: #4285F4;

}
 
.audio-user-img {

   display: flex;

   justify-content: center;

   align-items: center;

   min-height: 100vh;

}
 
.audio-user-card {

   width: 200px;

   height: 200px;

   border-radius: 8px;

   background-color: rgb(117 159 229 / 76%);

   display: flex;

   justify-content: center;

   align-items: center;

   flex-direction: column;

   overflow: hidden;

}
 
.audio-user-card img {

   height: 100px;

   width: 100px;

   border-radius: 50%;

}
 
.audio-user-card h4 {

   font-size: 20px;

   font-weight: 600;

   color: #fff;

   margin-top: 15px;

   overflow: hidden;

   text-overflow: ellipsis;

   white-space: nowrap;

}
 
.call-ftr {

   position: fixed;

   bottom: 20px;

   left: 0;

   right: 0;

   display: flex;

   justify-content: center;

   gap: 20px;

   z-index: 1020;

}
 
.call-ftr button {

   display: inline-block;

   height: 50px;

   width: 50px;

   text-align: center;

   line-height: 50px;

   font-size: 16px;

   border-radius: 50px;

   background-color: #fff;

   color: #333;

   transition: 0.2s;

}
 
.call-ftr button:hover {

   opacity: 0.8;

}
 
.call-ftr button.voice-btn {

   background-color: #fff;

   color: #333;

}
 
.call-ftr button.call-btn {

   background-color: #e90000;

   color: #fff;

}
 
.call-header {

   position: fixed;

   top: 10px;

   left: 0;

   right: 0;

   z-index: 1020;

   display: flex;

   justify-content: space-between;

   padding: 0 20px;

   align-items: center;

}
 
.call-header a {

   background-color: #fff;

   color: #333;

   display: inline-block;

   height: 40px;

   width: 40px;

   text-align: center;

   line-height: 40px;

   font-size: 15px;

   border-radius: 50px;

}
 
.call-header a:hover {

   opacity: 0.8;

}
 
.call-header p {

   font-size: 16px;

   font-weight: 500;

   color: #fff;

   margin-bottom: 0;

}
 
.vido-bx {

   display: flex;

   flex-direction: column;

   align-items: center;

   justify-content: center;

   min-height: 100vh;

}
 
.vido-bx-card {

   height: 400px;

   width: 800px;

   border: 1px solid #fff;

   border-radius: 8px;

   overflow: hidden;

}
 
@media(max-width:991px) {

   .vido-bx-card {

      height: 250px;

      width: 300px;

   }
 
   .call-ftr button {

      height: 40px;

      width: 40px;

      line-height: 40px;

      font-size: 15px;

   }
 
   .call-header a {

      height: 35px;

      width: 35px;

      line-height: 35px;

      font-size: 14px;

   }
 
   .call-header p {

      font-size: 14px;

   }
 
}